WinUI 2.7嵌套Secondary Commands的CommandBarFlyout高亮异常排查

我实现了一个包含嵌套Secondary Commands的CommandBarFlyout，代码如下：

<Grid Margin="0,50">
    <Grid.Resources>
        <muxc:CommandBarFlyout Placement="Bottom" x:Name="CommandBarFlyout">
            <AppBarButton ToolTipService.ToolTip="{Binding CommandBarButtonText}" Visibility="{Binding ToggleSimpleVisibility}">
                <FontIcon Style="{StaticResource FontIconAppBar}" />
            </AppBarButton>
            <AppBarButton ToolTipService.ToolTip="{Binding CommandBarButtonText}" Visibility="{Binding ToggleSimpleVisibility}">
                <FontIcon Style="{StaticResource FontIconAppBar}" />
            </AppBarButton>
            <AppBarButton ToolTipService.ToolTip="{Binding CommandBarButtonText}" Visibility="{Binding ToggleSimpleVisibility}">
                <FontIcon Style="{StaticResource FontIconAppBar}" />
            </AppBarButton>
            <AppBarButton ToolTipService.ToolTip="{Binding CommandBarButtonText}" Visibility="{Binding ToggleSimpleVisibility}">
                <FontIcon Style="{StaticResource FontIconAppBar}" />
            </AppBarButton>

            <AppBarToggleButton ToolTipService.ToolTip="{Binding CommandBarButtonText}" Visibility="{Binding ToggleVisibility}">
                <FontIcon Style="{StaticResource FontIconAppBar}"/>
            </AppBarToggleButton>
            <AppBarToggleButton ToolTipService.ToolTip="{Binding CommandBarButtonText}" Visibility="{Binding ToggleVisibility}">
                <FontIcon Style="{StaticResource FontIconAppBar}" />
            </AppBarToggleButton>
            <AppBarToggleButton ToolTipService.ToolTip="{Binding CommandBarButtonText}" Visibility="{Binding ToggleVisibility}">
                <FontIcon Style="{StaticResource FontIconAppBar}" />
            </AppBarToggleButton>
            <AppBarToggleButton ToolTipService.ToolTip="{Binding CommandBarButtonText}" Visibility="{Binding ToggleVisibility}">
                <FontIcon Style="{StaticResource FontIconAppBar}"/>
            </AppBarToggleButton>

            <muxc:CommandBarFlyout.SecondaryCommands>
                <AppBarButton x:Name="CascadingAppBarButton" Visibility="Collapsed" Label="{Binding CommandBarButtonText}">
                    <AppBarButton.Flyout>
                        <CommandBarFlyout Placement="Right">
                            <CommandBarFlyout.SecondaryCommands>
                                <AppBarToggleButton  Label="{Binding CommandBarToggleButtonText}" />
                                <AppBarToggleButton  Label="{Binding CommandBarToggleButtonText}" />
                                <AppBarToggleButton  Label="{Binding CommandBarToggleButtonText}" />
                                <AppBarToggleButton  Label="{Binding CommandBarToggleButtonText}" />
                            </CommandBarFlyout.SecondaryCommands>
                        </CommandBarFlyout>
                    </AppBarButton.Flyout>
                </AppBarButton>
                <AppBarButton  Label="{Binding CommandBarButtonText}" />
                <AppBarButton  Label="{Binding CommandBarButtonText}" />
                <AppBarSeparator />
                <AppBarToggleButton  Label="{Binding CommandBarToggleButtonText}" />
                <AppBarToggleButton  Label="{Binding CommandBarToggleButtonText}" />
            </muxc:CommandBarFlyout.SecondaryCommands>
        </muxc:CommandBarFlyout>
    </Grid.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button x:Name="CommandButton"
                Content="{Binding ButtonText}"
                Click="ButtonClick"
                ContextRequested="ButtonContextRequested" />
        </StackPanel>
        <StackPanel Grid.Column="1" HorizontalAlignment="Center">
            <CheckBox x:Name="ToggleCheckbox" Content="{Binding ToggleButtonCheckBoxTitle}" Checked="ToggleButton_Checked" Unchecked="ToggleButton_Unchecked" IsChecked="False" />
            <CheckBox Content="{Binding CascadingMenuCheckBoxTitle}" Checked="CascadingMenu_Checked" Unchecked="CascadingMenu_Unchecked" />
        </StackPanel>
    </Grid>
</Grid>
</StackPanel>
</Grid>

将该代码加入XAML Controls Gallery测试后，复现了项目中的异常：设计预期嵌套二级命令的按钮高亮状态应持续显示，但实际运行时高亮会在2秒后消失；而普通Primary Commands和Secondary Commands的高亮表现正常。请问此现象是WinUI 2.7的Bug，还是嵌套Secondary Commands的实现方式有误？

问题分析与结论 #

1. 实现方式合理性
   你采用的在SecondaryCommands的AppBarButton内部嵌套CommandBarFlyout的做法，并非WinUI官方推荐的级联菜单实现方式，但语法上无错误，属于可行的自定义嵌套场景。

2. 异常原因判定
   该高亮自动消失的现象属于WinUI 2.7版本的框架Bug：

   • 当CommandBarFlyout作为子Flyout嵌套在另一个CommandBarFlyout的二级命令按钮中时，父级按钮的视觉状态管理逻辑存在缺陷，导致按下/悬停后的高亮状态无法维持，会在2秒左右自动重置。
   • 普通Primary/Secondary Commands无此问题，说明基础视觉状态逻辑正常，仅嵌套场景触发了框架的异常处理。

3. 临时解决方案

   • 自定义AppBarButton的视觉状态模板，强制维持高亮状态直到用户交互结束；
   • 升级至WinUI 3版本，后续版本已修复此类Flyout嵌套场景下的视觉状态异常问题。

内容的提问来源于stack exchange，提问作者Blondie