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集合。
右键单击设计器中的按钮，然后单击编辑模板＆gt;编辑副本...
在打开的对话框中输入您的样式名称，例如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

达米尔的答案不知何故让我走上正轨，在花了一大笔时间后，我终于找到了一个简单的解决方案。

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

首先在ControlTemplate或Styles.xaml中定义Page.Resources：

<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和＆＃39; Margin＆＃39;

希望这有帮助！

Answer 3

这是一种更简单，更不优雅的方式。它的工作原理是因为大多数UWP图标都是Windows中包含的Segoe MDL2资产字体的字形。

从Microsoft's Segoe MDL2 Assets Guide中查找所需符号的Unicode点（例如，E702表示蓝牙图标，E72D表示共享图标）。
使用UnicodeMap之类的内容在屏幕上显示那封信。不要担心它看起来像一片空白方块，它将在你的应用程序中工作。
将字符复制到XAML中，如下所示，确保将AppBarButton的FontFamily设置为Segoe MDL2资产。

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

这就是你得到的。

What this looks like when implemented

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

Answer 4

它比这更容易，在您的proyect中使用参考microsoft.midiGmDls并完成它。

在SecondaryCommands（UWP）上显示图标

4 个答案: