UWP窗口调整时Grid布局元素显示异常问题求助

问题根源 #

当前Grid前5行使用固定高度（250+100×4=650），加上按钮自身高度85，总需求高度至少735。但窗口设置为1200×800时，实际客户区高度会扣除标题栏、边框等系统占用空间，可用高度不足导致按钮所在的第5行（Height="*"）被压缩，再加上按钮设置VerticalAlignment="Center"，最终被挤出可视区域。

可行解决方案 #

方案1：用ScrollViewer包裹Grid #

当窗口尺寸不足时自动生成垂直滚动条，确保所有元素均可通过滚动查看：

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
    <Grid x:Name="MainGrid">
        <!-- 原Grid内所有元素保留不变 -->
    </Grid>
</ScrollViewer>

方案2：将固定行高改为比例分配 #

把固定高度的行换成*比例，让所有行根据窗口高度自适应分配空间，同时限制元素最大高度避免拉伸过度：

<Grid.RowDefinitions>
    <RowDefinition Height="3*"/> <!-- 标题区域占3份比例 -->
    <RowDefinition Height="1*"/> <!-- 每个输入框区域各占1份 -->
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/> <!-- 按钮区域占1份 -->
</Grid.RowDefinitions>

给输入框添加MaxHeight="100"，保持按钮Height="85"，确保元素不会被过度拉伸。

方案3：优化按钮行的布局逻辑 #

给按钮所在行设置最小高度，同时调整按钮垂直对齐方式为顶部，避免被挤出：

<Grid.RowDefinitions>
    <!-- 前5行高度保留原设置，第6行改为 -->
    <RowDefinition Height="*" MinHeight="85"/>
</Grid.RowDefinitions>

修改按钮的垂直对齐属性：

<Button x:Name="MyButton" Grid.Row="5" Grid.Column="1" Height="85" Width="200" 
        Style="{StaticResource primaryButtonStyle}" HorizontalAlignment="Center" 
        VerticalAlignment="Top" Content="Create or Login"  
        FontSize="25" FontFamily="Yu Gothic UI Semibold">
</Button>

额外注意事项 #

• 不要给Page设置固定Height和Width，保持默认的Auto值，避免窗口调整时出现黑边。
• 可给MainGrid添加Margin="20"，让元素与窗口边缘保留留白，提升视觉效果。

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