防止Flyout動態打開

Question

我使用的是AppBarButton，並且基於一個條件我想要對AppBarButton執行直接命令單擊或顯示彈出窗口以獲取更多輸入，問題是如果在應用欄按鈕中有彈出窗口，它將始終打開按鈕點擊。

有什麼方法可以決定允許Flyout打開的位置嗎？

<AppBarButton x:Uid="Accept" Label="Accept" 
         ToolTipService.ToolTip="{Binding Label, RelativeSource={RelativeSource Mode=Self}}" 
         Icon="Accept" 
         Command="{Binding AcceptAppBarCommand}" 
         behaviors:AppBarButtonBehavior.AllowFocusOnInteraction="True"> 
      <AppBarButton.Flyout> 
       <Flyout Placement="Bottom" > 
        <StackPanel Width="200"> 
         <PasswordBox Header="Enter password:" 
            Password="{Binding Path=Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> 
         <Button Margin="0 5 0 0" Content="Accept" 
           Command="{Binding AcceptCommand}"> 
         </Button> 
        </StackPanel> 
       </Flyout> 
      </AppBarButton.Flyout> 
     </AppBarButton> 

Answer 1

一般來說，如果控制從按鈕類派生，彈出按鈕被自動地顯示：

附加到按鈕A彈出，當用戶點擊該按鈕會自動打開。您無需處理任何事件即可打開彈出窗口。

這通常會發生如果您將彈出窗口添加到Flyout屬性。如果你不也不會這樣的行爲，然後通過附加彈出FlyoutBase或將其添加到資源：需要時

<AppBarButton x:Uid="Accept" Label="Accept" 
       ToolTipService.ToolTip="{Binding Label, RelativeSource={RelativeSource Mode=Self}}" 
       Icon="Accept" 
       Command="{Binding AcceptAppBarCommand}" 
       Click="AppBarButton_Click"> <!-- for sample --> 
    <FlyoutBase.AttachedFlyout> 
     <Flyout Placement="Bottom" x:Key="myFlyout" > 
      <StackPanel Width="200"> 
       <PasswordBox Header="Enter password:" 
          Password="{Binding Path=Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> 
       <Button Margin="0 5 0 0" Content="Accept" 
         Command="{Binding AcceptCommand}"> 
       </Button> 
      </StackPanel> 
     </Flyout> 
    </FlyoutBase.AttachedFlyout> 
</AppBarButton> 

，並顯示：

private void AppBarButton_Click(object sender, RoutedEventArgs e) 
{ 
    // in command, click or anywhere else (in that change move to suitable resources) 
    FlyoutBase.ShowAttachedFlyout(sender as FrameworkElement); 
} 

如果您正在尋找更多的信息建立一個幫助類/方法，使其更適合MVVM看看at Macrominevra blog post,Depechie's post和Shawn Kendrot's。

Answer 2

我發現了一種解決方法，通過風格。

創建資源款式

<Page.Resources> 

    <Style TargetType="FlyoutPresenter" x:Key="_hiddenFlyoutStyle"> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="BorderBrush" Value="Transparent" /> 
     <Setter Property="BorderThickness" Value="0" /> 
     <Setter Property="Padding" Value="0" /> 
    </Style> 

    <Style TargetType="Border" x:Key="_flyoutBorderStyle"> 
     <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"/> 
     <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}"/> 
     <Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}"/> 
     <Setter Property="Padding" Value="{ThemeResource FlyoutContentThemePadding}"/> 
     <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}"/> 
     <Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}"/> 
     <Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}"/> 
     <Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}"/> 
     <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
    </Style> 
</Page.Resources> 

應用樣式彈出和邊界。

<AppBarButton x:Uid="Accept" Label="Accept" 
         ToolTipService.ToolTip="{Binding Label, RelativeSource={RelativeSource Mode=Self}}" 
         Icon="Accept" 
         Command="{Binding AcceptAppBarCommand}" 
         behaviors:AppBarButtonBehavior.AllowFocusOnInteraction="True"> 
      <AppBarButton.Flyout> 
       <Flyout Placement="Bottom" FlyoutPresenterStyle="{StaticResource _hiddenFlyoutStyle}"> 
        <Border Visibility="{Binding DisplayFlyout, Converter={StaticResource BooleanToVisibilityConverter}}" 
          Style="{StaticResource _flyoutBorderStyle}"> 
         <StackPanel Width="200"> 
          <PasswordBox Header="Enter password:" 
            Password="{Binding Path=Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> 
          <Button Margin="0 5 0 0" Content="Accept" 
           Command="{Binding AcceptCommand}"> 
          </Button> 
         </StackPanel> 
        </Border> 
       </Flyout> 
      </AppBarButton.Flyout> 
     </AppBarButton> 

DisplayFlyout是viewmodel中的一個bool屬性，用於決定何時顯示彈出窗口。