Растяжение страницы приложения UWP C # (XAML) в некоторых случаях приводит к обрезанию кнопок.

Question

Я новичок, работающий с UWP / XAML UI design.У меня есть базовое приложение, в котором есть четыре кнопки, которые в некоторых случаях хорошо отображаются (и растягиваются / масштабируются нормально), но при уменьшении очень маленького или очень большого размера (см. Скриншоты) кнопки обрезаются.Я ожидал, что окно приложения будет держать масштабированные кнопки при растяжении, а при уменьшении окна, не позволит мне уменьшить его до определенной точки, сохраняя все 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 и задаете размер 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>