【发布时间】：2016-07-09 17:06:46
【问题描述】：
我正在尝试构建一个如下所示的 CommandBar：
具有具有图标的 SecondaryCommands 的所需 CommandBar
但我找不到一种方法来编辑 CommandOverflowPresenter 的默认样式，以便像在 Mail Windows 10 通用应用程序中一样显示 SecondaryCommands，左侧是图标，右侧是文本标签。
CommandOverflowPresenter 没有 Content 属性来围绕它构建控件模板并将内容元素绑定到 AppBarButton Icon 和 Label 属性。
我找到了这个article，但它没有显示 AppBarButton 的样式。
还有一个关于Stack Overflow的问题，结论是构建一个自定义的CommandOverflowPresenter样式。你是怎么做到的？
默认 CommandOverflowPresenter 样式：
<!-- 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>
这是我尝试过的。
CommandOverflowPresenter 是一个 ItemsControl，我在 CommandOverflowPresenter 样式中为其 ItemTemplate 添加了一个 Setter，并让 Content 模板保持默认样式。
运行时，二级命令按照默认样式显示，只显示文本标签，不显示图标。
也许在 ItemTemplate 的 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>
我还尝试使用 SymbolIcon 和 Textblock 在 AppBarButton 标记内添加 StackPanel，但这也不起作用。
【问题讨论】：
标签： xaml windows-10 uwp uwp-xaml