我们如何在 parent window 的 vertical-top 边缘显示 UWP 用户控件？

Question

在此 Microsoft tutorial is showing too much gap between the top edge of the parent window and the UWP user control. Question: How can we make the user control align to the top edge of parent window? Remark: The VerticalAlignment="Top" in the StackPanel below does not help. This question is something similar to this post 中关注 XAML，但在不同的上下文中。

<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 用户控件的屏幕:

我想改为显示如下[注意 window 标题和红色堆栈面板之间没有间隙]:

Answer 1

UserControl 的固定高度小于 window 的高度，因此在 window 中垂直居中。在 WindowsXamlHost 上设置 VerticalAlignment="Top" 应该可以满足您的需求。

我们如何在 parent window 的 vertical-top 边缘显示 UWP 用户控件？

How can we show UWP user control on vertical-top edge of the parent window?

wpf

xaml

uwp

xaml-islands