[英]Set Icon on SecondaryCommand of CommandBar
I have a command bar width secondary commands: 我有一个命令栏宽度辅助命令:
<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>
Why the Like and Dislike icons are not shown? 为什么喜欢和不喜欢的图标没有显示?
In Windows 8.1 primary and secondary commands were a way to put the buttons on the left and the right. 在Windows 8.1中,主要和辅助命令是一种将按钮放在左侧和右侧的方法。 In Windows 10 UWP, secondary commands are moved to a flyout menu on both desktop and phone.
在Windows 10 UWP中,辅助命令将移动到桌面和手机上的弹出菜单中。 Icons are by default not shown in this flyout menu.
默认情况下,图标不会显示在此弹出菜单中。
The SecondaryCommands collection can contain only AppBarButton, AppBarToggleButton, or AppBarSeparator command elements.
SecondaryCommands集合只能包含AppBarButton,AppBarToggleButton或AppBarSeparator命令元素。 The secondary commands are shown in the overflow menu when the CommandBar is open.
当CommandBar打开时,辅助命令显示在溢出菜单中。
If you would like to try to override the style, have a look at the OverflowPopup
control and CommandBarOverflowPresenter
style in generic.xaml to get you started. 如果您想尝试覆盖样式,请查看generic.xaml中的
OverflowPopup
控件和CommandBarOverflowPresenter
样式以帮助您入门。
C:\\Program Files (x86)\\Windows Kits\\10\\DesignTime\\CommonConfiguration\\Neutral\\UAP\\10.0.10240.0\\Generic\\generic.xaml
C:\\ Program Files(x86)\\ Windows Kits \\ 10 \\ DesignTime \\ CommonConfiguration \\ Neutral \\ UAP \\ 10.0.10240.0 \\ Generic \\ generic.xaml
I've come up with another approach. 我想出了另一种方法。 Hope this helps.
希望这可以帮助。
The idea is to utilize the Checked state of an AppBarToggleButton
. 我们的想法是利用
AppBarToggleButton
的Checked状态。
Create another class which extends AppBarToggleButton
. 创建另一个扩展
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();
}
}
}
Note that SegeoMDL2.Accept
is also a custom class derived from: 请注意,
SegeoMDL2.Accept
也是一个派生自以下类的自定义类:
https://msdn.microsoft.com/windows/uwp/style/segoe-ui-symbol-font https://msdn.microsoft.com/windows/uwp/style/segoe-ui-symbol-font
Now you can invoke this in your xaml with: 现在,您可以使用以下命令在xaml中调用此方法:
<ns:SecondaryIconButton Glyph="" />
Or create it in code behind: 或者在后面的代码中创建它:
new SecondaryIconButton( Glyph ) { Label = Label };
Reference: 参考:
SecondaryIconButton.cs SecondaryIconButton.cs
SegoeMDL2.cs SegoeMDL2.cs
Complete code works 完整代码有效
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();
}
}
Sample 样品
<CommandBar x:Name="commandbar" RequestedTheme="Dark">
<CommandBar.SecondaryCommands>
<controlEx:SecondaryIconButton Glyph="" RequestedTheme="Dark"
Foreground="{StaticResource NavigationPaneText}"
x:Name="createButton"
x:Uid="CreateNewItemLabel"></controlEx:SecondaryIconButton>
<controlEx:SecondaryIconButton Glyph="" RequestedTheme="Dark"
Foreground="{StaticResource NavigationPaneText}"
x:Name="importExportButton"
x:Uid="ImportExportLabel" ></controlEx:SecondaryIconButton>
</CommandBar.SecondaryCommands>
<CommandBar.PrimaryCommands>
</CommandBar.PrimaryCommands>
</CommandBar>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.