UWP C# App (XAML) stretching page causes buttons to be cut off in some cases.

Question

I am a beginner working with UWP / XAML UI design. I have a basic app that has four buttons which shows nicely (and stretches/scales OK) in some cases, but when shrunk really small, or really large (see screenshots) the buttons get cut off. I was expecting that the app window would keep the buttons scaled when stretched out, and when shrinking the window, wouldn't let me shrink it beyond a certain point keeping all 4 buttons visible at all times (in the screenshots, only 3 of the 4 buttons have an image). I have included my XAML. Can someone assist as to what I'm missing?

Screenshots: (first is when shrunk as small as possible, second is when maxed to width and height of Surface Pro screen)

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

You specified auto for the height and it occupied the size of your fist row max height plus height of the second row height. If you want to specify stretching behavior for your grid specify '*' instead of Auto:

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

Why do you wrap everything with StackPanel and specify size auto for all the elements. You don't want to have auto, you want stretching behavior:

<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>