XAML UWP 浮出控件定位 [英] XAML UWP Flyout positioning

问题描述

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

I am implementing a Flyout in a UWP app as you can see on the image below. I want the AutoSuggestBox in the Flyout to appear in (and fill) the PageHeader, but it appears below it.

这是我的 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?

How can I make the AutoSugesstBox appear in and fill the PageHeader?

推荐答案

将展示位置设置为左弹出.

Set Placement as Left for Flyout.

<Flyout Placement="Left">

如果您想让 AutoSuggestBox 覆盖整个应用程序的宽度，请将 AutoSuggestBox 的宽度设置为 ApplicationView 宽度.

If you want to make the AutoSuggestBox to cover the entire width of the application, set the width of the AutoSuggestBox to ApplicationView width.

你可以这样做

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

这篇关于XAML UWP 浮出控件定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！