如何在WinUI 3中设置Flyout宽度和高度

Question

我想创建一个宽度为800的

Flyout

，与

TextBox

相同。然后将弹出控件附加到文本框。因为我无法直接设置 Flyout 的宽度（

Width

类中没有

Flyout

属性）。我尝试将弹出窗口内的网格宽度设置为 800。这是我的代码

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

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

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

当我运行

ShowFlyout()

方法时。它通过滚动显示网格，而不是展开弹出窗口（抱歉，我没有更改背景颜色，因此可能很难看到）。上面的 TextBox 宽度为 800。显然，Flyout 的宽度不是 800。

我尝试的是遵循这个官方文档。所以我将这些 xaml 添加到

<Flyout>

元素

<Flyout.FlyoutPresenterStyle>
    <Style TargetType="FlyoutPresenter">
        <Setter Property="Width" Value="800"></Setter>
    </Style>
</Flyout.FlyoutPresenterStyle>

不幸的是，一切都没有改变。我该如何解决这个问题？

Answer 1

您可以像这样直接设置

MaxWidth

和

Width

：

<TextBox
    x:Name="SearchBox1"
    Width="800"
    Height="40">
    <FlyoutBase.AttachedFlyout>
        <Flyout Opened="SearchBoxFlyout_Opened">
            <!-- FLYOUT CONTENT -->
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBox>

private void SearchBoxFlyout_Opened(object sender, object e)
{
    // This also works.
    //if (VisualTreeHelper
    //    .GetOpenPopupsForXamlRoot(this.XamlRoot)
    //    .FirstOrDefault()?.Child is not FlyoutPresenter flyoutPresenter ||
    //    sender is not Flyout flyout)
    //{
    //    return;
    //}

    if (sender is not Flyout flyout ||
        (flyout.Content as FrameworkElement)?.Parent is not FlyoutPresenter flyoutPresenter)
    {
        return;
    }

    flyoutPresenter.MaxWidth = flyout.Target.ActualWidth;
    flyoutPresenter.Width = flyout.Target.ActualWidth;
}