防止 Flyout 动态打开

Question

我正在使用 AppBarButton，并且基于一个条件，我想在 AppBarButton 单击时执行直接命令或显示浮出控件以进行额外输入，问题是如果浮出控件在 appbar 按钮中，则在单击按钮时它总是会打开。

我有什么方法可以决定在哪里打开 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

通常，如果控件派生自 Button 类，则会自动显示浮出控件：

当用户单击按钮时，附加到按钮的弹出按钮会自动打开。您无需处理任何事件即可打开弹出窗口。

如果您将弹出窗口添加到 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 属性，用于决定何时显示弹出窗口。