在CommandBar的SecondaryCommand上设置图标

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

          

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

在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

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

我们的想法是利用AppBarToggleButtonChecked状态。

创建另一个扩展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  { 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中调用此方法:

  

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

 new SecondaryIconButton( Glyph ) { Label = Label }; 

参考:
SecondaryIconButton.cs
SegoeMDL2.cs

完整代码有效

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

样品