UWP CommandBar with overflow ellipsis

Question

I have commandbar with few AppBar buttons . The appbar button has only icons and I was able to change commandbar background color to white and overlow ellipsis to black. But when i hover over the ellipsis button it changes to white and when clicked on the ellipsis , the whole commandbar button goes back to the old black color. How can i keep the same background white color of the commandbar , ellipsis foreground color of black always?

Sample code

 <Grid>  
        <Grid.RowDefinitions>  
             
            <RowDefinition Height="*"></RowDefinition>  
        </Grid.RowDefinitions>  
        <Grid.ColumnDefinitions>  
            <ColumnDefinition Width="*"></ColumnDefinition>  
              
        </Grid.ColumnDefinitions>  
        <CommandBar Grid.Row="0" Grid.Column="0" DefaultLabelPosition="Collapsed" HorizontalAlignment="Left"  IsOpen="True" Background="White"  Foreground="Black">  
            <AppBarButton Icon="Add" Label="Add" Foreground="Black" />  
            <AppBarButton Icon="Edit" Label="Edit" Foreground="Black"/>  
            <AppBarButton Icon="Share" Label="Share" Foreground="Black"/>  
            <AppBarButton Icon="Add" Label="Add" Foreground="Black"/>  
            <AppBarButton Icon="Edit" Label="Edit" Foreground="Black"/>  
            <AppBarButton Icon="Share" Label="Share" Foreground="Black"/>  
            <AppBarButton Icon="Add" Label="Add" Foreground="Black"/>  
            <AppBarButton Icon="Edit" Label="Edit" Foreground="Black"/>  
            <AppBarButton Icon="Share" Label="Share" Foreground="Black"/>  
        </CommandBar>  
  
         
    </Grid>  

Answer 1

Hi @DotNET Fan ,
Welcome to Microsoft Q&A!

You need to set the CommandBar Style with template resources. This text 265618-mainpagexmal.txt contains all xaml code.

1. Open Document Outline window, right-click your CommandBar, select Edit Tmplate, select Edit a copy. The template resources will be added in your page.xaml.
   
2. Ellipses remain black. In template resources, the ellipse's style is defined in <Style x:Key="EllipsisButtonRevealStyle" TargetType="Button">. Change the Foreground color to Black when the state of ellipse button is PointerOver and Pressed.

   <VisualState x:Name="PointerOver">  
     ...      
   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">  
       <DiscreteObjectKeyFrame KeyTime="0" Value="black"/>  
   </ObjectAnimationUsingKeyFrames>  
     ...  
    </VisualState>  
    <VisualState x:Name="Pressed">  
     ...  
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">  
           <DiscreteObjectKeyFrame KeyTime="0" Value="black"/>  
       </ObjectAnimationUsingKeyFrames>  
   ...  
   

   </VisualState> 3 CommandBar and Popup list remain white.
   In template resources, the style of popup list is defined in <Popup x:Name="OverflowPopup">
   Add Background="{TemplateBinding Background}" in CommandBarOverflowPresenter. Make the background color of the popup consistent with the background color set by the commandbar. <CommandBarOverflowPresenter Background="{TemplateBinding Background}" x:Name="SecondaryItemsControl" IsTabStop="False" Style="{TemplateBinding CommandBarOverflowPresenterStyle}">

4 Use the new style and set the background to white.

 <CommandBar Style="{StaticResource CommandBarStyle1}"  Background="White" ...>  

The result looks like this

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Thanks @Junjie Zhu - MSFT . The solution looks good.