在 SecondaryCommands (UWP) 上显示图标 [英] Show icon on SecondaryCommands (UWP)

问题描述

我在 CommandBar 的 SecondaryCommand 中设置了图标，但未显示.为什么?

I set the icons in my SecondaryCommand of CommandBar but aren't shown. Why?

<CommandBar RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" Margin="0">
  <CommandBar.SecondaryCommands>
    <AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Click="shareButton_Click" Icon="ReShare" />
    <AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti" Click="contactButton_Click" />
  </CommandBar.SecondaryCommands>
</CommandBar>

推荐答案

由于默认的 AppBarButton 模板，它们未显示.您需要修改它.

They are not shown because of the default AppBarButton template. You will need to modify it.

只需按照以下步骤操作:

Just follow these steps:

1. 在 CommandBar.PrimaryCommands 集合中临时放置一个 AppBarButton.
2. 右键单击设计器中的按钮，然后单击编辑模板 > 编辑副本...
3. 在打开的对话框中输入您的风格名称，例如MyAppBarButtonStyle

4. 将此样式设置为辅助按钮:

1. Temporarily put an AppBarButton in the CommandBar.PrimaryCommands collection.
2. Right click the button in the designer and click on Edit Template > Edit a Copy...
3. In the dialog that opens enter a name for your style, e.g. MyAppBarButtonStyle

4. Set this style to your secondary buttons:

<CommandBar.SecondaryCommands>
    <AppBarButton Name="shareButton" Label="Condividi" x:Uid="condividi" Icon="ReShare" Style="{StaticResource MyAppBarButtonStyle}" />
    <AppBarButton Name="contactButton" Icon="Contact" x:Uid="contatti" Label="Contatti" Style="{StaticResource MyAppBarButtonStyle}" />
</CommandBar.SecondaryCommands>

根据自己的喜好修改样式.

Modify the style to your liking.

默认情况下，溢出菜单中使用以下元素:

By default the following elemnt is used in the overflow menu:

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

你可能想用类似的东西替换它:

You might want to replace it with something like that:

<StackPanel x:Name="OverflowContentRoot" Orientation="Horizontal" Visibility="Collapsed" MinHeight="{ThemeResource AppBarThemeCompactHeight}">
    <ContentPresenter x:Name="OverflowContent" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" Height="20" Margin="0,14,0,4"/>
    <TextBlock x:Name="OverflowTextLabel" Foreground="{TemplateBinding Foreground}" FontSize="15" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="Stretch" Margin="12,0,12,0" Padding="0,5,0,7" TextAlignment="Left" TextWrapping="NoWrap" Text="{TemplateBinding Label}" TextTrimming="Clip" VerticalAlignment="Center"/>
</StackPanel>

您还需要修改溢出视觉状态以显示您的新模板:

You will also need to modify the overflow visual state to display your new template:

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

并增加按钮宽度:

<Setter Property="Width" Value="150"/>

当然，您需要根据自己的喜好进一步修改模板，但这至少应该能让您继续前进.

Of course, you'll want to further modify the template to your liking, but this should at least get you going.

这篇关于在 SecondaryCommands (UWP) 上显示图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！