如何将图标添加到命令栏中的 SecondaryCommands

Question

我正在尝试构建一个如下所示的 CommandBar：

需要带有图标的 SecondaryCommands 的 CommandBar

但我找不到一种方法来编辑 CommandOverflowPresenter 的默认样式，以便像在 Mail 中显示的那样显示 SecondaryCommands Windows 10 通用应用程序，左边有图标，文本标签在右边对了。

CommandOverflowPresenter 没有内容属性无法围绕它构建控件模板并将内容元素绑定到 AppBarButton 图标和标签属性。

我找到了这个 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，但这也没有用。

Answer 1

我们可以编辑AppBarButton的默认样式和模板来实现。而且我认为没有必要构建自定义 CommandOverflowPresenter 样式。

微软已经为默认模板提供了XAML代码，我们可以在AppBarButton styles and templates找到。我们可以将这个样式复制到 Page.Resources 并给这个样式一个键，比如 x:Key="MyAppBarButtonStyle".

默认情况下，图标和文本在 "ContentRoot" StackPanel 中垂直放置。我们可以像下面这样改成水平放置。

<StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}" Orientation="Horizontal">
    <ContentPresenter x:Name="Content"
                      Margin="12,0,0,0"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Center"
                      AutomationProperties.AccessibilityView="Raw"
                      Content="{TemplateBinding Icon}"
                      Foreground="{TemplateBinding Foreground}" />
    <TextBlock x:Name="TextLabel"
               Margin="12,0,12,0"
               VerticalAlignment="Center"
               FontFamily="{TemplateBinding FontFamily}"
               FontSize="15"
               Foreground="{TemplateBinding Foreground}"
               Text="{TemplateBinding Label}"
               TextAlignment="Center"
               TextWrapping="Wrap" />
</StackPanel>

在此之后，我们需要像您提到的文章那样更改"Overflow" VisualState，以确保该图标可以显示在二级菜单中。

<VisualState x:Name="Overflow">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

除此之外，我们可能还需要像下面这样改变AppBarButton的HorizontalAlignment和Width属性，这样StackPanel就可以占满CommandOverflowPresenter 的宽度。

<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Width" Value="Auto" />

终于可以在SecondaryCommands中使用这个样式了。

<CommandBar.SecondaryCommands>
    <AppBarButton Style="{StaticResource MyAppBarButtonStyle}"
                  Click="AppBarButton_Click"
                  Icon="Like"
                  Label="Like" />
    <AppBarButton Style="{StaticResource MyAppBarButtonStyle}"
                  Click="AppBarButton_Click"
                  Icon="Dislike"
                  Label="Dislike" />
</CommandBar.SecondaryCommands>

完整风格可能喜欢：

<Style x:Key="MyAppBarButtonStyle" TargetType="AppBarButton">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="Width" Value="Auto" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton">
                <Grid x:Name="Root"
                      MinWidth="{TemplateBinding MinWidth}"
                      MaxWidth="{TemplateBinding MaxWidth}"
                      Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ApplicationViewStates">
                            <VisualState x:Name="FullSize" />
                            <VisualState x:Name="Compact">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Overflow">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OverflowWithToggleButtons">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Margin">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="38,0,12,0" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowTextLabel" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="InputModeStates">
                            <VisualState x:Name="InputModeDefault" />
                            <VisualState x:Name="TouchInputMode">
                                <VisualState.Setters>
                                    <Setter Target="OverflowTextLabel.Padding" Value="0,11,0,13" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <StackPanel x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeCompactHeight}" Orientation="Horizontal">
                        <ContentPresenter x:Name="Content"
                                          Margin="12,0,0,0"
                                          HorizontalAlignment="Stretch"
                                          VerticalAlignment="Center"
                                          AutomationProperties.AccessibilityView="Raw"
                                          Content="{TemplateBinding Icon}"
                                          Foreground="{TemplateBinding Foreground}" />
                        <TextBlock x:Name="TextLabel"
                                   Margin="12,0,12,0"
                                   VerticalAlignment="Center"
                                   FontFamily="{TemplateBinding FontFamily}"
                                   FontSize="15"
                                   Foreground="{TemplateBinding Foreground}"
                                   Text="{TemplateBinding Label}"
                                   TextAlignment="Center"
                                   TextWrapping="Wrap" />
                    </StackPanel>

                    <TextBlock x:Name="OverflowTextLabel"
                               Margin="12,0,12,0"
                               HorizontalAlignment="Stretch"
                               VerticalAlignment="Center"
                               FontFamily="{TemplateBinding FontFamily}"
                               FontSize="15"
                               Foreground="{TemplateBinding Foreground}"
                               Padding="0,5,0,7"
                               Text="{TemplateBinding Label}"
                               TextAlignment="Left"
                               TextTrimming="Clip"
                               TextWrapping="NoWrap"
                               Visibility="Collapsed" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如何将图标添加到命令栏中的 SecondaryCommands

How to add icons to SecondaryCommands in Command Bar

xaml

windows-10

uwp

uwp-xaml