Does anyone know how to make the background of the CommandBar transparent when its overflow is open?

I already tried adding the background directly and through code, but it doesn't change its style. <CommandBar Grid.Row="2" Background="Transparent"

This way, the background becomes transparent, but the rest of the styles get distorted.

If I place BasedOn="{StaticResource DefaultCommandBarStyle}" it stops working.

<Style x:Key="CustomCommandBarStyle" TargetType="CommandBar" BasedOn="{StaticResource DefaultCommandBarStyle}">
    <Setter Property="Background" Value="Transparent"/>
</Style>

It is an application in WinUI3.

I wish to obtain the following design.

Does anyone know how to make the background of the CommandBar transparent when its overflow is open?

I already tried adding the background directly and through code, but it doesn't change its style. <CommandBar Grid.Row="2" Background="Transparent"

This way, the background becomes transparent, but the rest of the styles get distorted.

If I place BasedOn="{StaticResource DefaultCommandBarStyle}" it stops working.

<Style x:Key="CustomCommandBarStyle" TargetType="CommandBar" BasedOn="{StaticResource DefaultCommandBarStyle}">
    <Setter Property="Background" Value="Transparent"/>
</Style>

It is an application in WinUI3.

I wish to obtain the following design.

• xaml
• winui-3
• winui
• commandbar

2 Answers 2

This won't bring the default settings of the default style:

<Style x:Key="CustomCommandBarStyle" TargetType="CommandBar">
    <Setter Property="Background" Value="Transparent"/>
</Style>

This brings the default style settings but doesn't work because the Background will be set by the default visual states:

<Style x:Key="CustomCommandBarStyle" TargetType="CommandBar" BasedOn="{StaticResource DefaultCommandBarStyle}">
    <Setter Property="Background" Value="Transparent"/>
</Style>

This works because is overriding the SolidColorBrush that will be used by the VisualState:

<Page.Resources>
    <SolidColorBrush x:Key="CommandBarBackgroundOpen"
        Color="Transparent" />
</Page.Resources>

You can learn more about this on the generic.xaml file.

Andrew's solution is a great way to make the background of the CommandBar transparent when its overflow is open. However, the rounded corners and borders of the CommandBar are still there.

If you want to remove the rounded corners and borders. I suggest you could try to modify the default Style in the generic.xaml file.

You could copy the DefaultCommandBarStyle resources from generic.xaml to your project.

Find the <VisualTransition From="CompactClosed" To="CompactOpenUp"……,

<VisualTransition From="CompactClosed" To="CompactOpenDown"……,

<VisualState x:Name="CompactOpenUp">,

<VisualState x:Name="CompactOpenDown">.

And then comment out the content related to Background, CornerRadius and Visibility separately.