在某些情况下，UWP C# 应用程序 (XAML) 拉伸页面会导致按钮被切断。

Question

我是一名使用 UWP / XAML UI 设计的初学者。我有一个基本的应用程序，它有四个按钮，在某些情况下可以很好地显示（并且可以拉伸/缩放），但是当缩小得非常小或非常大（见屏幕截图）时，按钮会被切断。我期望应用程序窗口在伸展时会保持按钮的缩放，并且在缩小窗口时，不会让我将其缩小到某个点之外，让所有 4 个按钮始终可见（在屏幕截图中，只有 3 个4 个按钮有一个图像）。我已经包含了我的 XAML。有人可以帮助我了解我所缺少的吗？

屏幕截图：（第一个是尽可能缩小，第二个是最大到 Surface Pro 屏幕的宽度和高度）

XAML：

<Page
    x:Class="WindowsTemplateStudioApp.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Style="{StaticResource PageStyle}"
    mc:Ignorable="d">
    <Grid
        x:Name="ContentArea"
        Margin="{StaticResource MediumLeftRightMargin}">
        <Grid
            Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Border Grid.Row="1" Grid.ColumnSpan="2" Background="DarkGray"/>
                <Border Grid.Row="0" Grid.ColumnSpan="2" Background="DarkGray"/>
                <StackPanel Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" Margin="10">
                    <Button 
                        Background="LightGray"
                        Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <StackPanel>
                            <Image Source="/Assets/barcode.png" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                        </StackPanel>
                    </Button>
                </StackPanel>
                <StackPanel Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" Margin="10">
                    <Button 
                        Background="LightGray"
                        Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <StackPanel>
                            <Image Source="/Assets/shop.png" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                        </StackPanel>
                    </Button>
                </StackPanel>
                <StackPanel Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" Margin="10">
                    <Button 
                        Background="LightGray"
                        Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <StackPanel>
                            <Image Source="/Assets/list.png" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                        </StackPanel>
                    </Button>
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</Page>

Answer 1

您为高度指定了 auto，它占用了您的第一行最大高度加上第二行高度的高度。如果要为网格指定拉伸行为，请指定“*”而不是 Auto：

 <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
 </Grid.RowDefinitions>

为什么要用 StackPanel 包装所有内容并为所有元素指定 size auto 。你不想拥有自动，你想要拉伸行为：

<Grid
    x:Name="ContentArea">
    <Grid
        Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border Grid.Row="1" Grid.ColumnSpan="2" Background="DarkGray"/>
            <Border Grid.Row="0" Grid.ColumnSpan="2" Background="DarkGray"/>

                <Button Grid.Column="0" Grid.Row="0" Margin="10"
                    Background="LightGray"
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch">                        
                        <Image Source="/Assets/Square150x150Logo.scale-200.png" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>                        
                </Button>

            <Button Grid.Column="1" Grid.Row="0" Margin="10"
                    Background="LightGray"
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch">                        
                        <Image Source="/Assets/Square150x150Logo.scale-200.png" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>                        
                </Button>                
                <Button Grid.Column="0" Grid.Row="1" Margin="10"
                    Background="LightGray"
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch">                        
                        <Image Source="/Assets/Square150x150Logo.scale-200.png" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

                </Button>
        </Grid>
    </Grid>
</Grid>