microsoft-ui-xaml icon indicating copy to clipboard operation
microsoft-ui-xaml copied to clipboard

AppBarToggleButtons in CommandBarFlyouts do not have rounded edges when set as primary commands

Open eduardobragaxz opened this issue 2 years ago • 1 comments

Describe the bug

When you set AppBarToggleButtons as PrimaryCommands in a CommandBarFlyout they don't have rounded edges.

Steps to reproduce the bug

  1. Create a WinUI 3 app;
  2. Add a button and set a CommandBarFlyout as its ContextFlyout;
  3. Add AppBarToggleButtons as PrimaryCommands in the flyout;
  4. Run the app, open the flyout and hover the buttons with the mouse.

Expected behavior

Rounded edges for all primary commands buttons and toggle buttons, like in a CommandBar.

Screenshots

AppBarButton highlight Last one, cropped

NuGet package version

WinUI 3 - Windows App SDK 1.2.3: 1.2.230118.102

Windows version

Windows 11 (22H2): Build 22621

Additional context

Also happens on 1.3 experimental.

eduardobragaxz avatar Feb 26 '23 01:02 eduardobragaxz

It should be sufficient to add this line (<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />) in these two spots:

https://github.com/microsoft/microsoft-ui-xaml/blob/d37afef65a0fc3219ba6b349301d685099fb129d/src/controls/dev/CommandBarFlyout/CommandBarFlyout_themeresources.xaml#L310-L312

https://github.com/microsoft/microsoft-ui-xaml/blob/d37afef65a0fc3219ba6b349301d685099fb129d/src/controls/dev/CommandBarFlyout/CommandBarFlyout_themeresources.xaml#L523-L525

@DmitriyKomin this appears like a trivial fix - would it be possible to include this in the next WinUI update?

tipa avatar May 26 '25 10:05 tipa