How do you put a square in center of screen(using xaml)

Question

I don't understand why this is so hard. Is there no anchor on relativelayout?

I want to put square on center of screen. Width of square is 80% of width of screen. Height of square is same with width.

so simple.

But can't figure out so far using with xaml. Could you help me?

jzeferino · Accepted Answer · 2018-01-23T11:35:07.417

12

The simplest XAML solution would be (inspired by @Funk):

UPDATE: As said in comments this works now for Android and iOS (a Xamarin.Android bug was fixed)

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition Width="8*" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition Height="Auto" />
    <RowDefinition />
</Grid.RowDefinitions>
<BoxView x:Name="thebox" Grid.Column="1" Grid.Row="1" BackgroundColor="Aqua" HeightRequest="{Binding Source={x:Reference thebox}, Path=Width}" />
</Grid>

Result:

Hard way (works on Android and iOS):

I made a ad-hoc solution for your case assuming you want to use a BoxView. I've extended BoxView and forced the wight to be the same as width. You can play with it for other results.

The XAML will look like:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="forms_pcl.MyPage" xmlns:local="clr-namespace:forms_pcl;assembly=forms_pcl">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="8*" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="8*" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <local:SquareBox HorizontalOptions="CenterAndExpand" VerticalOptions="Center" BackgroundColor="Aqua" Grid.Column="1" Grid.Row="1" />
    </Grid>
</ContentPage>

NOTE: The flags HorizontalOptions="CenterAndExpand" VerticalOptions="Center" are mandatory to force the GetSizeRequest to be called for height and width.

And SquareBox will look like:

public class SquareBox : BoxView
{
    public override SizeRequest GetSizeRequest(double widthConstraint, double heightConstraint)
    {
        return new SizeRequest(new Size(widthConstraint, widthConstraint), new Size(widthConstraint, widthConstraint));
    }
}

Result:

edited Jan 23 '18 at 11:35

answered Jun 26 '16 at 09:45

jzeferino

7,700
1
39
59

1

For the first example, this is a little cleaner: also the first example doesn't seem to work on Android. – Bill Reiss Jun 26 '16 at 12:44
I like the cleaner way, but it still don't work on android. – jzeferino Jun 26 '16 at 14:29
Yes it looks like a Forms bug on Android – Bill Reiss Jun 26 '16 at 15:49
1

Hi, @jzeferino . I really appreciate your answer and example. It helps a lot and it's good to know. I upvoted it. Thanks again. – Bright Lee Jun 26 '16 at 17:10
1

Thanks @jzeferino and Funk. It helped me a lot. SImple way, it working on iOS (seems like bus on Android) and hard way, it is not pure XAML but it is best and good enough answer. Thanks again. – Bright Lee Jun 26 '16 at 17:32
Glad to help you. Very pertinent question. – jzeferino Jun 26 '16 at 17:39
I changed BoxView to AbsoluteLayout, It works on Android too! – Bright Lee Jun 26 '16 at 18:18
– Bright Lee Jun 26 '16 at 18:18
I just use hard way(It's quite easy though). It's stable and work wonderfully. – Bright Lee Jun 26 '16 at 18:55
If you don't mind, could you look my another question? Only if you have time for that. http://stackoverflow.com/questions/38024007/how-to-add-two-full-sized-page-in-scrollview-on-xamarin-forms – Bright Lee Jun 26 '16 at 19:07
I have a solution for that, i will tell you later. – jzeferino Jun 26 '16 at 19:32
@jzeferino really. That's amazing. Don't be rush. Thanks. – Bright Lee Jun 26 '16 at 19:49
Hi, @jzeferino I hope it doesn't border you. I'm strugling this issue for several days. Can you give your hand for me? Thanks. http://stackoverflow.com/questions/38225716/how-to-set-my-custom-classs-member-views-property-from-xaml-xamarin-forms – Bright Lee Jul 06 '16 at 13:52
I will try to help you later on that. – jzeferino Jul 06 '16 at 13:53
1

@jzeferino The bug in Forms is fixed now so this also works on Android :) – Adam Cooper Jan 23 '18 at 09:59
Thank you. Updated the answer. – jzeferino Jan 23 '18 at 11:35

Funk · Answer 2 · 2016-06-26T10:40:51.090

2

I don't know about Xamarin, but in Xaml you can use the squares ActualWidth property to "convert" the proportional width to device-independent pixels.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="8*"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/> 
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Border Name="square"
            BorderBrush="Red" BorderThickness="1" Grid.Column="1" Grid.Row="1"
            Height="{Binding ElementName=square, Path=ActualWidth}"
            />
</Grid>

EDIT

An attempt to translate the syntax using Xamarin Binding Basics.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="8*"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/> 
        <RowDefinition/>
    </Grid.RowDefinitions>
    <BoxView x:Name="square"
             BindingContext="{x:Reference square}"
             Grid.Column="1" Grid.Row="1" BackgroundColor="Red" 
             Height="{Binding ActualWidth}"
             />
</Grid>

edited Jun 26 '16 at 10:40

answered Jun 26 '16 at 08:43

Funk

10,976
1
17
33

This wont work in xamarin becase we don't have the binding ElementName. Name, Borderbrush, etc aren't Xamarin Forms XAML compatible. – jzeferino Jun 26 '16 at 09:11
@jzeferino Does Xamarin support RelativeSource in a binding? – Funk Jun 26 '16 at 09:47
Not directly but it seems to be possible using behaviors. Please watch this thread and tell me what you think. https://forums.xamarin.com/discussion/25677/does-xamarin-forms-support-relativesource-on-a-binding Thanks to your post i was able to achieve this in XAML. See my answer bellow. – jzeferino Jun 26 '16 at 11:24
You're welcome. The RelativeContext exposed by the behavior looks promising. It seems to be constrained for use with Commands though. – Funk Jun 26 '16 at 11:36
Hi @Funk I like your way and wanna say thank you a lot. But It cannot get ActualWidth property(It doesn't seem there is ActualWidth in BoxView). I changed it just 'Width', still not working. but Thanks again. – Bright Lee Jun 26 '16 at 17:17
1

And @jzeferino improved it for Xamarin. Thanks you guys. – Bright Lee Jun 26 '16 at 17:17
I changed "HeightRequest=" instead "Height=/" and it works on iOS. But still not working on Android. as @jzeferino says it seems like bug. – Bright Lee Jun 26 '16 at 17:30
1

@BrightLee You're welcome. I'm unfamiliar with Xamarin, since I have never used it. But I was pretty sure you guys would figure it out. – Funk Jun 26 '16 at 17:56

score -2 · Answer 3 · answered Jun 25 '16 at 23:14

It is not recommended to use relativeLayout due to performance issues . For your problem I would suggest to use Grid Like the following

 <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="8*"/>
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition Height="8*"/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <BoxView BackgroundColor="Red" Grid.Column="1" Grid.Row="1"/>

</Grid>

Hi BraveHeart. Thanks. But it's not square. it's rectangle. – Bright Lee Jun 26 '16 at 00:04 — Bright Lee, Jun 26 '16 at 00:04

How do you put a square in center of screen(using xaml)

3 Answers3

Linked