XAML UWP Flyout 定位

Question

如下所示，我正在实现UWP应用程序中的Flyout。我希望在Flyout中的AutoSuggestBox出现，并填充PageHeader，但它却出现在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？

- Yvder

---

你的意思是像 Store 应用程序中的搜索行为一样吗？ - erotavlas

不错的想法 @Neme，我会尝试一个弹出窗口。 - Yvder

尝试在您的弹出窗口中设置Placement="Left"。 - Zea Shah

我已经实现了我的搜索框，谢谢大家。 - Yvder

如果没有提供的答案回答您的问题，请编写自己的答案或删除该问题。 - Liero

Answer 1

将飞出菜单的 Placement 属性设置为 Left。

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

- Vijay Nirmal