在 SecondaryCommands (UWP) 上显示图标

Question

我在 CommandBar 的 SecondaryCommand 中设置了图标，但没有显示。为什么？

<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>

Answer 1

由于默认的 AppBarButton 模板，它们未显示。您将需要对其进行修改。

只需按照以下步骤操作：

暂时将 AppBarButton 放入 CommandBar.PrimaryCommands 集合中。
右键单击设计器中的按钮，然后单击编辑模板 > 编辑副本...
在打开的对话框中输入样式名称，例如MyAppBarButtonStyle

将此样式设置为您的辅助按钮：

<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>

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

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

<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"/>

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

<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>

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

<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"/>

当然，您会希望根据自己的喜好进一步修改模板，但这至少可以让您继续。

Answer 2

Damir 的回答不知何故让我走上了正确的轨道，在这上面花了很多时间之后，我最终找到了一个简单的解决方案。

请注意，它可能不适合所有人，因为当您将鼠标悬停在按钮上时按钮不会突出显示，但这是我在 UWP 解决方案上找到的最接近和最简单的方法

首先在你的Styles.xaml或你的Page.Resources中定义一个ControlTemplate：

<ControlTemplate x:Key="SecondaryCommandTemplate" TargetType="AppBarButton">
    <Grid x:Name="Root" Background="{TemplateBinding Background}">
        <Grid x:Name="ContentRoot" HorizontalAlignment="Stretch" Margin="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <ContentPresenter Grid.Column="0" VerticalContentAlignment="Center" 
             VerticalAlignment="Stretch" x:Name="Content"
             AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Icon}" 
             Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" 
             Height="20" Margin="7,0,7,0"/>
            <TextBlock Grid.Column="1" VerticalAlignment="Center" x:Name="TextLabel" 
             Foreground="{TemplateBinding Foreground}" FontSize="12" 
             FontFamily="{TemplateBinding FontFamily}" TextAlignment="Left"
             TextWrapping="Wrap" Text="{TemplateBinding Label}"/>
        </Grid>
    </Grid>
</ControlTemplate>

然后简单地定义 Template 你的 SecondaryCommands:

<CommandBar.SecondaryCommands>
    <AppBarButton Label="Settings"
                  Icon="Setting" 
                  Command="{Binding CommandBarViewModel.SettingsCommand}"
                  Template="{StaticResource SecondaryCommandTemplate}"/>
    <AppBarButton Label="Admin"
                  Icon="Admin" 
                  Command="{Binding CommandBarViewModel.SettingsCommand}"
                  Template="{StaticResource SecondaryCommandTemplate}"/>
</CommandBar.SecondaryCommands>

就这么简单！我没有得到的是，在遵循 Damir 的建议并检查为按钮生成的 XAML 样式后，我最终删除了所有视觉状态，我注意到我的图标和文本都显示了！！为什么？？我不明白为什么 Microsoft 想要隐藏 SecondaryCommands 中的图标，老实说，我没有发现实际执行此操作的具体代码。删除所有 VisualStates 后，我注意到我只剩下一个模板，然后只是添加一个网格并使用 VerticalAlignment、HorizontalAlignment 和 'Margin'.

希望对您有所帮助！

Answer 3

嗯，它比这更容易，在你的项目中使用参考 microsoft.midiGmDls 就完成了。

Answer 4

这是一种更简单、更不优雅的方法。它之所以有效，是因为大多数 UWP 图标都是 Windows.

中包含的 Segoe MDL2 资产字体的字形

从 Microsoft 中查找您想要的符号的 Unicode 点 Segoe MDL2 资产向导（例如，蓝牙图标为 E702，共享图标为 E72D）。
使用 UnicodeMap 之类的东西在屏幕上显示该字母。不要担心它看起来像一个空白 square，它将在您的应用中运行。
如下所示将字符复制到您的 XAML 中，确保将 AppBarButton 的 FontFamily 设置为 Segoe MDL2 Assets。

<CommandBar.SecondaryCommands> <AppBarButton FontFamily="Segoe MDL2 Assets" Label=" Help"/> <AppBarButton FontFamily="Segoe MDL2 Assets" Label=" Update database"/> </CommandBar.SecondaryCommands>

这就是您将得到的。

我在本地化为俄语和中文的应用程序中使用此技术，没有任何问题。

在 SecondaryCommands (UWP) 上显示图标

Show icon on SecondaryCommands (UWP)

win-universal-app

windows-10-universal