Предотвращение открытия всплывающих окон динамически

Question

Я использую AppBarButton и на основе одного условия хочу выполнить либо прямую команду на щелчке или отображать всплывающее окно AppBarButton для дополнительного ввода, но проблема заключается в том, что если всплывающее окно находится на кнопке панели приложения, оно всегда будет открыто, когда кнопка щелчки.

Есть ли способ, который я могу решить, где разрешить всплывающее окно или нет.

<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

Как правило, если управление происходит от кнопки класса, выпадающей в настоящее время показано автоматически:

выпадающая панель крепится к кнопке открывается автоматически, когда пользователь нажимает на кнопку. Вам не нужно обрабатывать какие-либо события, чтобы открыть всплывающее окно.

Это обычно происходит, если вы добавляете всплывающее окно в . Вылет. Если вы не будете не такое поведение, а затем прикрепить выпадающую на 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 - это свойство bool в viewmodel, чтобы решить, когда показывать всплывающее окно.