Dynamically adding `AppBarButton` to `CommandBarFlyout`'s secondary command clips the background

[roxk]

Describe the bug

Dynamically adding items to secondary command of a CommandBarFlyout has rendering artifact.

Steps to reproduce the bug

1. Create a new UWP blank app
2. Add the follow context flyout to MainPage.xaml

<!-- Generated stack panel in the template -->
<StackPanel ...>
  <!--  Add this -->
  <StackPanel.ContextFlyout>
    <muxc:CommandBarFlyout x:Name="commandBarFlyout" Opened="commandBarFlyout_Opened">
        <muxc:CommandBarFlyout.SecondaryCommands>
            <AppBarButton Label="Short name"/>
            <AppBarButton Label="Medium length name"/>
            <!-- Uncomment to see static long name doesn't reproduce the issue -->
            <!-- <AppBarButton Label="Static loooooooooooooooooooooooong name"/> -->
        </muxc:CommandBarFlyout.SecondaryCommands>
    </muxc:CommandBarFlyout>
  </StackPanel.ContextFlyout>
  <!- Generated button in the template -->
  <Button .../>
</StackPanel>

3. Add the following to MainPage.cpp

void MainPage::commandBarFlyout_Opening(IInspectable const&, IInspectable const&)
{
    const auto defaultCount = 2;
    if (commandBarFlyout().SecondaryCommands().Size() > defaultCount)
    {
        commandBarFlyout().SecondaryCommands().RemoveAtEnd();
    }
    AppendCommand();
}

Windows::Foundation::IAsyncAction MainPage::AppendCommand()
{
    co_await 1s;
    co_await resume_foreground(Dispatcher());
    AppBarButton button;
    button.Label(L"Dynamic loooooooooooooooooooooooong name");
    commandBarFlyout().SecondaryCommands().Append(button);
}

4. Launch the app, right click the button to show command bar flyout
5. Observe the command bar flyout has normal background
6. After the dynamic app bar button is added, observe the menu background is clipped at the original width, revealing the content underneath in the extra width, whereas the border is extending to new width just fine

Expected behavior

The background isn't clipped at (6).

Screenshots

NuGet package version

Microsoft.UI.Xaml 2.7.0

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

Windows 11 (21H2): Build 22000

Additional context

Repro: https://github.com/roxk/CommandBarFlyoutClipping

[ojhad]

@RBrid does this look like a bug you've seen before?

[RBrid]

@ojhad, yes, as a matter of fact I am in the process of fixing this here: #6868

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.