UWP CommandBar SecondaryCommand 与 AppBarButton Flyout 冲突

Posted 2023-04-12

【中文标题】UWP CommandBar SecondaryCommand 与 AppBarButton Flyout 冲突

【英文标题】：UWP CommandBar SecondaryCommand collides with AppBarButton Flyout

【发布时间】：2020-01-11 07:13:05

【问题描述】：

我有一个AppBarButton，点击它会显示MenuFlyout。该按钮位于CommandBar。

但是，由于溢出折叠到MoreButton 后，AppBarButton 的Flyout 变得难以点击。这是因为MoreButton 创建了一个Flyout，第二次点击AppBarButton 隐藏了Flyout。

那么我该如何解决这个问题呢？

我希望将AppBarButton 转换为MenuFlyoutSubItem，但我不知道该怎么做。

关于溢出的另一个问题是，虽然我已经将MoreButton 的CornerRadius 的样式设置为20，但它确实仍然是一个矩形。怎么了？

<Button
    x:Name="MoreButton"
    Grid.Column="1"
    MinHeight="ThemeResource AppBarThemeCompactHeight"
    Padding="ThemeResource CommandBarMoreButtonMargin"
    VerticalAlignment="Top"
    Control.IsTemplateKeyTipTarget="True"
    CornerRadius="20"
    Foreground="TemplateBinding Foreground"
    IsAccessKeyScope="True"
    Style="StaticResource EllipsisButton"
    Visibility="Binding RelativeSource=RelativeSource TemplatedParent, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility">
    <FontIcon
        x:Name="EllipsisIcon"
        Height="ThemeResource AppBarExpandButtonCircleDiameter"
        VerticalAlignment="Center"
        FontFamily="ThemeResource SymbolThemeFontFamily"
        FontSize="20"
        Glyph="&#xE10C;" />
</Button>

【问题讨论】：

@NicoZhu-MSFT 我知道应该避免这种情况，所以我想有没有办法在折叠时将其转换为 MenuFlyoutSubItem？你对我的第二个问题有答案吗？

请复制默认样式并删除X:Key值

@NicoZhu-MSFT <Style TargetType="CommandBar"> 在哪里？这几乎是我的小修改的默认样式。

我的意思是，你需要自定义 CommandBar 样式。

@NicoZhu-MSFT 是的，我正在定制它。而且 MoreButton 的自定义不起作用。

【参考方案1】：

这是Flyout 轻度关闭行为，这是设计使然，更多信息请参阅document。根据您的要求，请避免将 MenuFlyout 放入 MoreButton 的弹出窗口中。我认为您可以将所有项目放在SecondaryCommands 中并使用AppBarSeparator 拆分为不同的区域。

<CommandBar Background="Transparent" IsOpen="False" DefaultLabelPosition="Right">
    <AppBarButton Icon="Add" Label="Add"/>
    <AppBarButton Icon="ReShare" Label="Share"/>
    <AppBarButton Icon="Edit" Label="Edit"/>
    <CommandBar.SecondaryCommands>
        <AppBarButton Icon="Setting" Label="Settings">
            <AppBarButton.KeyboardAccelerators>
                    <KeyboardAccelerator Modifiers="Control" Key="S" />
            </AppBarButton.KeyboardAccelerators>
        </AppBarButton>
        <AppBarButton Icon="Add" Label="Button 1">
            <AppBarButton.KeyboardAccelerators>
                    <KeyboardAccelerator Modifiers="Control" Key="N" />
            </AppBarButton.KeyboardAccelerators>
        </AppBarButton>
        <AppBarButton Icon="Delete" Label="Button 2">
            <AppBarButton.KeyboardAccelerators>
                    <KeyboardAccelerator Key="Delete" />
            </AppBarButton.KeyboardAccelerators>
        </AppBarButton>
        <AppBarSeparator />
        <AppBarButton Icon="FontDecrease" Label="Button 3">
            <AppBarButton.KeyboardAccelerators>
                    <KeyboardAccelerator Modifiers="Control" Key="Subtract" />
            </AppBarButton.KeyboardAccelerators>
        </AppBarButton>
        <AppBarButton Icon="FontIncrease" Label="Button 4">
            <AppBarButton.KeyboardAccelerators>
                    <KeyboardAccelerator Modifiers="Control" Key="Add" />
            </AppBarButton.KeyboardAccelerators>
        </AppBarButton>
    </CommandBar.SecondaryCommands>
</CommandBar>

关于溢出的另一个问题是，虽然我已经将 MoreButton 的 CornerRadius 设置为 20 的样式，但它确实仍然是一个矩形。怎么了

我使用了以下样式，CornerRadius 效果很好

<Style TargetType="CommandBar">
.....
<Button x:Name="MoreButton"
        Background="Red"
        CornerRadius="20"
Foreground="TemplateBinding Foreground"
Style="StaticResource EllipsisButtonRevealStyle"
Padding="ThemeResource CommandBarMoreButtonMargin"
MinHeight="ThemeResource AppBarThemeCompactHeight"
VerticalAlignment="Top"
Grid.Column="1"
Control.IsTemplateKeyTipTarget="True"
IsAccessKeyScope="True"
Visibility="Binding RelativeSource=RelativeSource TemplatedParent, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility">
    <FontIcon x:Name="EllipsisIcon"
        VerticalAlignment="Center"
        FontFamily="ThemeResource SymbolThemeFontFamily"
        FontSize="20"
        Glyph="&#xE10C;"
        Height="ThemeResource AppBarExpandButtonCircleDiameter" />
</Button>

.....

</Style>

更新

<Border Grid.Column="1" CornerRadius="20">
    <Button
        x:Name="MoreButton"
        MinHeight="ThemeResource AppBarThemeCompactHeight"
        Padding="ThemeResource CommandBarMoreButtonMargin"
        VerticalAlignment="Top"
        Control.IsTemplateKeyTipTarget="True"
        Foreground="TemplateBinding Foreground"
        IsAccessKeyScope="True"
        Style="StaticResource EllipsisButton"
        Visibility="Binding RelativeSource=RelativeSource TemplatedParent, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility"
        >
        <FontIcon
            x:Name="EllipsisIcon"
            Height="ThemeResource AppBarExpandButtonCircleDiameter"
            VerticalAlignment="Center"
            FontFamily="ThemeResource SymbolThemeFontFamily"
            FontSize="20"
            Glyph="&#xE10C;"
            />
    </Button>
</Border>

【讨论】：

比起CommandBar.SecondaryCommands，我更喜欢MenuFlyout。我在其中使用ToggleAppBarButton 时遇到了麻烦。

@SeakyLuose，我运行你的代码，我可以重现你的问题，它可能与按钮样式冲突，目前我们有一个解决方法，为更多按钮添加边框。更多内容请参考以上更新。

谢谢！还是第一个问题，是否可以在CommandBar中添加AppBarButton以外的控件？

CommandBar 内容的可用元素应实现ICommandBarElement 接口。您可以自定义继承 ICommandBarElement 的控件。