CODEWITHSUNDEEP
xamlxamarinxamarin.forms
Bright Lee
Bright Lee

Reputation: 2326

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

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?

Upvotes: 7

Views: 4517

Answers (3)

jzeferino
jzeferino

Reputation: 7850

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:

enter image description here

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:

enter image description here enter image description here

Upvotes: 12

Funk
Funk

Reputation: 11221

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>

Upvotes: 2

Ahmad ElMadi
Ahmad ElMadi

Reputation: 2617

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>

Upvotes: -2

Related Questions