防止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属性，用于决定何时显示弹出窗口。