Maintain Grid aspect ratio in Xamarin

Question

I'm trying to make a chess board using Xaml in Xamarin. I've written the following:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App1.MainPage">

    <Grid RowSpacing="0" ColumnSpacing="0" x:Name="chessGrid" HeightRequest="{Binding Source={x:Reference chessGrid}, Path=Width}">

        <Image Grid.Row="0" Grid.Column="0" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="0" Grid.Column="1" BackgroundColor="#b58863" />
        <Image Grid.Row="0" Grid.Column="2" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="0" Grid.Column="3" BackgroundColor="#b58863" />
        <Image Grid.Row="0" Grid.Column="4" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="0" Grid.Column="5" BackgroundColor="#b58863" />
        <Image Grid.Row="0" Grid.Column="6" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="0" Grid.Column="7" BackgroundColor="#b58863" />
        <Image Grid.Row="1" Grid.Column="0" BackgroundColor="#b58863" />
        <Image Grid.Row="1" Grid.Column="1" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="1" Grid.Column="2" BackgroundColor="#b58863" />
        <Image Grid.Row="1" Grid.Column="3" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="1" Grid.Column="4" BackgroundColor="#b58863" />
        <Image Grid.Row="1" Grid.Column="5" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="1" Grid.Column="6" BackgroundColor="#b58863" />
        <Image Grid.Row="1" Grid.Column="7" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="2" Grid.Column="0" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="2" Grid.Column="1" BackgroundColor="#b58863" />
        <Image Grid.Row="2" Grid.Column="2" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="2" Grid.Column="3" BackgroundColor="#b58863" />
        <Image Grid.Row="2" Grid.Column="4" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="2" Grid.Column="5" BackgroundColor="#b58863" />
        <Image Grid.Row="2" Grid.Column="6" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="2" Grid.Column="7" BackgroundColor="#b58863" />
        <Image Grid.Row="3" Grid.Column="0" BackgroundColor="#b58863" />
        <Image Grid.Row="3" Grid.Column="1" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="3" Grid.Column="2" BackgroundColor="#b58863" />
        <Image Grid.Row="3" Grid.Column="3" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="3" Grid.Column="4" BackgroundColor="#b58863" />
        <Image Grid.Row="3" Grid.Column="5" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="3" Grid.Column="6" BackgroundColor="#b58863" />
        <Image Grid.Row="3" Grid.Column="7" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="4" Grid.Column="0" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="4" Grid.Column="1" BackgroundColor="#b58863" />
        <Image Grid.Row="4" Grid.Column="2" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="4" Grid.Column="3" BackgroundColor="#b58863" />
        <Image Grid.Row="4" Grid.Column="4" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="4" Grid.Column="5" BackgroundColor="#b58863" />
        <Image Grid.Row="4" Grid.Column="6" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="4" Grid.Column="7" BackgroundColor="#b58863" />
        <Image Grid.Row="5" Grid.Column="0" BackgroundColor="#b58863" />
        <Image Grid.Row="5" Grid.Column="1" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="5" Grid.Column="2" BackgroundColor="#b58863" />
        <Image Grid.Row="5" Grid.Column="3" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="5" Grid.Column="4" BackgroundColor="#b58863" />
        <Image Grid.Row="5" Grid.Column="5" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="5" Grid.Column="6" BackgroundColor="#b58863" />
        <Image Grid.Row="5" Grid.Column="7" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="6" Grid.Column="0" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="6" Grid.Column="1" BackgroundColor="#b58863" />
        <Image Grid.Row="6" Grid.Column="2" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="6" Grid.Column="3" BackgroundColor="#b58863" />
        <Image Grid.Row="6" Grid.Column="4" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="6" Grid.Column="5" BackgroundColor="#b58863" />
        <Image Grid.Row="6" Grid.Column="6" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="6" Grid.Column="7" BackgroundColor="#b58863" />
        <Image Grid.Row="7" Grid.Column="0" BackgroundColor="#b58863" />
        <Image Grid.Row="7" Grid.Column="1" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="7" Grid.Column="2" BackgroundColor="#b58863" />
        <Image Grid.Row="7" Grid.Column="3" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="7" Grid.Column="4" BackgroundColor="#b58863" />
        <Image Grid.Row="7" Grid.Column="5" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="7" Grid.Column="6" BackgroundColor="#b58863" />
        <Image Grid.Row="7" Grid.Column="7" BackgroundColor="#f0d9b5" />
    </Grid>

</ContentPage>

I was expecting the chess grid to be a square because I've specified the HeightRequest value to be same as width. but the grid takes the full screen instead of being a square. Why the HeightRequest thing didn't work ? and how to fix that ?

Answer 1

To give height and width dynamically , you need to override OnSizeAllocated :

 protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);
            chessGrid.WidthRequest= width;
            chessGrid.HeightRequest = width;
        }

Now,make sure you include these changes in XAML too:

<Grid RowSpacing="0" ColumnSpacing="0" x:Name="chessGrid" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">

Answer 2

There are several things that you miss out:

• Width is not a bindable property, so you can't use it in XAML.
• HeightRequest is just a request for desired height it may be the actual height if the layout allows that, but it may also not be the height of the item

If you are not ready to set the WidthRequest and HeightRequest to some value that is certain to be feasible on the current screen, then you need to play a little with the SizeChanged event of the ContentPage and set those properties to the appropriate value depending on the screen size.