在 CommandBar 的 SecondaryCommand 上设置图标

Question

我有一个命令栏宽度的辅助命令：

<CommandBar>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

    <CommandBar.SecondaryCommands>
        <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
    </CommandBar.SecondaryCommands>
</CommandBar>

为什么不显示喜欢和不喜欢的图标？

Answer 1

在 Windows 8.1 中，主要和次要命令是一种将按钮放在左侧和右侧的方法。在 Windows 10 UWP 中，辅助命令移动到桌面和手机上的弹出菜单。默认情况下，此弹出菜单中不显示图标。

SecondaryCommands 集合只能包含 AppBarButton、AppBarToggleButton 或 AppBarSeparator 命令元素。当 CommandBar 打开时，辅助命令会显示在溢出菜单中。

来源：MSDN。

如果您想尝试覆盖样式，请查看 generic.xaml 中的 OverflowPopup 控件和 CommandBarOverflowPresenter 样式以帮助您开始。

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml

Answer 2

我想出了另一种方法。希望这会有所帮助。

这个想法是利用AppBarToggleButton 的Checked 状态。

创建另一个扩展 AppBarToggleButton 的类。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace <YOUR_NAMESPACE>
{
    sealed class SecondaryIconButton : AppBarToggleButton
    {
        public static readonly DependencyProperty GlyphProperty = DependencyProperty.Register(
            "Glyph", typeof( string ), typeof( SecondaryIconButton )
            , new PropertyMetadata( SegoeMDL2.Accept, OnGlyphChanged ) );

        public string Glyph
        {
            get { return ( string ) GetValue( GlyphProperty ); }
            set { SetValue( GlyphProperty, value ); }
        }

        private TextBlock GlyphText;

        public SecondaryIconButton( string Glyph )
            :base()
        {
            IsChecked = true;
            this.Glyph = Glyph;
        }

        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            GlyphText = ( TextBlock ) GetTemplateChild( "OverflowCheckGlyph" );
            GlyphText.Width = GlyphText.Height = 16;

            UpdateGlyph();
        }

        // Force the button to always be checked
        protected override void OnPointerReleased( PointerRoutedEventArgs e )
        {
            base.OnPointerReleased( e );
            IsChecked = true;
        }

        private void UpdateGlyph()
        {
            if ( GlyphText == null ) return;
            GlyphText.Text = Glyph;
        }

        private static void OnGlyphChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
        {
            ( ( SecondaryIconButton ) d ).UpdateGlyph();
        }
    }
}

请注意，SegeoMDL2.Accept 也是一个自定义类，派生自：
https://msdn.microsoft.com/windows/uwp/style/segoe-ui-symbol-font

现在您可以在您的 xaml 中调用它：

<ns:SecondaryIconButton Glyph="&#xE73E;" />

或者在后面的代码中创建它：

new SecondaryIconButton( Glyph ) { Label = Label };

参考：
SecondaryIconButton.cs
SegoeMDL2.cs

Answer 3

完整的代码作品

public sealed class SecondaryIconButton : AppBarToggleButton
{
    public SecondaryIconButton()
    {
        this.Loaded += SecondaryIconButton_Loaded;
    }

    private void SecondaryIconButton_Loaded(object sender, RoutedEventArgs e)
    {
        UpdateGlyph();
        IsChecked = true;
    }

    public static readonly DependencyProperty GlyphProperty = DependencyProperty.Register(
        "Glyph", typeof(string), typeof(SecondaryIconButton)
        , new PropertyMetadata("\uE706", OnGlyphChanged));

    public string Glyph
    {
        get { return (string)GetValue(GlyphProperty); }
        set { SetValue(GlyphProperty, value); }
    }

    private TextBlock GlyphText;

    public SecondaryIconButton(string Glyph)
        : base()
    {
        IsChecked = true;
        this.Glyph = Glyph;
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        GlyphText = (TextBlock)GetTemplateChild("OverflowCheckGlyph");
        GlyphText.Width = GlyphText.Height = 16;

        UpdateGlyph();
    }

    // Force the button to always be checked
    protected override void OnPointerReleased(PointerRoutedEventArgs e)
    {
        base.OnPointerReleased(e);
        IsChecked = true;
    }

    private void UpdateGlyph()
    {
        if (GlyphText == null) return;
        GlyphText.Text = Glyph;
    }

    private static void OnGlyphChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((SecondaryIconButton)d).UpdateGlyph();
    }
}

样本

 <CommandBar x:Name="commandbar" RequestedTheme="Dark">
                <CommandBar.SecondaryCommands>
                    <controlEx:SecondaryIconButton Glyph="&#xE109;" RequestedTheme="Dark" 
                                                   Foreground="{StaticResource NavigationPaneText}" 
                                      x:Name="createButton" 
                                      x:Uid="CreateNewItemLabel"></controlEx:SecondaryIconButton>
                    <controlEx:SecondaryIconButton Glyph="&#xE174;" RequestedTheme="Dark" 
                                                   Foreground="{StaticResource NavigationPaneText}" 
                                      x:Name="importExportButton" 
                                      x:Uid="ImportExportLabel" ></controlEx:SecondaryIconButton>
                </CommandBar.SecondaryCommands>
                <CommandBar.PrimaryCommands>

                </CommandBar.PrimaryCommands>
            </CommandBar>