Question

我正在使用AppBarButton并根据一个条件我要在AppBarButton上执行直接命令点击或显示弹出窗口以获得额外输入，问题是如果在appbar按钮中有flyout，它会在按钮点击时始终打开。

我有什么方法可以决定允许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 附加flyout或将其添加到资源中：

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

防止动态打开弹出窗口

2 个答案: