WinUI3 - CommandBar - non consistent background style

[mklemarczyk]

Describe the bug

When using CommandBar on Windows 11 23H2. The style of background changes depending is "See more" button is pressed or not.
I created empty application and added only that control, the background is transparent if button "See more" is not clicked.
Style changes to different background and adds some border to it when button "See more is pressed".

I observed the same behavior in WinUI3 Gallery app. I should highlight that tests were performed in Hyper-V Virtual Machine with Windows, with animations disabled in Windows, and in Enhanced view of Virtual Machine.

I do not know if I should open that ticket in this repository or https://github.com/microsoft/WindowsAppSDK. It would be good that you provide more details in repository itself.

The same behavior I reproduced also on friend laptop to eliminate possibility of Hyper-V interference. So it does not matter if Windows is in VM or not. Problem occurs in both cases.

Steps to reproduce the bug

1. Open WinUI3 Gallery app from Windows Store.
2. Go to Menus & toolbars, than select CommandBar.
3. Click "See More" button and observe change in behavior of background.

Expected behavior

The background should be kept to the style that is when button is not pressed. Pressing See more button should only change state of this button and show the flyout with more commands.

Screenshots

See more not clicked:

See more clicked:

NuGet package version

• Microsoft.WindowsAppSDK - 1.7.241114004-experimental1

Windows version

Windows 11 (23H2): Build 22631

Additional context

My app is build for net9.0-windows10.0.22621.0
For WinUI3 app version 2.5.1.0.

Reopen from : #10242

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

• Bug title (#10205), similarity score: 0.84

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[mklemarczyk]

As I cant reopen my bug. I will post it again. I hope you can help more than close the ticket.

@karkarl your comment did not help as even copilot does not know what is "Fluent Windows Visual Library".
Quote : "This is by design. Please refer to the Fluent Windows Visual Library."

Any link to that ? I would say that your message is not helpful. Either you do not take care about WinUI 3 at all, or your documentation is far from being clear on the subject.

[mdtauk]

https://www.figma.com/community/file/1440832812269040007/windows-ui-kit
I think this is the thing being referenced. It is an example showing all the designs for components and common design patterns.

The control's default template has a transparent background until you open the overflow or show the labels.

[mklemarczyk]

Any idea how to customize it ? I do not have account at figma to verify internal documentation.
In my product the bar is required to keep color if that is open or not. I can set the color on the bar when overflow is closed, but it gets ignored when overflow is open.

Should I redefine entire style for that control to have consistent behavior ?

[mdtauk]

There should be a ThemeResource you can override...

<StaticResource x:Key="CommandBarBackground" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="CommandBarBackgroundOpen" ResourceKey="AcrylicInAppFillColorDefaultBrush" />
<StaticResource x:Key="CommandBarBorderBrushOpen" ResourceKey="CardStrokeColorDefaultSolidBrush" />
<Thickness x:Key="CommandBarBorderThicknessOpen">1</Thickness>

CommandBarBackgroundOpen

[mklemarczyk]

Thanks I will try it this week. How did you pull out those keys ?

[mdtauk]

Thanks I will try it this week. How did you pull out those keys ?

I looked at the CommonStyles.xaml ResourceDictionary that is in the Repo

[mklemarczyk]

Do you have any guide how it should be used with WinUI 3 properly, in sense that this effect does not look like a bug ?

[mklemarczyk]

I compared, it looks that this strange behavior comes long from WinUI2, it did not exist before.
I added some style and it looks nicer. It gets nice accent when menu is open.

Closed

Open

[WPdev210]

@mklemarczyk Look at the link to help you https://stackoverflow.com/questions/79442636/how-to-make-the-background-of-the-commandbar-transparent