I am trying to build a CommandBar that looks like this:
Desired CommandBar with SecondaryCommands that have icons
But I can't find a way to edit the default style of CommandOverflowPresenter in order to show SecondaryCommands like they are shown in Mail Windows 10 universal app, with icons on the left and text labels on the right.
The CommandOverflowPresenter doesn't have a Content property to build a control template around it and bind content elements to AppBarButton Icon and Label properties.
I found this article, but it doesn't show the Style for the AppBarButton.
There was another question on Stack Overflow, and the conclusion is to build a custom CommandOverflowPresenter style. How do you do that?
Default CommandOverflowPresenter style:
<!-- Default style for Windows.UI.Xaml.Controls.CommandBarOverflowPresenter -->
<Style TargetType="CommandBarOverflowPresenter">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
<Setter Property="MaxWidth" Value="{ThemeResource CommandBarOverflowMaxWidth}"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CommandBarOverflowPresenter">
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DisplayModeStates">
<VisualState x:Name="DisplayModeDefault" />
<VisualState x:Name="FullWidthOpenDown" >
<VisualState.Setters>
<Setter Target="LayoutRoot.BorderThickness" Value="0,0,0,1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="FullWidthOpenUp" >
<VisualState.Setters>
<Setter Target="LayoutRoot.BorderThickness" Value="0,1,0,0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter x:Name="ItemsPresenter" Margin="0,7,0,7"/>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is what I tried.
CommandOverflowPresenter is an ItemsControl and I added a Setter for its ItemTemplate in CommandOverflowPresenter style, and let the Content template as it was in the default style.
When running, the secondary commands are displayed according to the default style, only text labels are displayed, but not the icons.
Perhaps the bindings are not set up properly in the ItemTemplate's DataTemplate?
<CommandBar.CommandBarOverflowPresenterStyle>
<Style TargetType="CommandBarOverflowPresenter">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CommandBarOverflowPresenter">
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,1" >
<!--<Grid.Resources>
<DataTemplate x:Key="SecondaryMenu">
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="{TemplateBinding AppBarButton.Icon}"/>
<TextBlock Text="{TemplateBinding AppBarButton.Label}" />
</StackPanel>
</DataTemplate>
</Grid.Resources>-->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DisplayModeStates">
<VisualState x:Name="DisplayModeDefault" />
<VisualState x:Name="FullWidthOpenDown" >
<VisualState.Setters>
<Setter Target="LayoutRoot.BorderThickness" Value="0,0,0,1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="FullWidthOpenUp" >
<VisualState.Setters>
<Setter Target="LayoutRoot.BorderThickness" Value="0,1,0,0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter x:Name="ItemsPresenter" Margin="0,7,0,7">
</ItemsPresenter>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate x:DataType="AppBarButton">
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="{Binding Icon}" />
<TextBlock Text="{Binding Label}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</CommandBar.CommandBarOverflowPresenterStyle>
I also tried to add a StackPanel inside the AppBarButton tags with a SymbolIcon and a Textblock, but that didn't work either.
