CommandBarFlyout (WinUi 2.7) Highlighting Misbehavior Using Secondary Commands

Question

I have a CommandBarFlyout implemented with Secondary Commands within Secondary Commands like so:

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

I tried testing this code adding specifically the secondary commands within the XAML Controls Gallery code, and reproduced the same behavior I observed in my implementation.

In design the expected behavior is the highlight should persist

In development the highlighting is lost after 2 seconds, and stays like this:

XAML Controls Gallery has the following example:

So the highlighting works as expected for Primary Commands and Secondary Commands, but incorrectly in the implementation above.

Question is: Is this really a bug or incorrect implementation due to nesting of Secondary Commands?

Answer 1

That's an interesting behavior. I could reproduce this behavior on my side using your code. Then I tried the code from the official document - Create a command bar flyout and added the CascadingAppBarButton from your code to the sample code. The result shows that the highlighting works as expected.

After comparing the code, I found a simple change might help to correct this behavior. You might need to set the Icon property of the AppBarButton.

Here is the code I use that works correctly. As you could see, I just set the Icon property for the last AppBarButton.

  <muxc:CommandBarFlyout.SecondaryCommands>
                <AppBarButton x:Name="CascadingAppBarButton" Visibility="Visible" 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}" Icon="Delete" />
            </muxc:CommandBarFlyout.SecondaryCommands>
        </muxc:CommandBarFlyout>

It's just a workaround for this behavior. If you want to dig further into this behavior. I'd suggest you open an issue and report this in the WinUI-GitHub