Windows Ribbon for WinForms 开发实例

Windows Ribbon for WinForms 是 Windows Ribbon Framework 的一个 .NET 托管包装。
本实例将通过开发一个仿写字板的程序演示 Windows Ribbon for WinForms 的基本用法。

开发环境：Windows 10 64位 + Visual Studio 2015

下载 Windows Ribbon for WinForms

进入 http://windowsribbon.codeplex.com 页面，点击右上角的【download archive】按钮，下载 windowsribbon.zip 控件包。

创建 WinForms 程序

启动 Visual Studio 2015，新建 Windows 窗体应用程序。
在这里插入图片描述

添加 Ribbon 项目

解压刚才下载的 windowsribbon.zip 文件，把压缩包里 sourceCode 子目录中的 sourceCode.zip 文件复制到 D:\RibbonForWinFormsDemo 文件夹中，并解压 sourceCode.zip 到 D:\RibbonForWinFormsDemo\sourceCode 文件夹。
在 Visual Studio 解决方案资源管理器中，在解决方案名称上点击鼠标右键，在弹出的快捷菜单上选择“添加->现有项目…”。在弹出的“添加现有项目”对话框中选择 D:\RibbonForWinFormsDemo\sourceCode\Ribbon\Ribbon.csproj。
在这里插入图片描述

注：如果电脑上没有安装 .NETFramework 3.5，会弹出下面的更改目标框架对话框，点 [确定] 就可以了。

然后在项目 Ribbon 上点击右键，在弹出的快捷菜单上点击“属性”，在属性窗口中更改 目标框架 为 .NET Framework 4.6.1，与主项目保持一致。
在这里插入图片描述

生成 Ribbon 控件

在 Visual Studio 解决方案资源管理器中，在项目名称【Ribbon】上点击鼠标右键，在弹出的快捷菜单上选择【生成】，生成 Ribbon 控件。
在这里插入图片描述

将 Ribbon 控件添加到窗体

展开【工具箱】，再展开【Ribbon 组件】，把【Ribbon】控件拖拽到窗体上。
在这里插入图片描述
然后再添加一个 RichTextBox 控件，并设置 Dock 属性为 Fill。

添加 Ribbon Markup 文件

在解决方案资源管理器中，在项目名称 [RibbonForWinFormsDemo] 上点击鼠标右键，在弹出的快捷菜单上选择 [添加->新建项…]。
在这里插入图片描述
在弹出的 [添加新项] 对话框中选择 [XML 文件]，然后点击右下角的 [添加] 按钮，添加 RibbonMarkup.xml 文件。

修改 RibbonMarkup.xml 文件内容为：

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns='http://schemas.microsoft.com/windows/2009/Ribbon'>
  <Application.Commands>
    <Command Name="TabHome" Id="20000" LabelTitle="主页" />
    <Command Name="TabView" Id="30000" LabelTitle="查看" />
  </Application.Commands>
  <Application.Views>
    <Ribbon>
      <Ribbon.Tabs>
        <Tab CommandName="TabHome"></Tab>
        <Tab CommandName="TabView"></Tab>
      </Ribbon.Tabs>
    </Ribbon>
  </Application.Views>
</Application>

配置自动编译 Ribbon Markup 文件

在解决方案资源管理器中，在项目名称 [RibbonForWinFormsDemo] 上点击鼠标右键，在弹出的快捷菜单上选择 [属性]，打开项目属性窗口。
点击左侧的【生成事件】标签，在【预先生成事件命令行】输入如下代码：

"%PROGRAMFILES(x86)%\Windows Kits\8.1\bin\x86\UICC.exe" "$(ProjectDir)RibbonMarkup.xml" "$(ProjectDir)RibbonMarkup.bml" /res:"$(ProjectDir)RibbonMarkup.rc"
"%PROGRAMFILES(x86)%\Windows Kits\8.1\bin\x86\rc.exe" /v "$(ProjectDir)RibbonMarkup.rc" 
cmd /c "("$(DevEnvDir)..\..\VC\bin\vcvars32.bat") && ("$(DevEnvDir)..\..\VC\bin\link.exe" /VERBOSE /NOENTRY /DLL /OUT:"$(ProjectDir)RibbonMarkup.ribbon" "$(ProjectDir)RibbonMarkup.res")"

在这里插入图片描述
注：

其中 RibbonMarkup.ribbon 是我们最终需要的编译之后的目标文件
由于操作系统不同，及安装的 Windows SDK 不同，UICC.exe 和 rc.exe 所在的文件夹可能不同
由于使用了 VC 的 vcvars32.bat 和 link.exe，所以必须安装 Visual C++

生成 RibbonMarkup.ribbon 文件

在 Visual Studio 解决方案资源管理器中，在项目名称【RibbonForWinFormsDemo】上点击鼠标右键，在弹出的快捷菜单上选择【生成】，生成 RibbonMarkup.ribbon 文件。
在这里插入图片描述

包含 RibbonMarkup.ribbon 文件

在解决方案资源管理器中，选中项目名称【RibbonForWinFormsDemo】，然后选中 [解决方案资源管理器] 窗口工具条中的【显示所有文件】按钮，使项目节点下显示出项目文件夹的全部文件。
在这里插入图片描述
在【RibbonMarkup.ribbon】文件上点击右键，在弹出的快捷菜单上选择【包括在项目中】。

然后在 RibbonMarkup.ribbon 文件的【属性】窗口里，设置【生成操作】为嵌入的资源。

关联 RibbonMarkup.ribbon 文件到控件

打开 Form1 窗体设计器，选中 Ribbon 控件，再打开 Ribbon 控件的【属性】窗口，把右侧的滚动条拽到最底部，找到【ResourceName】属性，设置其值为 RibbonForWinFormsDemo.RibbonMarkup.ribbon。其中前半部分 RibbonForWinFormsDemo 为 Form1 窗体的命名空间，后半部分 RibbonMarkup.ribbon 为嵌入的资源文件名。
在这里插入图片描述

运行程序

按 Ctrl+F5 运行程序，可以看到窗口顶部有一个 Ribbon 控件，上面有主页、查看两个选项卡。
在这里插入图片描述

Ribbon Markup 文件结构

Ribbon Markup 文件主要结构如下：

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns='http://schemas.microsoft.com/windows/2009/Ribbon'>
  <Application.Commands>
  </Application.Commands>
  <Application.Views>
    <Ribbon>
      <Ribbon.QuickAccessToolbar>
      </Ribbon.QuickAccessToolbar>
      <Ribbon.ApplicationMenu>
      </Ribbon.ApplicationMenu>
      <Ribbon.Tabs>
      </Ribbon.Tabs>
      <Ribbon.ContextualTabs>
      </Ribbon.ContextualTabs>
      <Ribbon.HelpButton>
      </Ribbon.HelpButton>
    </Ribbon>
    <ContextPopup>
      <ContextPopup.MiniToolbars>
      </ContextPopup.MiniToolbars>
      <ContextPopup.ContextMenus>
      </ContextPopup.ContextMenus>
      <ContextPopup.ContextMaps>
      </ContextPopup.ContextMaps>
    </ContextPopup>
  </Application.Views>
</Application>

Application.Commands 命令节点，所有命令都放在这个节点下
Ribbon.QuickAccessToolbar 快速访问工具栏
Ribbon.ApplicationMenu 应用菜单
Ribbon.Tabs 选项卡
Ribbon.ContextualTabs 上下文相关的选项卡
Ribbon.HelpButton 帮助按钮
ContextPopup 上下文菜单和工具条

剪贴板

打开 RibbonMarkup.xml 文件，在 <Application.Commands> 节点下面添加如下命令：

<Command Name="GroupClipboard" Id="21000" LabelTitle="剪贴板"/>
<Command Name="PasteButton" Id="21010" LabelTitle="粘贴" >
  <Command.TooltipTitle>粘贴(Ctrl+V)</Command.TooltipTitle>
  <Command.TooltipDescription>粘贴剪贴板的内容。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/Paste.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/Paste.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="PasteSpecialButton" Id="21011" LabelTitle="选择性粘贴" >
  <Command.TooltipDescription>选择性粘贴(Alt+Ctrl+V)</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/PasteSpecial.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/PasteSpecial.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="CutButton" Id="21020" LabelTitle="剪切">
  <Command.TooltipTitle>剪切(Ctrl+X)</Command.TooltipTitle>
  <Command.TooltipDescription>从文档中剪切选定内容并将其放置到剪贴板上。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/Cut.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/Cut.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="CopyButton" Id="21030" LabelTitle="复制">
  <Command.TooltipTitle>复制(Ctrl+C)</Command.TooltipTitle>
  <Command.TooltipDescription>复制选定内容并将其放置到剪贴板上。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/CopyCommand.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/CopyCommand.SmallImage.png"/>
  </Command.SmallImages>
</Command>

然后在 <Tab CommandName="TabHome"> 节点下面添加剪贴板 <Group> 及按钮布局：

<Tab CommandName="TabHome">
  <Group CommandName="GroupClipboard" SizeDefinition="BigButtonsAndSmallButtonsOrInputs">
    <ControlGroup>
      <SplitButton>
        <SplitButton.ButtonItem>
          <Button CommandName="PasteButton"/>
        </SplitButton.ButtonItem>
        <SplitButton.MenuGroups>
          <MenuGroup Class="StandardItems">
            <Button CommandName="PasteButton"/>
            <Button CommandName="PasteSpecialButton"/>
          </MenuGroup>
        </SplitButton.MenuGroups>
      </SplitButton>
    </ControlGroup>
    <ControlGroup>
      <Button CommandName="CutButton"/>
      <Button CommandName="CopyButton"/>
    </ControlGroup>
  </Group>
</Tab>

按 Ctrl+F5 运行程序，界面如下：
在这里插入图片描述

SplitButton 带有下拉菜单的按钮，注意与 DropDownButton 区分
BigButtonsAndSmallButtonsOrInputs 组内按钮排列方式
ControlGroup 用于对按钮分组，对于 BigButtonsAndSmallButtonsOrInputs 布局，必须要分组

对于 SizeDefinition 的详细说明，可参考如下链接：

剪切、复制、粘贴按钮的事件处理

Ribbon Markup 文件定义了 Ribbon 有哪些按钮，以及按钮的布局方式，对于按钮的事件处理，需要通过后台代码实现。

添加命名空间

using RibbonLib.Controls;
1

添加按钮定义

public enum RibbonCommands : uint
{
    PasteButton = 21010,
    CutButton = 21020,
    CopyButton = 21030
}

这里定义了三个按钮，对应于 Ribbon 上的粘贴、剪切、复制按钮，等号后边的数值是 RibbonMarkup.xml 文件里对应 <Command> 的 Id 值。

然后再在 Form1 类里声明三个私有变量：

private RibbonButton _cutButton;
private RibbonButton _copyButton;
private RibbonButton _pasteButton;

添加按钮事件

在 Form1 类的构造函数里实例化按钮，并关联事件处理函数：

public Form1()
{
    InitializeComponent();
_cutButton <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RibbonButton</span><span class="token punctuation">(</span>ribbon1<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token keyword">uint</span><span class="token punctuation">)</span>RibbonCommands<span class="token punctuation">.</span>CutButton<span class="token punctuation">)</span><span class="token punctuation">;</span>
_cutButton<span class="token punctuation">.</span>ExecuteEvent <span class="token operator">+</span><span class="token operator">=</span> _cutButton_ExecuteEvent<span class="token punctuation">;</span>

_copyButton <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RibbonButton</span><span class="token punctuation">(</span>ribbon1<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token keyword">uint</span><span class="token punctuation">)</span>RibbonCommands<span class="token punctuation">.</span>CopyButton<span class="token punctuation">)</span><span class="token punctuation">;</span>
_copyButton<span class="token punctuation">.</span>ExecuteEvent <span class="token operator">+</span><span class="token operator">=</span> _copyButton_ExecuteEvent<span class="token punctuation">;</span>

_pasteButton <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RibbonButton</span><span class="token punctuation">(</span>ribbon1<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token keyword">uint</span><span class="token punctuation">)</span>RibbonCommands<span class="token punctuation">.</span>PasteButton<span class="token punctuation">)</span><span class="token punctuation">;</span>
_pasteButton<span class="token punctuation">.</span>ExecuteEvent <span class="token operator">+</span><span class="token operator">=</span> _pasteButton_ExecuteEvent<span class="token punctuation">;</span>

}

再添加这三个按钮的事件处理函数：

private void _cutButton_ExecuteEvent(object sender, RibbonLib.Controls.Events.ExecuteEventArgs e)
{
    richTextBox1.Cut();
}
private void _copyButton_ExecuteEvent(object sender, RibbonLib.Controls.Events.ExecuteEventArgs e)

{

richTextBox1.Copy();

}
private void _pasteButton_ExecuteEvent(object sender, RibbonLib.Controls.Events.ExecuteEventArgs e)

{

richTextBox1.Paste();

}

字体

在 <Application.Commands> 节点下面添加如下命令：

<Command Name="GroupFont" Id="22000" LabelTitle="字体"/>
<Command Name="FontControl" Id="22010"/>

在 <Tab CommandName="TabHome"> 节点下面添加字体 <Group> 及字体控件：

<Group CommandName="GroupFont" >
  <FontControl CommandName="FontControl" FontType="RichFont" />
</Group>

按 Ctrl+F5 运行程序，界面如下：
在这里插入图片描述

Ribbon 控件分为三大类：基本控件、容器控件、专用控件。字体控件属于专用控件。详情参考 Windows Ribbon Framework Control Library
FontType - 字体控件有三种类型：FontOnly、FontWithColor、RichFont。详情参考 FontControl element
字体控件的使用方法可参考 Windows Ribbon for WinForms, Part 14 – FontControl

段落

在 RibbonMarkup.xml 文件，在 <Application.Commands> 节点下面添加如下命令：

<Command Name="GroupParagraph" Id="23000" LabelTitle="段落"/>
<Command Name="OutdentButton" Id="23010">
  <Command.TooltipTitle>减少缩进</Command.TooltipTitle>
  <Command.TooltipDescription>减少段落的缩进级别。</Command.TooltipDescription>
  <Command.SmallImages>
    <Image Source="Images/Outdent.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="IndentButton" Id="23020">
  <Command.TooltipTitle>增加缩进</Command.TooltipTitle>
  <Command.TooltipDescription>增加段落的缩进级别。</Command.TooltipDescription>
  <Command.SmallImages>
    <Image Source="Images/Indent.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="ListButton" Id="23030">
  <Command.TooltipTitle>启动一个列表</Command.TooltipTitle>
  <Command.TooltipDescription>单击箭头可选择不同的列表样式。</Command.TooltipDescription>
  <Command.SmallImages>
    <Image Source="Images/Bullets.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="LineSpacingButton" Id="23040">
  <Command.TooltipTitle>行距</Command.TooltipTitle>
  <Command.TooltipDescription>更改文本的行间距。在段落之后添加或删除空格。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/LineSpacingGallery.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/LineSpacingGallery.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="LineSpacing10Button" LabelTitle="1.0"/>
<Command Name="LineSpacing115Button" LabelTitle="1.15"/>
<Command Name="LineSpacing15Button" LabelTitle="1.5"/>
<Command Name="LineSpacing2Button" LabelTitle="2"/>
<Command Name="LineSpacingEmptyButton" LabelTitle="在段落之后添加 10pt 的空格"/>
<Command Name="AlignLeftButton" Id="23050">
  <Command.TooltipTitle>向左对齐文本(Ctrl+L)</Command.TooltipTitle>
  <Command.TooltipDescription>将文本向左对齐。</Command.TooltipDescription>
  <Command.SmallImages>
    <Image Source="Images/AlignLeft.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="AlignCenterButton" Id="23060">
  <Command.TooltipTitle>居中(Ctrl+E)</Command.TooltipTitle>
  <Command.TooltipDescription>居中对齐文本。</Command.TooltipDescription>
  <Command.SmallImages>
    <Image Source="Images/AlignCenter.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="AlignRightButton" Id="23070">
  <Command.TooltipTitle>向右对齐文本(Ctrl+R)</Command.TooltipTitle>
  <Command.TooltipDescription>将文本向右对齐。</Command.TooltipDescription>
  <Command.SmallImages>
    <Image Source="Images/AlignRight.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="JustifyButton" Id="23080">
  <Command.TooltipTitle>对齐(Ctrl+J)</Command.TooltipTitle>
  <Command.TooltipDescription>
    同时以左右边距对齐文本，必要时在字之间添加额外的空格。
这样将使页面左右两边的外观比较整洁。
  </Command.TooltipDescription>
  <Command.SmallImages>
    <Image Source="Images/Justify.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="ParagraphGroupButton" Id="23090">
  <Command.TooltipTitle>段落</Command.TooltipTitle>
  <Command.TooltipDescription>显示“段落”对话框。</Command.TooltipDescription>
  <Command.SmallImages>
    <Image Source="Images/ParagraphGroup.SmallImage.png"/>
  </Command.SmallImages>
</Command>

然后在 <Tab CommandName="TabHome"> 节点下面添加段落 <Group> 及按钮布局：

<Group CommandName="GroupParagraph" SizeDefinition="ButtonGroups">
  <ControlGroup>
    <ControlGroup>
      <Button CommandName="OutdentButton" />
      <Button CommandName="IndentButton" />
      <SplitButtonGallery CommandName="ListButton" TextPosition="Hide" ItemHeight="76" ItemWidth="76" Type="Commands" HasLargeItems="true">
        <SplitButtonGallery.MenuLayout>
          <FlowMenuLayout Rows="3" Columns="3" Gripper="None"/>
        </SplitButtonGallery.MenuLayout>
      </SplitButtonGallery>
      <DropDownButton CommandName="LineSpacingButton">
        <MenuGroup>
          <CheckBox CommandName="LineSpacing10Button"/>
          <CheckBox CommandName="LineSpacing115Button" />
          <CheckBox CommandName="LineSpacing15Button"/>
          <CheckBox CommandName="LineSpacing2Button"/>
        </MenuGroup>
        <MenuGroup>
          <CheckBox CommandName="LineSpacingEmptyButton" />
        </MenuGroup>
      </DropDownButton>
    </ControlGroup>
  </ControlGroup>
  <ControlGroup>
    <ControlGroup>
      <ToggleButton CommandName="AlignLeftButton" />
      <ToggleButton CommandName="AlignCenterButton" />
      <ToggleButton CommandName="AlignRightButton" />
      <ToggleButton CommandName="JustifyButton" />
      <Button CommandName="ParagraphGroupButton" />
    </ControlGroup>
  </ControlGroup>
</Group>

按 Ctrl+F5 运行程序，界面如下：
在这里插入图片描述

DropDownButton 另一种带有下拉菜单的按钮，注意与 SplitButton 区分
ButtonGroups 组内按钮布局方式，对于这种布局方式必须嵌套两层 ControlGroup 才行
SplitButtonGallery 一种类似于 SplitButton 的容器控件。容器控件分为 静态容器 和 动态容器 两种，SplitButtonGallery 属于动态容器，动态容器里的项目必须在 C# 代码里添加，不能直接写在 RibbonMarkup.xml 文件里。详情参考 Dynamic Containers。

添加列表 Gallery 项

添加 ImageList

打开 Form1 窗体设计器，拖拽一个 ImageList 控件到窗口上。设置 ImageList 属性如下图：
在这里插入图片描述

添加命名空间

using RibbonLib;

添加按钮定义

public enum RibbonCommands : uint
{
    PasteButton = 21010,
    CutButton = 21020,
    CopyButton = 21030,
    ListButton = 23030
}

private RibbonSplitButtonGallery _listButtonGallery;

添加按钮事件

在 Form1 类的构造函数里实例化按钮，并关联事件处理函数：

_listButtonGallery = new RibbonSplitButtonGallery(ribbon1, (uint)RibbonCommands.ListButton);
_listButtonGallery.ItemsSourceReady += _listButtonGallery_ItemsSourceReady;

private void _listButtonGallery_ItemsSourceReady(object sender, EventArgs e)
{
    IUICollection itemsSource = _listButtonGallery.ItemsSource;
    itemsSource.Clear();
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">int</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> imageList1<span class="token punctuation">.</span>Images<span class="token punctuation">.</span>Count<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    <span class="token keyword">uint</span> buttonId <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">uint</span><span class="token punctuation">)</span>RibbonCommands<span class="token punctuation">.</span>ListButton <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token keyword">uint</span><span class="token punctuation">)</span>i <span class="token operator">+</span> <span class="token number">1</span>u<span class="token punctuation">;</span>
    <span class="token keyword">var</span> button <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RibbonButton</span><span class="token punctuation">(</span>ribbon1<span class="token punctuation">,</span> buttonId<span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        LargeImage <span class="token operator">=</span> ribbon1<span class="token punctuation">.</span><span class="token function">ConvertToUIImage</span><span class="token punctuation">(</span><span class="token punctuation">(</span>Bitmap<span class="token punctuation">)</span>imageList1<span class="token punctuation">.</span>Images<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    itemsSource<span class="token punctuation">.</span><span class="token function">Add</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">GalleryCommandPropertySet</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        CommandID <span class="token operator">=</span> buttonId<span class="token punctuation">,</span>
        CommandType <span class="token operator">=</span> RibbonLib<span class="token punctuation">.</span>Interop<span class="token punctuation">.</span>CommandType<span class="token punctuation">.</span>Action<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

按 Ctrl+F5 运行程序，界面如下：
在这里插入图片描述
问题：在 RibbonMarkup.xml 文件里和 ImageList 属性里，都设置了 Gallery 项的大小为 76x76，而且图片的实际尺寸也是 76x76，但是显示出来的大小却是 32x32，不知道为什么，没有找到原因。

有关 Gallery 控件的用法，可参考 Windows Ribbon for WinForms, Part 11 – DropDownGallery, SplitButtonGallery and InRibbonGallery。

插入

<Command Name="GroupInsert" LabelTitle="插入" Id="24000"/>
<Command Name="InsertPictureFromFileButton" Id="24010" LabelTitle="图片">
  <Command.TooltipTitle>插入图片</Command.TooltipTitle>
  <Command.TooltipDescription>插入一个来自文件的图片。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/InsertPictureFromFile.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/InsertPictureFromFile.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="ReplacePictureFromFileButton" Id="24011" LabelTitle="更改图片">
  <Command.TooltipDescription>更改为另一个图片，但保留当前图片的格式和大小。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/FormatAlbumShuffleCoverPictures.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/FormatAlbumShuffleCoverPictures.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="FormatImageSizeGroupButton" Id="24012" LabelTitle="调整图片大小">
  <Command.TooltipDescription>在纵横比锁定的情况下缩放当前图片的高度和宽度或者单独缩放。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/FormatImageSizeGroup.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/FormatImageSizeGroup.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="PaintButton" Id="24020" LabelTitle="绘图">
  <Command.TooltipTitle>插入绘图(Ctrl+D)</Command.TooltipTitle>
  <Command.TooltipDescription>插入在 Microsoft 画图中创建的绘图。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/Paint60335.png"/>
  </Command.LargeImages>
</Command>
<Command Name="DateAndTimeInsertButton" Id="24030" LabelTitle="日期和时间">
  <Command.TooltipTitle>插入日期和时间</Command.TooltipTitle>
  <Command.TooltipDescription>单击此处可获得日期和时间格式选项。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/DateAndTimeInsert.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/DateAndTimeInsert.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="ObjectButton" Id="24040" LabelTitle="插入对象">
  <Command.TooltipTitle>插入对象</Command.TooltipTitle>
  <Command.TooltipDescription>显示“插入对象”对话框。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/Object60351.png"/>
  </Command.LargeImages>
</Command>

<Group CommandName="GroupInsert" SizeDefinition="FourButtons">
  <SplitButton>
    <SplitButton.ButtonItem>
      <Button CommandName="InsertPictureFromFileButton"/>
    </SplitButton.ButtonItem>
    <SplitButton.MenuGroups>
      <MenuGroup>
        <Button CommandName="InsertPictureFromFileButton"/>
        <Button CommandName="ReplacePictureFromFileButton"/>
        <Button CommandName="FormatImageSizeGroupButton"/>
      </MenuGroup>
    </SplitButton.MenuGroups>
  </SplitButton>
  <Button CommandName="PaintButton"/>
  <Button CommandName="DateAndTimeInsertButton"/>
  <Button CommandName="ObjectButton"/>
</Group>

在这里插入图片描述

编辑

<Command Name="GroupEdit" Id="25000" LabelTitle="编辑"/>
<Command Name="FindButton" Id="25010" LabelTitle="查找">
  <Command.TooltipTitle>查找(Ctrl+F)</Command.TooltipTitle>
  <Command.TooltipDescription>在文档中查找文本。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/FindButton.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/FindButton.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="ReplaceDialogButton" Id="25020" LabelTitle="替换">
  <Command.TooltipTitle>替换(Ctrl+H)</Command.TooltipTitle>
  <Command.TooltipDescription>替换文档中的文本。</Command.TooltipDescription>
  <Command.LargeImages>
    <Image Source="Images/ReplaceDialog.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/ReplaceDialog.SmallImage.png"/>
  </Command.SmallImages>
</Command>
<Command Name="SelectAllButton" Id="25030" LabelTitle="全选">
  <Command.TooltipTitle>全选(Ctrl+A)</Command.TooltipTitle>
  <Command.LargeImages>
    <Image Source="Images/SelectAll.LargeImage.png"/>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image Source="Images/SelectAll.SmallImage.png"/>
  </Command.SmallImages>
</Command>

<Group CommandName="GroupEdit">
  <Button CommandName="FindButton"/>
  <Button CommandName="ReplaceDialogButton"/>
  <Button CommandName="SelectAllButton"/>
</Group>

在这里插入图片描述

编辑的 <Group> 节点没有设置 SizeDefinition 属性，呈现的是默认布局。

应用菜单

<Command Name="ApplicationMenu" Id="10000"/>
<Command Name="NewButton" Id="10010"
		 LabelTitle="新建"
		 TooltipTitle="新建(Ctrl+N)"
		 TooltipDescription="创建新文档。">
  <Command.LargeImages>
    <Image>Images/NewPage.LargeImage.png</Image>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image>Images/NewPage.SmallImage.png</Image>
  </Command.SmallImages>
</Command>
<Command Name="OpenButton" Id="10020"
		 LabelTitle="打开"
		 TooltipTitle="打开(Ctrl+O)"
		 TooltipDescription="打开现有文档。">
  <Command.LargeImages>
    <Image>Images/OpenPost.LargeImage.png</Image>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image>Images/OpenPost.SmallImage.png</Image>
  </Command.SmallImages>
</Command>
<Command Name="SaveButton" Id="10030"
		 LabelTitle="保存"
		 TooltipTitle="保存(Ctrl+S)"
		 TooltipDescription="保存活动文档。">
  <Command.LargeImages>
    <Image>Images/Save.LargeImage.png</Image>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image>Images/Save.SmallImage.png</Image>
  </Command.SmallImages>
</Command>
<Command Name="SaveAsButton" Id="10040"
		 LabelTitle="另存为"
		 TooltipDescription="用新名称或格式保存文档。">
  <Command.LargeImages>
    <Image>Images/SaveAs.LargeImage.png</Image>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image>Images/SaveAs.SmallImage.png</Image>
  </Command.SmallImages>
</Command>
<Command Name="SaveAsItemsButton" LabelTitle="保存文档的副本"/>
<Command Name="SaveAsRtfButton"
		 LabelTitle="RTF 文本文档"
		 LabelDescription="以 RTF 格式保存文档。">
  <Command.LargeImages>
    <Image>Images/RTF60076.png</Image>
  </Command.LargeImages>
</Command>
<Command Name="SaveAsDocxButton"
		 LabelTitle="Office Open XML 文档"
		 LabelDescription="以 Office Open XML 格式保存文档。">
  <Command.LargeImages>
    <Image>Images/Docx60189.png</Image>
  </Command.LargeImages>
</Command>
<Command Name="SaveAsOdtButton"
		 LabelTitle="OpenDocument 文档"
		 LabelDescription="以 OpenDocument 格式保存文档。">
  <Command.LargeImages>
    <Image>Images/Odt60196.png</Image>
  </Command.LargeImages>
</Command>
<Command Name="SaveAsTextButton"
		 LabelTitle="纯文本文档"
		 LabelDescription="将文档另存为没有换行符或格式的纯文本。">
  <Command.LargeImages>
    <Image>Images/Text60085.png</Image>
  </Command.LargeImages>
</Command>
<Command Name="SaveAsOtherButton"
		 LabelTitle="其他格式"
		 LabelDescription="打开“另存为”对话框从所有可能的文件类型中进行选择。">
  <Command.LargeImages>
    <Image>Images/SaveAs.LargeImage.png</Image>
  </Command.LargeImages>
</Command>
<Command Name="PrintButton" Id="10050"

LabelTitle="打印"

LabelDescription="在打印之前，选择打印机、份数以及其他打印选项。"

TooltipTitle="打印(Ctrl+P)"

TooltipDescription="打印当前文档。">

<Command.LargeImages>

<Image>Images/Print.LargeImage.png</Image>

</Command.LargeImages>

<Command.SmallImages>

<Image>Images/Print.SmallImage.png</Image>

</Command.SmallImages>

</Command>

<Command Name="PrintItemsButton" LabelTitle="预览并打印文档"/>

<Command Name="PrintFastButton"

LabelTitle="快速打印"

LabelDescription="将文档直接发送到默认打印机，而不进行任何更改。">

<Command.LargeImages>

<Image>Images/Print60109.png</Image>

</Command.LargeImages>

</Command>

<Command Name="PrintPreviewButton"

LabelTitle="打印预览"

LabelDescription="打印之前进行预览并对页面进行更改。">

<Command.LargeImages>

<Image>Images/PrintPreview.LargeImage.png</Image>

</Command.LargeImages>

</Command>

<Command Name="PageSetupButton" Id="10060"

LabelTitle="页面设置(&amp;G)"

TooltipTitle="页面设置"

TooltipDescription="更改页面布局设置。">

<Command.LargeImages>

<Image>Images/Print60125.png</Image>

</Command.LargeImages>

</Command>

<Command Name="MailButton" Id="10070"

LabelTitle="在电子邮件中发送(&amp;D)"

TooltipDescription="在电子邮件中以附件形式发送文档副本。">

<Command.LargeImages>

<Image>Images/EnvelopesAndLabels.LargeImage.png</Image>

</Command.LargeImages>

</Command>
<Command Name="AboutButton" Id="10080" LabelTitle="关于写字板">

<Command.LargeImages>

<Image>Images/About.LargeImage.png</Image>

</Command.LargeImages>

<Command.SmallImages>

<Image>Images/About.SmallImage.png</Image>

</Command.SmallImages>

</Command>

<Command Name="ExitButton" Id="10090" LabelTitle="退出" TooltipDescription="退出写字板。">

<Command.LargeImages>

<Image>Images/Close.LargeImage.png</Image>

</Command.LargeImages>

<Command.SmallImages>

<Image>Images/Close.SmallImage.png</Image>

</Command.SmallImages>

</Command>
<Command Name="RecentItems" LabelTitle="最近使用的文档" />

<Ribbon.ApplicationMenu>
  <ApplicationMenu CommandName="ApplicationMenu">
    <ApplicationMenu.RecentItems>
      <RecentItems CommandName="RecentItems" EnablePinning="false" MaxCount="10" />
    </ApplicationMenu.RecentItems>
    <MenuGroup>
      <Button CommandName='NewButton' />
      <Button CommandName='OpenButton' />
      <Button CommandName='SaveButton' />
      <SplitButton>
        <SplitButton.ButtonItem>
          <Button CommandName='SaveAsButton' />
        </SplitButton.ButtonItem>
        <SplitButton.MenuGroups>
          <MenuGroup CommandName='SaveAsItemsButton' Class='MajorItems'>
            <Button CommandName='SaveAsRtfButton' />
            <Button CommandName='SaveAsDocxButton' />
            <Button CommandName='SaveAsOdtButton' />
            <Button CommandName='SaveAsTextButton' />
            <Button CommandName='SaveAsOtherButton' />
          </MenuGroup>
        </SplitButton.MenuGroups>
      </SplitButton>
    </MenuGroup>
    <MenuGroup>
      <SplitButton>
        <SplitButton.ButtonItem>
          <Button CommandName='PrintButton' />
        </SplitButton.ButtonItem>
        <SplitButton.MenuGroups>
          <MenuGroup CommandName='PrintItemsButton' Class='MajorItems'>
            <Button CommandName='PrintButton' />
            <Button CommandName='PrintFastButton' />
            <Button CommandName='PrintPreviewButton' />
          </MenuGroup>
        </SplitButton.MenuGroups>
      </SplitButton>
      <Button CommandName='PageSetupButton' />
      <Button CommandName='MailButton' />
    </MenuGroup>
    <MenuGroup>
      <Button CommandName='AboutButton' />
      <Button CommandName='ExitButton' />
    </MenuGroup>
  </ApplicationMenu>
</Ribbon.ApplicationMenu>

在这里插入图片描述

有关应用菜单的用法，可参考 Windows Ribbon for WinForms, Part 4 – Application Menu with Buttons

快速访问工具栏

<Command Name="UndoButton"
		 LabelTitle="撤销"
		 TooltipTitle="撤销(Ctrl+Z)"
		 TooltipDescription="撤销上一个操作。">
  <Command.LargeImages>
    <Image>Images/Undo.LargeImage.png</Image>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image>Images/Undo.SmallImage.png</Image>
  </Command.SmallImages>
</Command>
<Command Name="RedoButton"
		 LabelTitle="重做"
		 TooltipTitle="重做(Ctrl+Y)"
		 TooltipDescription="重复上一个操作。">
  <Command.LargeImages>
    <Image>Images/Redo.LargeImage.png</Image>
  </Command.LargeImages>
  <Command.SmallImages>
    <Image>Images/Redo.SmallImage.png</Image>
  </Command.SmallImages>
</Command>

<Ribbon.QuickAccessToolbar>
  <QuickAccessToolbar>
    <QuickAccessToolbar.ApplicationDefaults>
      <Button CommandName="NewButton" ApplicationDefaults.IsChecked="true" />
      <Button CommandName="OpenButton" ApplicationDefaults.IsChecked="true" />
      <Button CommandName="SaveButton" ApplicationDefaults.IsChecked="true" />
      <Button CommandName='MailButton' ApplicationDefaults.IsChecked="false" />
      <Button CommandName='PrintFastButton' ApplicationDefaults.IsChecked="false" />
      <Button CommandName='PrintPreviewButton' ApplicationDefaults.IsChecked="false" />
      <Button CommandName="UndoButton" ApplicationDefaults.IsChecked="true" />
      <Button CommandName="RedoButton" ApplicationDefaults.IsChecked="true" />
    </QuickAccessToolbar.ApplicationDefaults>
  </QuickAccessToolbar>
</Ribbon.QuickAccessToolbar>

在这里插入图片描述

有关快速访问工具栏的用法，可参考 Windows Ribbon for WinForms, Part 20 – QuickAccessToolbar

源码下载

https://download.csdn.net/download/blackwoodcliff/11645212

参考

                                </div>

转载：https://blog.csdn.net/blackwoodcliff/article/details/99660387

posted @ 2020-03-02 12:57 而今迈步阅读(1472) 评论(1) 编辑收藏举报

刷新页面返回顶部

而今迈步

Windows Ribbon for WinForms 开发实例

下载 Windows Ribbon for WinForms

创建 WinForms 程序

添加 Ribbon 项目

生成 Ribbon 控件

将 Ribbon 控件添加到窗体

添加 Ribbon Markup 文件

配置自动编译 Ribbon Markup 文件

生成 RibbonMarkup.ribbon 文件

包含 RibbonMarkup.ribbon 文件

关联 RibbonMarkup.ribbon 文件到控件

运行程序

Ribbon Markup 文件结构

剪贴板

剪切、复制、粘贴按钮的事件处理

添加命名空间

添加按钮定义

添加按钮事件

字体

段落

添加列表 Gallery 项

添加 ImageList

添加命名空间

添加按钮定义

添加按钮事件

插入

编辑

应用菜单

快速访问工具栏

源码下载

参考

公告