在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
我想出了另一种方法。 希望这可以帮助。
我们的想法是利用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 { 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(); } }
样品