Ribbon 项¶
可以向 Ribbon 控件及其菜单添加各种项:按钮、复选按钮、文本标签、子菜单、就地编辑器等。
除了这些经典项之外,Ribbon 控件还支持库(Gallery)。库用于显示图形丰富的元素,这些元素按行和列排列。有关详细信息,请参阅库。
所有项(包括库)都可以添加到传统工具栏和上下文菜单中。
添加 Ribbon 项¶
可以在不同的 Ribbon 元素中显示各种项:Ribbon 页面组、快速访问工具栏、页面标题区域、主(应用程序)菜单和子菜单。
要在 XAML 中向 Ribbon 页面组添加项,请在 <RibbonPageGroup> 开始标记和结束标记之间定义这些项。在代码隐藏中,可以使用 RibbonPageGroup.Items 集合添加、访问和修改项。其他 Ribbon 元素也以相同方式填充项。
以下示例向 RibbonPageGroup 对象添加三个按钮(ToolbarButtonItem 对象)。
<mxb:ToolbarManager IsWindowManager="True">
<mxr:RibbonControl ApplicationButtonContent="File" ApplicationButtonKeyTip="F">
<mxr:RibbonPage Header="Home" KeyTip="H">
<mxr:RibbonPageGroup Header="Editing" IsHeaderButtonVisible="False">
<mxb:ToolbarButtonItem Header="Find" KeyTip="FN"
Glyph="{x:Static icons:Basic.Search}"
Command="FindButtonClick" />
<mxb:ToolbarButtonItem Header="Replace" KeyTip="RP"
Glyph="{x:Static icons:Basic.Update}"
Command="ReplaceButtonClick"/>
<mxb:ToolbarButtonItem Header="Clear" KeyTip="CL"
Glyph="{x:Static icons:Basic.Table_Clear}"
Command="ClearButtonClick"/>
</mxr:RibbonPageGroup>
</mxr:RibbonPage>
</mxr:RibbonControl>
</mxb:ToolbarManager>
Ribbon 项类型¶
可以添加到 Ribbon 控件和传统工具栏中的所有项都是 ToolbarItem 类的派生类。以下各部分介绍可用的 Ribbon 项及其设置。
常规按钮(ToolbarButtonItem)¶
ToolbarButtonItem 对象可用于实现常规按钮和带下拉功能的按钮。
常规按钮在单击时执行操作。
单击按钮¶
要为按钮实现操作,可以指定命令或处理按钮的事件:
-
ToolbarItem.Command— 单击按钮时执行的命令。 -
CommandParameter— 传递给指定命令的命令参数。 -
ToolbarItem.Click— 左键单击项时(按下并释放鼠标左键后)触发。 ToolbarItem.Press— 在项上按下任意鼠标按键时触发。
按钮标题和字形¶
Header— 项的显示文本。Glyph— 项的图像。另请参阅:字形大小。GlyphTemplate— 用于呈现项图像的自定义数据模板。
字形大小¶
在简化和经典命令布局中,Ribbon 页面组中命令字形的大小不同。以下部分提供了更多详细信息:
提示
要自定义弹出菜单和上下文菜单中项字形的大小,请使用项的 GlyphSize 属性。
简化命令布局中的字形大小¶
在简化命令布局中,页面组中的所有命令都使用同一种图标大小。
默认图标大小为 22x22。可以使用 RibbonControl.GlyphSizeInSimplifiedLayout 属性指定自定义图标大小。
经典命令布局中的字形大小¶
在经典命令布局中,页面组中的命令可以显示大字形和小字形。
小图标的默认大小为 16x16。可以使用 RibbonControl.SmallGlyphSize 属性更改小图标的大小。大图标的尺寸是小图标的两倍。
RibbonControl.DisplayMode 附加属性可用于为 Ribbon 页面组中的命令指定显示尺寸(大、小以及小图标加文本)。有关详细信息,请参阅经典命令布局中的自适应字形大小。
经典命令布局中的自适应字形大小¶
调整 Ribbon 控件大小时,Ribbon 控件的自适应布局功能会调整 Ribbon 页面组中项的布局。使用经典命令布局时,此功能还会在调整 Ribbon 大小时调整项的显示尺寸。
RibbonControl.DisplayMode 附加属性可用于指定经典命令布局下 Ribbon 页面组中 Ribbon 项支持的显示模式。
可以强制项仅使用大图像、小图像、带文本的小图像,或这些显示模式的组合。
预定义的字形显示模式由 RibbonItemDisplayMode 枚举定义:
-
Large— 项显示大字形和文本。 -
Small— 项显示小字形和文本。 -
SmallGlyph— 项显示小字形。 -
Auto— 项支持Large、Small和SmallGlyph显示模式。Ribbon 控件会根据项的父组中的可用空间,自动为项选择其中一种显示模式。
以下代码段将 Ribbon 项的 RibbonControl.DisplayMode 附加属性设置为 Large,强制该项仅使用大图像。
<mxr:RibbonPage Header="Home" KeyTip="H">
<mxr:RibbonPageGroup Header="File" IsHeaderButtonVisible="True">
<mxb:ToolbarButtonItem Header="Open" KeyTip="O" mxr:RibbonControl.DisplayMode="Large"
Glyph="{x:Static icons:Basic.Folder_Open}" />
</mxr:RibbonPageGroup>
</mxr:RibbonPage>
RibbonItemDisplayMode 枚举带有 [Flags] 特性,因此在设置 RibbonControl.DisplayMode 附加属性时,可以使用 Large、Small 和 SmallGlyph 标志的任意组合。
以下代码使 Ribbon 项仅使用 Small 和 SmallGlyph 显示模式:
<mxb:ToolbarButtonItem Header="Help" KeyTip="LP" Glyph="{x:Static icons:Basic.Info}"
mxr:RibbonControl.DisplayMode="Small, SmallGlyph" />
常用项显示设置¶
ShowSeparator— 获取或设置是否在项之前显示分隔线。也可以使用ToolbarSeparatorItem项插入分隔线。
带下拉功能的按钮(ToolbarButtonItem)¶
ToolbarButtonItem 项可用于创建带有关联下拉控件或菜单的按钮。
使用 ToolbarButtonItem.DropDownControl 属性指定下拉控件/菜单。当用户单击按钮或内置的下拉箭头按钮时(取决于 DropDownArrowVisibility 设置,见下文),会打开此下拉控件。
<mxb:ToolbarButtonItem Name="btnNew" Header="New" KeyTip="N"
Glyph="{x:Static icons:Basic.Docs_Add}"
mxr:RibbonControl.DisplayMode="Large"
DropDownArrowVisibility="ShowSplitArrow">
<mxb:ToolbarButtonItem.DropDownControl>
<mxb:PopupMenu>
<mxb:ToolbarButtonItem Header="New Document" KeyTip="ND"
Glyph="{x:Static icons:Basic.Doc_Add}" />
<mxb:ToolbarButtonItem Header="New Excel Document" KeyTip="NX"
Glyph="{x:Static icons:Basic.Doc_Excel}" />
</mxb:PopupMenu>
</mxb:ToolbarButtonItem.DropDownControl>
</mxb:ToolbarButtonItem>
下拉控件和下拉箭头按钮¶
-
DropDownControl— 获取或设置与项关联的下拉控件(Eremex.AvaloniaUI.Controls.Bars.IPopup对象)。当用户单击该项或内置的下拉箭头按钮时(请参阅DropDownArrowVisibility),会弹出该控件。以下对象实现了Eremex.AvaloniaUI.Controls.Bars.IPopup接口,因此可以作为下拉控件显示:Eremex.AvaloniaUI.Controls.Bars.PopupMenu— 弹出菜单。可以向菜单添加所有类型的工具栏项来填充其内容。Eremex.AvaloniaUI.Controls.Bars.PopupContainer— 控件容器。使用PopupContainer可在下拉部分中显示自定义控件。
-
DropDownArrowVisibility— 获取或设置项是否显示用于打开关联下拉控件的下拉箭头。-
ShowSplitArrow或Default— 下拉箭头可见,作为嵌入项中的单独按钮。单击下拉箭头会打开关联的下拉控件,并引发DropDownPress事件。单击项本身会执行其命令(Command)并引发事件(Click和Press)。 -
ShowArrow— 下拉箭头可见。项和箭头作为一个按钮工作,单击它们会显示关联的下拉控件。 -
Hide— 下拉箭头隐藏。单击项会打开下拉控件。
-
打开下拉控件¶
DropDownOpenMode— 获取或设置当用户触碰项/下拉箭头时是否以及何时打开下拉控件。支持的选项包括:DropDownPress— 按下下拉箭头时触发的事件。
复选按钮(ToolbarCheckItem)¶
ToolbarCheckItem 项可用于创建复选按钮。复选按钮支持两种状态:正常和按下。
xmlns:mxb="https://schemas.eremexcontrols.net/avalonia/bars"
<mxb:ToolbarCheckItem Header="Bold"
IsChecked="{Binding #textBox.FontWeight,
Converter={helpers:BoolToFontWeightConverter}, Mode=TwoWay}"
Glyph="{SvgImage 'avares://DemoCenter/Images/FontBold.svg'}" />
选中按钮¶
IsChecked— 获取或设置按钮的选中状态。CheckedChanged— 选中状态更改时触发的事件。
标题、字形和显示设置¶
Header— 项的显示文本。-
Glyph— 项的图像。复选按钮同时支持大图像和小图像。要了解更多信息,请参阅以下部分: -
GlyphTemplate— 用于呈现项图像的自定义数据模板。 -
CheckBoxStyle— 获取或设置ToolbarCheckItem对象的显示模式。可用选项包括: -
CheckBoxStyle.CheckButton— 项呈现为复选按钮。当IsChecked为true时,按钮显示为按下状态。 -
CheckBoxStyle.CheckBox— 项在其文本和字形之前显示一个复选框。当IsChecked为true时,复选框中显示选中标记。 -
CheckBoxStyle.RadioButton— 项在其文本和字形之前显示一个单选按钮。当IsChecked为true时,单选按钮显示为实心圆。可以将 RadioButton 样式应用于组合在复选组(
ToolbarCheckItemGroup)中的ToolbarCheckItem对象。在这种情况下,该组显示为典型的单选按钮组。 -
CheckBoxAlignment— 获取或设置复选框(或单选按钮)显示在项的字形和文本之前还是之后。当CheckBoxStyle属性设置为CheckBoxStyle.CheckBox或CheckBoxStyle.RadioButton时,此选项有效。
可以按照与常规按钮相同的方式自定义复选按钮的常规显示设置。
子菜单(ToolbarMenuItem)¶
使用 ToolbarMenuItem 创建单击时显示子菜单的项。
子菜单的内容¶
要指定子菜单的内容,请在 XAML 中的 <ToolbarMenuItem> 开始标记和结束标记之间定义项,或在代码隐藏中将项添加到 ToolbarMenuItem.Items 集合中。
xmlns:mxb="https://schemas.eremexcontrols.net/avalonia/bars"
<mxb:ToolbarMenuItem Header="File" Category="File">
<mxb:ToolbarButtonItem Header="New"
Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=NewDraftAction.svg'}"
Category="File" Command="{Binding NewFileCommand}"/>
<mxb:ToolbarButtonItem Header="Open"
Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Folder Open.svg'}"
Category="File" Command="{Binding OpenFileCommand}"/>
<mxb:ToolbarButtonItem Header="Save"
Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Save.svg'}"
Category="File" Command="{Binding SaveFileCommand}"/>
<mxb:ToolbarButtonItem Header="Print"
Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Print.svg'}"
ShowSeparator="True" Category="File" Command="{Binding PrintFileCommand}"/>
</mxb:ToolbarMenuItem>
还可以使用 ToolbarMenuItem.ItemsSource 属性,根据 View Model 中的业务对象集合向子菜单填充项。相应的数据模板应定义 Ribbon 项,并根据基础业务对象初始化其设置。
打开子菜单¶
打开子菜单时,会引发以下事件:
Opening— 在菜单即将显示时触发。此事件可用于取消显示菜单。Opened— 在菜单显示后触发。Closing— 在菜单即将关闭时触发。此事件可用于取消关闭菜单。Closed— 在菜单关闭后触发。
以下属性可用于取消显示子菜单,以及指定在鼠标单击还是按下事件时显示子菜单。
DropDownOpenMode— 获取或设置当用户触碰项时是否以及如何打开子菜单。支持的选项包括:
标题、字形和显示设置¶
Header— 子菜单的标题文本。-
Glyph— 子菜单的图像。子菜单标题同时支持大图像和小图像。要了解如何在 Ribbon 控件中指定项字形的大小,请参阅以下部分: -
GlyphTemplate— 用于呈现项图像的自定义数据模板。
可以按照与常规按钮相同的方式自定义子菜单的常规显示设置。
就地编辑器(ToolbarEditorItem)¶
使用 ToolbarEditorItem 对象在 Ribbon 控件中嵌入就地编辑器。
ToolbarEditorItem 对象支持以下指定就地编辑器的方式:
-
指定编辑器类型。这是指定 Eremex 就地编辑器的推荐方式。
指定编辑器类型¶
使用这种方式可以嵌入 Eremex 编辑器。
要指定编辑器类型,请将 ToolbarEditorItem.EditorProperties 属性设置为以下对象之一:
ButtonEditorProperties— 对应ButtonEditor就地编辑器。CheckEditorProperties— 对应CheckEditor就地编辑器。ColorEditorProperties— 对应ColorEditor就地编辑器。ComboBoxEditorProperties— 对应ComboBoxEditor就地编辑器。HyperlinkEditorProperties— 对应HyperlinkEditor就地编辑器。PopupColorEditorProperties— 对应PopupColorEditor就地编辑器。PopupEditorProperties— 对应PopupEditor就地编辑器。SegmentedEditorProperties— 对应SegmentedEditor就地编辑器。SpinEditorProperties— 对应SpinEditor就地编辑器。TextEditorProperties— 对应TextEditor就地编辑器。MemoEditorProperties— 对应MemoEditor就地编辑器。
这些对象是 BaseEditorProperties 的派生类,包含用于自定义相应就地编辑器的设置。
以下示例定义了 Font 项(ToolbarEditorItem 对象),该项使用组合框就地编辑器显示字体列表。ToolbarEditorItem.EditorProperties 属性设置为 ComboBoxEditorProperties 对象,对应 ComboBoxEditor 编辑器。完整代码请参阅 WordPad Example 演示。
<mxb:ToolbarEditorItem Header="Font" EditorWidth="150"
EditorValue="{Binding #textBox.FontFamily, Converter={helpers:FontNameToFontFamilyConverter}}">
<mxb:ToolbarEditorItem.EditorProperties>
<mxe:ComboBoxEditorProperties
ItemsSource="{Binding $parent[view:ToolbarAndMenuPageView].Fonts}"
IsTextEditable="False" PopupMaxHeight="300"/>
</mxb:ToolbarEditorItem.EditorProperties>
</mxb:ToolbarEditorItem>
在数据模板中指定编辑器¶
使用 ToolbarEditorItem.EditorTemplate 属性在数据模板中指定编辑器。在这种情况下,需要手动为编辑器设置值(例如使用数据绑定)。
<mxb:ToolbarEditorItem Width="150">
<mxb:ToolbarEditorItem.EditorTemplate>
<DataTemplate>
<mxe:TextEditor EditorValue="{Binding Count}" Width="80"/>
</DataTemplate>
</mxb:ToolbarEditorItem.EditorTemplate>
</mxb:ToolbarEditorItem>
更改和返回编辑器的值¶
-
ToolbarEditorItem.EditorValue— 获取或设置就地编辑器的值。将此属性用于数据绑定。 -
ToolbarEditorItem.EditorValueChanged— 编辑器的值更改后触发的事件。
使用 ToolbarEditorItem.EditorProperties 属性指定编辑器时,这些成员有效。
编辑器的宽度¶
ToolbarEditorItem.EditorWidth— 获取或设置就地编辑器的宽度。使用ToolbarEditorItem.EditorProperties属性指定编辑器时,此属性有效。如果在数据模板中指定编辑器,可以使用ToolbarEditorItem.Width属性设置编辑器宽度,或为编辑器本身设置宽度。
标题和字形¶
-
Header— 项的显示文本。 -
Glyph— 项的图像。ToolbarEditorItem对象仅支持小图像。在经典命令布局中,小图像的大小由RibbonControl.SmallGlyphSize属性指定;在简化命令布局中,由RibbonControl.GlyphSizeInSimplifiedLayout属性指定。 GlyphTemplate— 用于呈现项图像的自定义数据模板。
可以按照与常规按钮相同的方式自定义 ToolbarEditorItem 对象的常规显示设置。
文本标签(ToolbarTextItem)¶
使用 ToolbarTextItem 对象显示用户无法编辑的文本标签。
<mxb:ToolbarTextItem
Header="{Binding #scaleDecorator.Scale, StringFormat={}Zoom: {0:P0}}"
ShowBorder="False"
/>
标题和字形¶
Header— 项的显示文本。-
Glyph— 项的图像。文本标签同时支持大图像和小图像。要了解如何在 Ribbon 控件中指定项字形的大小,请参阅以下部分: - 经典命令布局中的自适应字形大小
文本标签的显示设置¶
ToolbarTextItem.ShowBorder— 获取或设置项的边框是否可见。
可以使用 ToolbarTextItem.BorderTemplate 属性指定用于绘制边框的自定义模板。
- ToolbarTextItem.BorderTemplate — 获取或设置用于绘制项边框的自定义模板。启用 ToolbarTextItem.ShowBorder 选项时,此模板有效。
另请参阅:
不可拆分的项组(ToolbarItemGroup)¶
使用 ToolbarItemGroup 创建不可拆分的工具栏项容器(组)。此容器中的项始终在一行中一起显示,并在调整 Ribbon 大小时作为一个整体处理。
在经典命令布局中,ToolbarItemGroup 中的项仅支持小图像。
组的内容¶
要指定容器的内容,请在 XAML 中的 <ToolbarItemGroup> 开始标记和结束标记之间定义项,或在代码隐藏中将项添加到 ToolbarItemGroup.Items 集合中。
<mxb:ToolbarItemGroup>
<mxb:ToolbarButtonItem Header="Increase" KeyTip="CR" Glyph="{x:Static icons:Basic.Level_Increase}" />
<mxb:ToolbarButtonItem Header="Decrease" KeyTip="DC" Glyph="{x:Static icons:Basic.Level_Reduce}" />
<mxb:ToolbarButtonItem Header="Collapse" KeyTip="CL" Glyph="{x:Static icons:Basic.List_Collapse}" />
<mxb:ToolbarButtonItem Header="Expand" KeyTip="EX" Glyph="{x:Static icons:Basic.List_Expand}" />
</mxb:ToolbarItemGroup>
还可以使用 ToolbarItemGroup.ItemsSource 属性,根据 View Model 中存储的业务对象集合向容器填充项。相应的数据模板应定义 Ribbon 项,并根据基础业务对象初始化其设置。
另请参阅:
不可拆分的复选项组(ToolbarCheckItemGroup)¶
使用 ToolbarCheckItemGroup 创建不可拆分的复选项(ToolbarCheckItem 对象)容器(组)。与 ToolbarItemGroup 对象一样,当其父级调整大小时,ToolbarCheckItemGroup 对象作为一个整体处理(容器的内容不会被部分隐藏;项始终显示在一行中,不支持换行)。
ToolbarCheckItemGroup 容器可以控制其子项 ToolbarCheckItem 的选中状态。可以使用 ToolbarCheckItemGroup 容器创建以下类型的组:
- 互斥项组(单选组)。
- 允许同时选中多个项的组。
在经典命令布局中,ToolbarCheckItemGroup 中的项仅支持小图像。
组的内容¶
要指定容器的内容,请在 XAML 中的 <ToolbarCheckItemGroup> 开始标记和结束标记之间定义 ToolbarCheckItem 项,或在代码隐藏中将项添加到 ToolbarCheckItemGroup.Items 集合中。
<mxb:ToolbarCheckItemGroup>
<mxb:ToolbarCheckItem Header="Bold" KeyTip="B" Glyph="{x:Static icons:Basic.Font_Bold}" />
<mxb:ToolbarCheckItem Header="Italic" KeyTip="I" Glyph="{x:Static icons:Basic.Font_Italic}" />
<mxb:ToolbarCheckItem Header="Underline" KeyTip="U" Glyph="{x:Static icons:Basic.Font_Underline}" />
</mxb:ToolbarCheckItemGroup>
还可以使用 ToolbarCheckItemGroup.ItemsSource 属性,根据 View Model 中存储的业务对象集合向容器填充项。相应的数据模板应定义 Ribbon 项,并根据基础业务对象初始化其设置。
选中组中的项¶
-
ToolbarCheckItemGroup.CheckType— 获取或设置组中一次可以选中一个还是多个项。支持以下选项:Default或Multiple— 可以同时选中多个项。Radio— 互斥项组。用户只能通过选中另一个项来取消选中某项。Single— 互斥项组。用户可以取消选中组中的所有项。
-
ToolbarCheckItem.IsChecked— 获取或设置按钮的选中状态。
另请参阅:
分隔线(ToolbarSeparatorItem)¶
ToolbarSeparatorItem 对象可用于插入分隔线。
<mxb:ToolbarMenuItem Header="File" Category="File">
<mxb:ToolbarButtonItem Header="New"
Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Context Menu, Icon=NewDraftAction.svg'}"
Category="File"/>
<mxb:ToolbarButtonItem Header="Open"
Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Folder Open.svg'}"
Category="File"/>
<mxb:ToolbarButtonItem Header="Save"
Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Save.svg'}"
Category="File"/>
<mxb:ToolbarSeparatorItem/>
<mxb:ToolbarButtonItem Header="Print"
Glyph="{SvgImage 'avares://DemoCenter/Images/Group=Basic, Icon=Print.svg'}"
Category="File"/>
</mxb:ToolbarMenuItem>
库¶
要创建库,请使用 RibbonGalleryItem 项。下图显示了一个内嵌在 Ribbon 中的库。
将 RibbonGalleryItem 对象添加到传统工具栏或弹出菜单时,库显示为子菜单。
有关详细信息,请参阅以下主题:库
快捷键¶
可以使用 ToolbarItem.HotKey 属性为项分配快捷键。
<mxb:ToolbarButtonItem
Header="Open" Command="{Binding OpenCommand}" HotKey="Ctrl+O"
Glyph="{x:Static icons:Basic.Folder_Open}"/>
只要焦点位于快捷键作用范围内,按下快捷键就会执行项的命令。默认的快捷键作用范围是 ToolbarManager 组件边界内的界面区域。当输入焦点位于快捷键作用范围之外时,ToolbarManager 无法拦截快捷键。
ToolbarManager.IsWindowManager 属性可用于将快捷键作用范围扩展到整个窗口。将此属性设置为 true 时,ToolbarManager 组件会在窗口中注册项的快捷键,即使焦点位于其客户区之外,也能够拦截和处理快捷键。
工具提示¶
使用 ToolbarItem.Hint 属性为 Ribbon 项指定工具提示:
<mxb:ToolbarButtonItem Header="Increase" HotKey="CTRL+J"
Glyph="{x:Static icons:Basic.Level_Increase}"
Hint="Increase the indent"/>
另请参阅¶
* 本页面使用机器翻译技术翻译。























