如何在MAUI中将图片按钮分别设置左对齐和右对齐?
如何让Grid列中的按钮分别左对齐和右对齐?
你可以通过以下两种方式实现需求,根据实际场景选择:
方式1:让按钮控件在Grid单元格中靠左/靠右(按钮宽度自适应图片)
直接为按钮设置HorizontalOptions="Start"(第一个按钮)和HorizontalOptions="End"(第二个按钮),同时确保没有样式覆盖该属性。如果仍未生效,可补充设置VerticalOptions="Center"保证垂直居中,或根据图片尺寸设置WidthRequest:
<Grid Grid.Row="3" Margin="0,20,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Button Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center" Command="{Binding MostrarRegistroHorarioEnMapaCommand}" ImageSource="mapa.svg"/> <Button Grid.Column="1" HorizontalOptions="End" VerticalOptions="Center" ImageSource="refrescar.svg" Command="{Binding GetRegistrosHorariosCommand}"/> </Grid>
方式2:让按钮占满Grid列宽度,图片在按钮内靠左/靠右
如果希望按钮填满所在列的宽度,同时图片分别左对齐和右对齐,需设置HorizontalOptions="Fill"让按钮占满列宽,再通过HorizontalContentAlignment控制图片的对齐方向:
<Grid Grid.Row="3" Margin="0,20,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Button Grid.Column="0" HorizontalOptions="Fill" HorizontalContentAlignment="Start" Command="{Binding MostrarRegistroHorarioEnMapaCommand}" ImageSource="mapa.svg"/> <Button Grid.Column="1" HorizontalOptions="Fill" HorizontalContentAlignment="End" ImageSource="refrescar.svg" Command="{Binding GetRegistrosHorariosCommand}"/> </Grid>
关于之前设置未生效的原因
Button在MAUI/Xamarin.Forms中的默认HorizontalOptions为Center,如果你的项目中存在自定义样式覆盖了该属性,会导致手动设置的HorizontalOptions失效。显式设置上述属性即可覆盖默认值,达到预期效果。
内容的提问来源于stack exchange,提问作者Álvaro García
相关产品推荐
相关产品推荐

