Как сделать квадратную сетку кнопок в Xamarin.Forms?

Question

Я пытаюсь создать страницу содержимого Xamarin.Forms, аналогичную деятельности, которую я создал для Android:

Так что в основном я хочу иметь сетку из квадратных кнопок, которую я мог бы легко расширить, добавив больше строк. Моя страница контента выглядит так (пока только 1 строка):

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TravelGuide.MainPage">
    <ContentPage.Content>
        <ScrollView>
            <Grid x:Name="MainGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
            <Button Text="Text..."
            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"
            HeightRequest="{Binding Width, Source={x:Reference btn2}}"
            Grid.Row="0"
            Grid.Column="1"/>

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

Я почти на месте, но размер кнопок изменяется в соответствии с их длиной текста, что я хочу предотвратить - все они должны быть одинакового размера. Как это сделать?

Answer 1

Я в конце концов заставил это работать, решение было изменить горизонтальные параметры кнопки на Fill:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TravelGuide.MainPage">
    <ContentPage.Content>
        <ScrollView Padding="5">
            <Grid x:Name="MainGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Text..."
                x:Name="btn1"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Fill"
                HeightRequest="{Binding Width, Source={x:Reference btn1}}"
                Grid.Row="0"
                Grid.Column="0"/>

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

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

                <Button Text="Text3222222..."
                 x:Name="btn4"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Fill"
                HeightRequest="{Binding Width, Source={x:Reference btn3}}"
                Grid.Row="1"
                Grid.Column="0"/>
            </Grid>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

Другой способ сделать это - следовать инструкциям @Lucas Zhang - MSFT, приведенным выше.

Answer 2

Поскольку вы установили

<ColumnDefinition Width="*" />

, а ширина каждого столбца будет равна 1/3 ширины экрана при наличии 3 столбцов.

<ScrollView>
        <Grid x:Name="MainGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.33*" />
                <ColumnDefinition Width="0.33*" />
                <ColumnDefinition Width="0.33*" />
            </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>