MAUI Button文本未适配按钮尺寸，如何缩至20高度并居中文本？

开发者阿泽

2026-7-11

解决MAUI按钮高度适配与文本居中问题

问题分析

你设置了外层HorizontalStackLayout的HeightRequest="20"，但MAUI的Button默认带有内边距，且未明确限制自身高度，导致按钮内容被容器裁切，文本无法居中显示。

解决方案

需给Button添加以下关键属性来修复：

HeightRequest="20"：强制按钮高度与容器一致
Padding="0"：移除按钮默认内边距，避免文本被挤压
VerticalTextAlignment="Center"：确保文本在按钮垂直方向居中
将外层HorizontalStackLayout的VerticalOptions改为Fill，让按钮完全填充容器高度

修改后的完整代码

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PhotobookUI.TableContentPage"
             Title="TableContentPage">

    <VerticalStackLayout HorizontalOptions="Fill">
        <HorizontalStackLayout
                HorizontalOptions="Fill"
                HeightRequest="20"
                VerticalOptions="Fill">
            <Button
                x:Name="BackButton"
                Text="Back"
                SemanticProperties.Hint="Back"
                Clicked="OnBackClicked"
                CornerRadius="0"
                HeightRequest="20"
                Padding="0"
                VerticalTextAlignment="Center"
                VerticalOptions="Fill"/>
        </HorizontalStackLayout>
    </VerticalStackLayout>
</ContentPage>