XAML UWP Flyout定位

我正在UWP應用中實施Flyout，如下圖所示。我希望Flyout中的AutoSuggestBox出現在（並填充）PageHeader中，但它出現在它的下面。 XAML UWP Flyout定位

這是我的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？

來源

2017-03-15 Yvder

做到這一點你的意思是像在商店應用搜索的行爲方式？ – erotavlas

是@erotavlas，正好！ – Yvder

我認爲你應該嘗試一個Popup來代替，你可以將它放在按鈕的任何形狀中，作爲佈局的一部分，而不像彈出窗口那樣是一個工具提示或者像一個單獨的小窗口。 – Neme

將展位設置爲展開。

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

來源

2017-04-20 11:30:20

XAML UWP Flyout定位

回答

相關問題