如何在Xamarin.Forms中制作方形按钮网格? [英] How to make square buttons grid in Xamarin.Forms?
问题描述
我正在尝试创建一个Xamarin.Forms内容页面,该页面类似于我为Android创建的活动:
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屋!