.NET MAUI设置HeightRequest/WidthRequest后按钮文本居中方法求助

在.NET MAUI应用中，设置了HeightRequest="35"、WidthRequest="100"的“Cancel”和“OK”按钮，文本无法在垂直和水平方向居中。希望不通过设置内边距这类技巧，基于指定的HeightRequest/WidthRequest实现文本居中。相关XAML代码如下：

<Grid RowDefinitions="35" ColumnDefinitions="Auto, Auto" HorizontalOptions="End">

    <Grid.Resources>
        <Style TargetType="Button">
            <Setter Property="FontAutoScalingEnabled" Value="True" />
            <Setter Property="HeightRequest" Value="35" />
            <Setter Property="WidthRequest" Value="100" />
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
            <!--<Setter Property="Padding" Value="15, 7, 15, 10" />-->
        </Style>
    </Grid.Resources>
    
    <Button Grid.Column="0" Text="{loc:Translate CancelButtonText}" Clicked="CancelButton_Clicked" Margin="0, 0, 10, 0" />
    <Button Grid.Column="1" Text="{loc:Translate OKButtonText}" Clicked="OkButton_Clicked" />
            
</Grid>

效果截图：

解决方案 #

1. 显式设置ContentLayout属性 #

按钮默认的ContentLayout可能存在内置间距，添加以下设置强制文本在按钮内部居中：

<Setter Property="ContentLayout" Value="Center, Center" />

将该行加入Button的Style中，直接指定内容的水平和垂直对齐方式。

2. 自定义按钮模板 #

通过自定义ControlTemplate彻底摆脱默认按钮的布局限制，确保文本完全居中：

<Style TargetType="Button">
    <Setter Property="FontAutoScalingEnabled" Value="True" />
    <Setter Property="HeightRequest" Value="35" />
    <Setter Property="WidthRequest" Value="100" />
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="Template">
        <ControlTemplate>
            <Border Background="{TemplateBinding Background}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    Stroke="{TemplateBinding Stroke}"
                    StrokeThickness="{TemplateBinding StrokeThickness}">
                <Grid HorizontalOptions="Fill" VerticalOptions="Fill">
                    <Label Text="{TemplateBinding Text}"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           Font="{TemplateBinding Font}" />
                </Grid>
            </Border>
        </ControlTemplate>
    </Setter>
</Style>

该模板用Grid包裹文本Label，让文本在按钮的整个宽高范围内居中，不受默认样式的内置padding影响。

3. 移除平台默认内边距 #

部分平台的按钮自带默认padding，可通过平台配置移除：

• Android：在Resources/values/styles.xml中修改按钮样式，移除android:padding属性
• iOS：在MauiProgram中通过配置或自定义Renderer覆盖默认按钮的内边距设置

内容的提问来源于stack exchange，提问作者OXO