C# 如何在Xamarin.Forms中制作方形按钮网格?
我正在尝试创建一个类似于我为Android创建的活动的Xamarin.Forms内容页: 所以基本上我想要一个正方形按钮的网格,我可以通过添加更多的行来轻松地扩展它。我的内容页看起来是这样的(到目前为止只有1行):C# 如何在Xamarin.Forms中制作方形按钮网格?,c#,xaml,xamarin,grid,C#,Xaml,Xamarin,Grid,我正在尝试创建一个类似于我为Android创建的活动的Xamarin.Forms内容页: 所以基本上我想要一个正方形按钮的网格,我可以通过添加更多的行来轻松地扩展它。我的内容页看起来是这样的(到目前为止只有1行): 我就快到了,但是按钮会根据它们的文本长度调整大小,这是我想要阻止的——所有按钮的大小都应该相同。怎么做?既然你已经设置了 <ColumnDefinition Width="*" /> 当您有3列时,每列的宽度将设置为屏幕宽度的1/3 <ScrollVi
我就快到了,但是按钮会根据它们的文本长度调整大小,这是我想要阻止的——所有按钮的大小都应该相同。怎么做?既然你已经设置了
<ColumnDefinition Width="*" />
当您有3列时,每列的宽度将设置为屏幕宽度的1/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>
我最终成功了,解决方案是更改按钮的水平选项以填充:
<?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说明进行操作。现在可以使用了吗?
<?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>