c# - XAML UWP 浮出控件定位

Question

我正在 UWP 应用程序中实现 Flyout，如下图所示。我希望 Flyout 中的 AutoSuggestBox 出现在(并填充)PageHeader 中，但它出现在它的下方。

这是我的 XAML:

<Button x:Name="searchButton" Margin="0" Padding="0" BorderThickness="0" RelativePanel.AlignBottomWith="pageHeader">
        <Button.Content>
            <FontIcon Height="48" Width="48" Glyph="&#xE094;"/>
        </Button.Content>
        <Button.Flyout>
            <Flyout>
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="BorderThickness" Value="0"/>
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                        <Setter Property="Height" Value="40"/>
                        <Setter Property="VerticalAlignment" Value="Top"/>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <StackPanel Margin="0" VerticalAlignment="Top">
                    <AutoSuggestBox x:Name="innerSearchBox" PlaceholderText="Search" VerticalAlignment="Top"/>
                </StackPanel>
            </Flyout>
        </Button.Flyout>
    </Button>

如何让 AutoSugesstBox 出现并填充 PageHeader？

Answer 1

将布局设置为弹出按钮的左侧。

<Flyout Placement="Left">

如果要使AutoSuggestBox覆盖应用程序的整个宽度，请将AutoSuggestBox的宽度设置为ApplicationView宽度。

你可以这样做

public MainPage()
{
    this.InitializeComponent();
    ApplicationView.GetForCurrentView().VisibleBoundsChanged += MainPage_VisibleBoundsChanged;
    var bound = ApplicationView.GetForCurrentView().VisibleBounds;
    innerSearchBox.Width = (int)bound.Width - 48;        //48 is the size of the button
}

private void MainPage_VisibleBoundsChanged(ApplicationView sender, object args)
{
    var bound = ApplicationView.GetForCurrentView().VisibleBounds;
    innerSearchBox.Width = (int)bound.Width - 48;
}