XAML UWP Flyout 定位答案

【问题标题】：XAML UWP Flyout positioningXAML UWP Flyout 定位
【发布时间】：2017-03-15 20:50:50
【问题描述】：

如下图所示，我正在 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？

【问题讨论】：

您的意思是像商店应用中的搜索行为方式吗？
是的@erotavlas，没错！
我认为您应该尝试使用 Popup，您可以将其放在按钮旁边，以任何您想要的形状作为布局的一部分，这与作为工具提示或单独的弹出窗口不同小窗户。
不错的主意@Neme，我会尝试弹出窗口。
尝试在浮出控件上设置 Placement="Left"

标签： c# xaml uwp windows-10-universal uwp-xaml

【解决方案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;
}

【讨论】：