Xamarin Forms Square Button Grid

0
votes

I am trying to make 9 square buttons in a grid (picture of what I have so far is below). I am using Xamarin Forms with Visual Studio 2019. It seems no matter what I do, I am always getting 8 square buttons and 1 rectangle button. Any suggestions?


       <?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="Chess_test13.MainPage">

       <StackLayout>
           <Grid Padding="50,50" RowSpacing="0" ColumnSpacing="0" >

               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto" />
                   <RowDefinition Height="Auto" />
                   <RowDefinition Height="Auto" />
               </Grid.RowDefinitions>

               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>

               <Button x:Name="00" ClassId="00" PropertyChanged="PropertyChanged" Text="" Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 00}}" />
               <Button x:Name="01" ClassId="01" PropertyChanged="PropertyChanged" Text="" Grid.Row="0" Grid.Column="1" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 01}}" />
               <Button x:Name="02" ClassId="02" PropertyChanged="PropertyChanged" Text="" Grid.Row="0" Grid.Column="2" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 02}}" />
               <Button x:Name="10" ClassId="10" PropertyChanged="PropertyChanged" Text="" Grid.Row="1" Grid.Column="0" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 10}}" />
               <Button x:Name="11" ClassId="11" PropertyChanged="PropertyChanged" Text="" Grid.Row="1" Grid.Column="1" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 11}}" />
               <Button x:Name="12" ClassId="12" PropertyChanged="PropertyChanged" Text="" Grid.Row="1" Grid.Column="2" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 12}}" />
               <Button x:Name="20" ClassId="20" PropertyChanged="PropertyChanged" Text="" Grid.Row="2" Grid.Column="0" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 20}}" />
               <Button x:Name="21" ClassId="21" PropertyChanged="PropertyChanged" Text="" Grid.Row="2" Grid.Column="1" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 21}}" />
               <Button x:Name="22" ClassId="22" PropertyChanged="PropertyChanged" Text="" Grid.Row="2" Grid.Column="2" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 22}}" />

           </Grid>
       </StackLayout>

   </ContentPage>

Image of from my XAML code

3
xamarinbuttonxamarin.formsgridsquare
I run the same code you posted, and it's working fine at my end, I only had to change the RowSpacing and ColumnSpacing to bigger values, I also changed the button names to start with letters. other than that it's showing 3x3 identical squares – mshwf
@Brad Stephen Did you solve the issue? – Lucas Zhang - MSFT

3 Answers

1
votes

The height of RowDefinition when set to Auto will fill the space according to it's child views. Here your grid has a child of an empty button and hence the very first element is smaller in size.

Use * instead of auto so that the entire Height is divided into equal parts. Prefer * when you need the grid to be divided to equal parts or propotional parts

<Grid
        RowSpacing="1"
        ColumnSpacing="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" />
        <Button Grid.Row="0" Grid.Column="1" />
        <Button Grid.Row="0" Grid.Column="2" />

        <Button Grid.Row="1" Grid.Column="0" />
        <Button Grid.Row="1" Grid.Column="1" />
        <Button Grid.Row="1" Grid.Column="2" />

        <Button Grid.Row="2" Grid.Column="0" />
        <Button Grid.Row="2" Grid.Column="1" />
        <Button Grid.Row="2" Grid.Column="2" />
    </Grid>

Above Xaml's UI result

Please do refer the following Microsoft Docs. I have provided a screen shot of a table from the docs below

Grid height and width values

Hope this could help you.

0
votes

Since you had set 

<ColumnDefinition Width="*" />

and the width of each column will be set as 1/3 width of screen when you have 3 columns.

<ScrollView>
        <Grid x:Name="MainGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button Text="aaaaaaaaaaaaaaaaaa"
            x:Name="btn1"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
            HeightRequest="{Binding Width, Source={x:Reference btn1}}"
            Grid.Row="0"
            Grid.Column="0"/>

            <Button Text="Text2..."
            x:Name="btn2"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
            WidthRequest="{Binding Width, Source={x:Reference btn1}}"
            HeightRequest="{Binding Width, Source={x:Reference btn2}}"
            Grid.Row="0"
            Grid.Column="1"/>

            <Button Text="Text3..."
             x:Name="btn3"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
            WidthRequest="{Binding Width, Source={x:Reference btn1}}"
            HeightRequest="{Binding Width, Source={x:Reference btn3}}"
            Grid.Row="0"
            Grid.Column="2"/>

            <Button Text="aaaaaaaaaaaaaaaaa"
            x:Name="btn4"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
                    WidthRequest="{Binding Width, Source={x:Reference btn1}}"
            HeightRequest="{Binding Width, Source={x:Reference btn4}}"
            Grid.Row="1"
            Grid.Column="0"/>

            <Button Text="Text5..."
            x:Name="btn5"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
                    WidthRequest="{Binding Width, Source={x:Reference btn1}}"
            HeightRequest="{Binding Width, Source={x:Reference btn5}}"
            Grid.Row="1"
            Grid.Column="1"/>

            <Button Text="Text6..."
             x:Name="btn6"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
                    WidthRequest="{Binding Width, Source={x:Reference btn1}}"
            HeightRequest="{Binding Width, Source={x:Reference btn6}}"
            Grid.Row="1"
            Grid.Column="2"/>

        </Grid>
    </ScrollView>

enter image description here

-2
votes

You could try using fixed RowDefinition and ColumnDefinition values, something like 

<Grid.RowDefinitions>
    <RowDefinition
        Height="80" />
    <RowDefinition
        Height="80" />
    <RowDefinition
        Height="80" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition
        Width="80" />
    <ColumnDefinition
        Width="80" />
    <ColumnDefinition
        Width="80" />
</Grid.ColumnDefinitions>

And then for every button you should keep HorizontalOptions and VerticalOptions to Fill.