CODEWITHSUNDEEP
xamlwinui-3winuicommandbar
WilsonPT
WilsonPT

Reputation: 113

How to make the background of the CommandBar transparent?

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

CommandBar

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

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.

TransparentCommandBar

Upvotes: 1

Views: 79

Answers (2)

Jeaninez - MSFT
Jeaninez - MSFT

Reputation: 4040

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.

enter image description here

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.

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Upvotes: 1

Andrew KeepCoding
Andrew KeepCoding

Reputation: 13666

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.

Upvotes: 1

Related Questions