WinUI 3中如何设置Flyout的宽度与高度？

问题场景 #

需要创建一个与宽度为800的TextBox同宽的Flyout，尝试设置内部Grid宽度、添加FlyoutPresenterStyle设置Width均无效，Flyout未展开到800宽度，内部内容出现滚动条。

原XAML代码：

<TextBox x:Name="SearchBox1" Height="40" Width="800">
    <FlyoutBase.AttachedFlyout>
        <Flyout x:Name="SearchBoxFlyout">
            <Grid x:Name="ContentArea" Width="800">
                <StackPanel x:Name="StackLayout">
                    <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Text="HI"/>
                </StackPanel>
            </Grid>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBox>

原C#代码：

public SearchBox()
{
    this.InitializeComponent();
}

public void ShowFlyout()
{
    SearchBoxFlyout.Placement = FlyoutPlacementMode.Bottom;
    SearchBoxFlyout.ShowAt(SearchBox1);
}

解决方案 #

• FlyoutPresenter默认带有最小宽度约束，仅设置Width会被内置规则覆盖，需同时指定Width和MinWidth
• 移除内部Grid的固定宽度设置，让内容自动拉伸填满FlyoutPresenter

修改后的完整XAML代码 #

<TextBox x:Name="SearchBox1" Height="40" Width="800">
    <FlyoutBase.AttachedFlyout>
        <Flyout x:Name="SearchBoxFlyout">
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <Setter Property="Width" Value="800"/>
                    <Setter Property="MinWidth" Value="800"/>
                    <!-- 可选：移除默认内边距，让内容与TextBox边缘完全对齐 -->
                    <Setter Property="Padding" Value="0"/>
                </Style>
            </Flyout.FlyoutPresenterStyle>
            <Grid x:Name="ContentArea" HorizontalAlignment="Stretch">
                <StackPanel x:Name="StackLayout">
                    <TextBlock HorizontalAlignment="Stretch" Text="HI"/>
                </StackPanel>
            </Grid>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBox>

C#代码无需修改 #

保持原有的ShowFlyout方法即可，逻辑没有问题。

补充说明 #

• 设置MinWidth是核心：FlyoutPresenter的默认样式中存在最小宽度限制，单独设置Width无法突破该约束
• 内部Grid设置HorizontalAlignment="Stretch"：确保内容填满整个Flyout宽度，避免不必要的滚动条
• 可选调整Padding：消除FlyoutPresenter默认的内边距，让内容与TextBox的边缘完全对齐

内容的提问来源于stack exchange，提问作者Eric Nien