Xamarin.Forms 如何在Button控件内部嵌入使用Grid布局
你的需求完全可以实现,以下是两种可落地的实现方式:
Xamarin.Forms 原生Button的Content属性支持传入任意View类型组件,你可以直接将之前用在ListView单元格里的Grid布局放到Button的Content中,用法和你之前的开发习惯完全一致。
示例XAML代码如下:
<Button Clicked="OnCustomButtonClicked" BorderColor="Black" BorderWidth="1" BackgroundColor="Transparent" Padding="0"> <Button.Content> <Grid> <!-- 定义网格行列,和你之前的用法完全一致 --> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!-- 网格内的自定义内容 --> <Label Text="左上" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center"/> <Label Text="右上" Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center"/> <Label Text="左下" Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center"/> <Label Text="右下" Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center"/> <!-- 绘制红色网格线,比Grid原生网格线属性兼容性更好 --> <BoxView Grid.RowSpan="2" Grid.Column="0" WidthRequest="1" BackgroundColor="Red" HorizontalOptions="End"/> <BoxView Grid.ColumnSpan="2" Grid.Row="0" HeightRequest="1" BackgroundColor="Red" VerticalOptions="End"/> </Grid> </Button.Content> </Button>
注意:如果Android平台出现内容显示异常,可给Button添加Android专属属性android:UseCompatPadding="True"即可解决。
方案2:手势容器模拟按钮(兼容性更强)
如果遇到部分平台Button自定义内容适配异常的问题,可以用Frame+Grid+点击手势的方式模拟按钮功能,除了可自行添加点击态视觉效果外,功能和原生Button完全一致,适配成本更低。
示例XAML代码如下:
<Frame BorderColor="Black" CornerRadius="4" Padding="0" HasShadow="False"> <Grid> <!-- 此处放置和方案一中完全一致的网格内容 --> <Grid.GestureRecognizers> <TapGestureRecognizer Tapped="OnCustomButtonClicked"/> </Grid.GestureRecognizers> </Grid> </Frame>
内容的提问来源于stack exchange,提问作者Fish1996
相关产品推荐
相关产品推荐

