Search code examples
xamlwinui-3winuicommandbar

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


Solution

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