Как мы можем отобразить пользовательский элемент управления UWP на вертикальном верхнем краю родительского окна?

После XAML в этом Учебник Microsoft показывает слишком большой зазор между верхним краем родительского окна и UWP user control. Вопрос: как мы можем выровнять пользовательский элемент управления по верхнему краю родительского окна? Примечание: VerticalAlignment="Top" в StackPanel ниже не помогает. Этот вопрос чем-то похож на этот пост, но в другом контексте.

<UserControl
    x:Class="ClassLibUWP_inside_WPF.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ClassLibUWP_inside_WPF"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    d:DesignWidth="400" Height="329">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="211*"/>
            <ColumnDefinition Width="189*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Background="LightCoral" Grid.ColumnSpan="2">
            <TextBlock>This is a simple custom UWP control</TextBlock>
            <Rectangle Fill="Blue" Height="93" Width="100"/>
            <TextBlock Text="{x:Bind XamlIslandMessage}" FontSize="50"></TextBlock>
            <winui:RatingControl Height="32" />
        </StackPanel>
    </Grid>
</UserControl>

При запуске приложения, созданного с помощью приведенного выше руководства, вы увидите следующий экран, показывающий указанный выше пользовательский элемент управления UWP:

Вместо этого я хотел бы отобразить его следующим образом [обратите внимание на отсутствие разрыва между заголовком окна и красной панелью стека]: