跳转至

Ribbon 项

可以向 Ribbon 控件及其菜单添加各种项:按钮、复选按钮、文本标签、子菜单、就地编辑器等。

ribbon-items

除了这些经典项之外,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 对象可用于实现常规按钮和带下拉功能的按钮。

常规按钮在单击时执行操作。

ribbon-items-button

单击按钮

要为按钮实现操作,可以指定命令或处理按钮的事件:

  • ToolbarItem.Command — 单击按钮时执行的命令。

    <mxb:ToolbarButtonItem Header="Open" KeyTip="O" 
    Command="{Binding OpenFileCommand}" 
    Glyph="{x:Static icons:Basic.Folder_Open}" />
    
    [RelayCommand]
    public void OpenFile()
    {
        //...
    }
    

  • CommandParameter — 传递给指定命令的命令参数。

  • ToolbarItem.Click — 左键单击项时(按下并释放鼠标左键后)触发。

  • ToolbarItem.Press — 在项上按下任意鼠标按键时触发。

按钮标题和字形

字形大小

在简化和经典命令布局中,Ribbon 页面组中命令字形的大小不同。以下部分提供了更多详细信息:

提示

要自定义弹出菜单和上下文菜单中项字形的大小,请使用项的 GlyphSize 属性。

<mxb:PopupMenu MinWidth="250" ContentRightIndent="30">
    <mxb:ToolbarButtonItem Header="New" Glyph="{x:Static icons:Basic.Doc}" GlyphSize="32,32" HotKey="Ctrl+N"/>
</mxb:PopupMenu>

简化命令布局中的字形大小

在简化命令布局中,页面组中的所有命令都使用同一种图标大小。

ribbon-glyphsize-simplified-command-layout

默认图标大小为 22x22。可以使用 RibbonControl.GlyphSizeInSimplifiedLayout 属性指定自定义图标大小。

经典命令布局中的字形大小

在经典命令布局中,页面组中的命令可以显示大字形和小字形。

ribbon-glyphsize-classic-command-layout

小图标的默认大小为 16x16。可以使用 RibbonControl.SmallGlyphSize 属性更改小图标的大小。大图标的尺寸是小图标的两倍。

RibbonControl.DisplayMode 附加属性可用于为 Ribbon 页面组中的命令指定显示尺寸(大、小以及小图标加文本)。有关详细信息,请参阅经典命令布局中的自适应字形大小。

经典命令布局中的自适应字形大小

调整 Ribbon 控件大小时,Ribbon 控件的自适应布局功能会调整 Ribbon 页面组中项的布局。使用经典命令布局时,此功能还会在调整 Ribbon 大小时调整项的显示尺寸。

ribbon-adaptivelayout

RibbonControl.DisplayMode 附加属性可用于指定经典命令布局下 Ribbon 页面组中 Ribbon 项支持的显示模式。 可以强制项仅使用大图像、小图像、带文本的小图像,或这些显示模式的组合。

预定义的字形显示模式由 RibbonItemDisplayMode 枚举定义:

  • Large — 项显示大字形和文本。

    ribboncontrol-displaymode-large

  • Small — 项显示小字形和文本。

    ribboncontrol-displaymode-small

  • SmallGlyph — 项显示小字形。

    ribboncontrol-displaymode-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" />

常用项显示设置

带下拉功能的按钮(ToolbarButtonItem)

ToolbarButtonItem 项可用于创建带有关联下拉控件或菜单的按钮。

ribbon-items-dropdownbutton

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

打开下拉控件

  • DropDownOpenMode — 获取或设置当用户触碰项/下拉箭头时是否以及何时打开下拉控件。支持的选项包括:
    • Press 或 Default — 在鼠标按下事件时显示下拉部分。
    • Click — 在项上按下并释放鼠标后显示下拉部分。
    • Never — 不显示下拉部分。
  • DropDownPress — 按下下拉箭头时触发的事件。

复选按钮(ToolbarCheckItem)

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'}" />

选中按钮

标题、字形和显示设置

可以按照与常规按钮相同的方式自定义复选按钮的常规显示设置。

使用 ToolbarMenuItem 创建单击时显示子菜单的项。

ribbon-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 — 获取或设置当用户触碰项时是否以及如何打开子菜单。支持的选项包括:
    • Press 或 Default — 在鼠标按下事件时显示菜单。
    • Click — 在项上按下并释放鼠标后显示菜单。
    • Never — 不显示菜单。

标题、字形和显示设置

可以按照与常规按钮相同的方式自定义子菜单的常规显示设置。

就地编辑器(ToolbarEditorItem)

使用 ToolbarEditorItem 对象在 Ribbon 控件中嵌入就地编辑器。

ribbon-toolbarEditorItem

ToolbarEditorItem 对象支持以下指定就地编辑器的方式:

指定编辑器类型

使用这种方式可以嵌入 Eremex 编辑器。

要指定编辑器类型,请将 ToolbarEditorItem.EditorProperties 属性设置为以下对象之一:

这些对象是 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.EditorProperties 属性指定编辑器时,这些成员有效。

编辑器的宽度

标题和字形

可以按照与常规按钮相同的方式自定义 ToolbarEditorItem 对象的常规显示设置。

文本标签(ToolbarTextItem)

使用 ToolbarTextItem 对象显示用户无法编辑的文本标签。

ribbon-ToolbarTextItem

<mxb:ToolbarTextItem 
 Header="{Binding #scaleDecorator.Scale, StringFormat={}Zoom: {0:P0}}" 
 ShowBorder="False" 
 />

标题和字形

文本标签的显示设置

ribbon-ToolbarTextItem-bordered

可以使用 ToolbarTextItem.BorderTemplate 属性指定用于绘制边框的自定义模板。 - ToolbarTextItem.BorderTemplate — 获取或设置用于绘制项边框的自定义模板。启用 ToolbarTextItem.ShowBorder 选项时,此模板有效。

另请参阅:

不可拆分的项组(ToolbarItemGroup)

使用 ToolbarItemGroup 创建不可拆分的工具栏项容器(组)。此容器中的项始终在一行中一起显示,并在调整 Ribbon 大小时作为一个整体处理。

ribbon-ToolbarItemGroup

在经典命令布局中,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 对象作为一个整体处理(容器的内容不会被部分隐藏;项始终显示在一行中,不支持换行)。

bars-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 对象可用于插入分隔线。

bars-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 中的库。

ribbon-RibbonGalleryItem

将 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"/>

ribbon-tooltips

另请参阅



* 本页面使用机器翻译技术翻译。