如何仅自动调整WPF控件的字体大小

问题场景 #

现有如下WPF Grid布局，控件位置由Grid的行/列定义固定：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2.5*"/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition Height="2.5*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2.5*"/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition Width="2.5*"/>
    </Grid.ColumnDefinitions>

    <TextBox x:Name="username" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="Username"
                    GotFocus="RemoveLabel" LostFocus="RestoreLabel"
                    HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
    <TextBox x:Name="password" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3" Text="Password"
                GotFocus="RemoveLabel" LostFocus="RestoreLabel"
                HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
    <Button x:Name="signUp" Grid.Row="5" Grid.Column="1" Content="Sign up"/>
    <Button x:Name="signIn" Grid.Row="5" Grid.Column="3" Content="Sign in"/>
</Grid>

需要实现：窗口缩放时，控件保持Grid分配的尺寸不变，同时内部文字自动调整大小以填满控件空闲空间。尝试过Viewbox但会改变控件本身尺寸，不符合需求。

解决方法 #

核心思路是将Viewbox嵌套在控件内部，让控件自身保持Grid定义的尺寸，由Viewbox负责缩放内部的文字内容，同时设置Viewbox填充控件的整个内容区域。

具体修改步骤 #

1. TextBox控件调整：移除原TextBox的Text属性，改用内部嵌套Viewbox+TextBlock的结构，把焦点事件绑定到TextBlock上，同时让Viewbox占满TextBox的内容空间。
2. Button控件调整：在Button的Content中嵌套Viewbox+TextBlock，确保文字随Button尺寸缩放。

修改后完整代码 #

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="2.5*"/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition Height="2.5*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2.5*"/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition Width="2.5*"/>
    </Grid.ColumnDefinitions>

    <!-- 用户名输入框 -->
    <TextBox x:Name="username" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3"
             HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
        <Viewbox Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <TextBlock x:Name="usernameText" Text="Username"
                       GotFocus="RemoveLabel" LostFocus="RestoreLabel"/>
        </Viewbox>
    </TextBox>

    <!-- 密码输入框 -->
    <TextBox x:Name="password" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3"
             HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
        <Viewbox Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <TextBlock x:Name="passwordText" Text="Password"
                       GotFocus="RemoveLabel" LostFocus="RestoreLabel"/>
        </Viewbox>
    </TextBox>

    <!-- 注册按钮 -->
    <Button x:Name="signUp" Grid.Row="5" Grid.Column="1"
            HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
        <Viewbox Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <TextBlock Text="Sign up"/>
        </Viewbox>
    </Button>

    <!-- 登录按钮 -->
    <Button x:Name="signIn" Grid.Row="5" Grid.Column="3"
            HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
        <Viewbox Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <TextBlock Text="Sign in"/>
        </Viewbox>
    </Button>
</Grid>

关键说明 #

• Viewbox的Stretch="Uniform"确保文字按比例缩放，不会变形；
• 设置控件的HorizontalContentAlignment="Stretch"和VerticalContentAlignment="Stretch"，让内部的Viewbox填满控件的整个内容区域；
• 原TextBox的焦点事件转移到内部的TextBlock上，确保提示文字的显示/隐藏逻辑正常工作。

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