An improper shadow appears at the bottom of the CommandBarOverflowPresenter.

[Tamilarasan-Paranthaman]

Describe the bug

• An improper shadow appearance occurs at the bottom of the CommandBarOverflowPresenter when applying a background to the CommandBar.

<StackPanel Orientation="Vertical">
    <CommandBar DefaultLabelPosition="Right">
        <CommandBar.Style>
            <Style TargetType="CommandBar">
                <Setter Property="Background"
                    Value="YellowGreen" />
            </Style>
        </CommandBar.Style>
        <AppBarToggleButton Icon="Edit" FontSize="30" Label="Edit"/>
        <AppBarToggleButton Icon="Share" Label="Share"/>
        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
            <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
    <Border>
        <TextBlock Text="Notes Page"/>
    </Border>
</StackPanel>

Steps to reproduce the bug

1. Run the sample with above code snippet.
2. Open the CommandBarOverflowPresenter.

Expected behavior

No response

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.5.5: 1.5.240627000

Windows version

Windows 11 (22H2): Build 22621

Additional context

No response

[kmgallahan]

<Style TargetType="CommandBar"> replaces the entire CommandBar style with what you declare, which will cause problems like this.

<Style BasedOn="{StaticResource DefaultCommandBarStyle}" TargetType="CommandBar"> starts with the default and adds the changes you want to make.

[ranjeshj]

@Tamilarasan-Paranthaman does @kmgallahan's suggestion make this issue go away ?

[michaelrinderle]

We are having the same issue with .NET Maui for Windows by default when adding the toolbar to the TopBar, Issues: 18258 & 19166

I tried adding this to a vanilla Maui project in the it's Windows App.Xaml file with no luck. <Style BasedOn="{StaticResource DefaultCommandBarStyle}" TargetType="CommandBar">

Since it's coming up on a year soon without help or response from the MS Maui devs, do you guys have any insight on how to fix?

[OliveInto]

https://github.com/microsoft/microsoft-ui-xaml/blob/6b6cff9ac058bb290a664cd6cc1e6355d4be1aca/src/controls/dev/CommonStyles/CommandBar_themeresources.xaml#L883

From Maui user, I guess the problem is in this file. we need to set the height of "WindowedPopupPadding" not simply by binding, which adds unnecessary blank in the situation that there is already enough space.

[Tamilarasan-Paranthaman]

Hi @ranjeshj, sorry for the late reply. I checked the suggestion, and it’s working as expected (the shadow is no longer showing). However, the CommandBar background color disappears when the overflow menu is opened. Also, the foreground color applied to the overflow icon is only applied during the initial load and is lost after hovering or opening the menu. Did I miss something or do something wrong?

 <CommandBar.Style>
    
     <Style BasedOn="{StaticResource DefaultCommandBarStyle}" TargetType="CommandBar">
         <Setter Property="Foreground" Value="Red"/>
         <Setter Property="Background" Value="YellowGreen" />
     </Style>
 </CommandBar.Style>
 <CommandBar.CommandBarOverflowPresenterStyle>
     
     <Style BasedOn="{StaticResource DefaultCommandBarOverflowPresenterStyle}"  TargetType="CommandBarOverflowPresenter">
         <Setter Property="Background" Value="Yellow"/>
     </Style>
 </CommandBar.CommandBarOverflowPresenterStyle>

https://github.com/user-attachments/assets/cb8deb44-497a-4354-b3f8-6639de55bcae

[kmgallahan]

Per the default style:

    <Style x:Key="DefaultCommandBarStyle" TargetType="CommandBar">
        <Setter Property="Background" Value="{ThemeResource CommandBarBackground}" />
        <Setter Property="Foreground" Value="{ThemeResource CommandBarForeground}" />

    <Style x:Key="DefaultCommandBarOverflowPresenterStyle" TargetType="CommandBarOverflowPresenter">
        <Setter Property="Background" Value="{ThemeResource CommandBarOverflowPresenterBackground}" />
        <Setter Property="BorderBrush" Value="{ThemeResource CommandBarOverflowPresenterBorderBrush}" />

So just set the ThemeResources.