如何在 Xamarin.Forms 中制作方形按钮网格? [英] How to make square buttons grid in Xamarin.Forms?

问题描述

我正在尝试创建一个类似于我为 Android 创建的活动的 Xamarin.Forms 内容页面:

I'm trying to create a Xamarin.Forms content page similar to an activity I created for Android:

所以基本上我想要一个方形按钮网格，我可以通过添加更多行来轻松扩展它.我的内容页面是这样的(目前只有 1 行):

So basically I want to have a grid of square buttons, which I could easily expand by adding more rows. My content page looks like that (only 1 row so far):

<?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>

我快到了，但按钮会根据它们的文本长度调整大小，我想防止这种情况发生 - 所有按钮的大小都应该相同.该怎么做?

I'm almost there, but the buttons resize according to their text length, which I want to prevent - all of them should be of equal size. How to do that?

推荐答案

既然你已经设置了

<ColumnDefinition Width="*" />

当你有 3 列时，每列的宽度将设置为屏幕宽度的 1/3.

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" />
            </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>

这篇关于如何在 Xamarin.Forms 中制作方形按钮网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！