How to create a Grid Which takes the full Height of its container in WINUI 3?

Question

I have created a grid and it's not taking the full height of its container. I dont know how to fix it. Below is the code...

    <x:Class="WINUITMP.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
    xmlns:controls1="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:WINUITMP.Views"
    xmlns:local1="using:SegmentedExperiment.Samples"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="using:CommunityToolkit.WinUI"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="7*" />
            <RowDefinition Height="3*" />
        </Grid.RowDefinitions>
        <Frame x:Name="PageFrame" Grid.Row="0">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <StackPanel Grid.Row="0" VerticalAlignment="Stretch">
                    <TextBlock Text="Hello" />
                </StackPanel>

                <StackPanel
                    Grid.Row="1"
                    VerticalAlignment="Stretch"
                    Background="AliceBlue">
                    <Grid VerticalAlignment="Stretch" Background="Yellow">
                        
                    </Grid>
                </StackPanel>
            </Grid>
        </Frame>
        <Grid Grid.Row="1" Padding="0,0,0,20">
            <Border
                Margin="0,20,0,0"
                BorderBrush="{StaticResource SurfaceStrokeColorDefaultBrush}"
                BorderThickness="1"
                CornerRadius="8" />
        </Grid>
    </Grid>
</Page>

I want the Grid inside this to take the full height of its container.

<StackPanel
    Grid.Row="1"
    VerticalAlignment="Stretch"
    Background="AliceBlue">
    <Grid VerticalAlignment="Stretch" Background="Yellow">
    </Grid>
</StackPanel>

Answer 1

The StackPanel won't stretch its children.

For example, with the code below, the LeftTextBox will have its default height, whereas the RightTextBox will have a stretched height.

<Grid ColumnDefinitions="*,*">
    <StackPanel Grid.Column="0">
        <TextBox x:Name="LeftTextBox" />
    </StackPanel>
    <Grid Grid.Column="1">
        <TextBox x:Nam="RightTextBox" />
    </Grid>
</Grid>

In your case, the Grid inside the StackPanel will have its default height, which is 0 because it's empty.

If you want to have a stretched Grid, you need to wrap it with a Grid instead of a StackPanel.