C# 在CommandBar的第二个命令上设置图标

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

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

---

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

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

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

来源：

如果要尝试覆盖样式，请查看generic.xaml中的

OverflowPopup

控件和

CommandBarOverflowPresenter

样式，以开始使用

C:\Program Files（x86）\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\Generic.xaml

---

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

其思想是利用

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();
        }
    }
}

创建另一个扩展

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();
        }
    }
}

或者在代码隐藏中创建它：

new SecondaryIconButton( Glyph ) { Label = Label };

参考资料：

完成代码工作

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>

---

例如，如果打开Outlook Mail应用程序，如果单击命令栏上的“更多”按钮，它会在其中的每个元素上显示图标。这并不是因为“它在Windows（Phone）中”，它对我们开发人员来说是开箱即用的。这是许多客户向我们提出的错误。但正如我所提到的，您可以自己覆盖默认样式。