UWP CommandBar SecondaryCommand 与 AppBarButton Flyout 冲突

Question

我有一个 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>

Answer 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>

Another problem about the overflow is that, although I have set the CornerRadius of the MoreButton to be 20 in its style, it is still a rectangle indeed. What is wrong

我使用了以下样式并且 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>

UWP CommandBar SecondaryCommand 与 AppBarButton Flyout 冲突

UWP CommandBar SecondaryCommand collides with AppBarButton Flyout

c#

xaml

win-universal-app

uwp