UWP计算器按钮文本窗口缩小时消失问题求助

问题根源 #

1. 所有按钮使用固定字号（FontSize=120），窗口缩小后按钮尺寸不足，文本因无法适配容器被直接裁剪消失
2. 结果文本框TextResault设置了固定宽度Width=1420，窗口缩小时会超出布局范围，挤压按钮的可用空间
3. 减号按钮的Grid.Column="4"是无效设置——你的Grid仅包含4列（索引0-3），这会导致该按钮布局异常，进一步打乱整体空间分配

修复方案 #

1. 用ViewBox包裹按钮内容：让按钮文本自动缩放以适配按钮当前尺寸，这是解决文本适配容器最直接的方式
2. 移除固定尺寸限制：删掉TextBox的固定Width，让它通过Grid的列布局自适应宽度
3. 修复列索引错误：把减号按钮的Grid.Column改为3，匹配Grid的列索引范围
4. 可选：给按钮添加最小尺寸限制，避免窗口缩到极小导致按钮过小影响交互

修改后的完整XAML代码 #

<Page
    x:Class="Labb_2_Calculator.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Labb_2_Calculator"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Background="WhiteSmoke" KeyDown="Grid_KeyDown">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        
        <!-- 移除固定Width，让文本框自适应列宽 -->
        <TextBox Background="White" Foreground="Black" IsReadOnly="True" Name="TextResault" 
                 Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Height="160" 
                 HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10" 
                 FontSize="100" Text="0"/>
        
        <TextBlock Foreground="Black" Name="TextNumber" TextTrimming="CharacterEllipsis" 
                   Width="Auto" Height="Auto" Grid.Column="3" Text="" FontSize="80" 
                   VerticalAlignment="Center" HorizontalAlignment="Left" Margin="30"/>

        <!-- 用ViewBox包裹按钮内容，实现文本自适应缩放 -->
        <Button Name="button1" Click="Button_Click" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="1">
            <ViewBox>
                <TextBlock Text="1"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_1" Grid.Column="1" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="1">
            <ViewBox>
                <TextBlock Text="2"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_2" Grid.Column="2" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="1">
            <ViewBox>
                <TextBlock Text="3"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_3" Grid.Column="3" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="1">
            <ViewBox>
                <TextBlock Text="+"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_4" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="2">
            <ViewBox>
                <TextBlock Text="4"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_5" Grid.Column="1" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="2">
            <ViewBox>
                <TextBlock Text="5"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_6" Grid.Column="2" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="2">
            <ViewBox>
                <TextBlock Text="6"/>
            </ViewBox>
        </Button>
        <!-- 修复列索引错误，改为3 -->
        <Button Click="Button_Click_7" Grid.Column="3" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="2">
            <ViewBox>
                <TextBlock Text="-"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_8" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="3">
            <ViewBox>
                <TextBlock Text="7"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_9" Grid.Column="1" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="3">
            <ViewBox>
                <TextBlock Text="8"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_10" Grid.Column="2" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="3">
            <ViewBox>
                <TextBlock Text="9"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_11" Grid.Column="3" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="3">
            <ViewBox>
                <TextBlock Text="X"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_12" Background="orange" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="4">
            <ViewBox>
                <TextBlock Text="C"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_13" Grid.Column="1" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="4">
            <ViewBox>
                <TextBlock Text="0"/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_14" Grid.Column="2" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="4">
            <ViewBox>
                <TextBlock Text="="/>
            </ViewBox>
        </Button>
        <Button Click="Button_Click_15" Grid.Column="3" Background="LightGray" 
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10" Grid.Row="4">
            <ViewBox>
                <TextBlock Text="/"/>
            </ViewBox>
        </Button>
    </Grid>
</Page>

额外优化建议 #

• 给Grid设置MinWidth和MinHeight，避免窗口缩到极小导致布局完全混乱
• 可以将按钮的样式提取为Style，减少重复代码，方便统一修改

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