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")"

   
   
  
  
          

  
  
 
 
         

注：

1. 其中 RibbonMarkup.ribbon 是我們最終需要的編譯之后的目標文件
2. 由於操作系統不同，及安裝的 Windows SDK 不同，UICC.exe 和 rc.exe 所在的文件夾可能不同
3. 由於使用了 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 的詳細說明，可參考如下鏈接：

• Customizing a Ribbon Through Size Definitions and Scaling Policies
• Windows Ribbon for WinForms, Part 21 – SizeDefinition

剪切、復制、粘貼按鈕的事件處理

Ribbon Markup 文件定義了 Ribbon 有哪些按鈕，以及按鈕的布局方式，對於按鈕的事件處理，需要通過后台代碼實現。

添加命名空間

using RibbonLib.Controls;

   
   
  
  
          

  
  
 
 
         

添加按鈕定義

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

參考

• Windows Ribbon for WinForms 使用記錄
• 在WinForm使用Ribbon UI
• Windows 功能區
• Windows Ribbon Framework
• Windows Ribbon: Samples
• Windows Ribbon for WinForms, Part 0 – Table of Contents
• Windows Ribbon for WinForms, Part 1 – Introduction
• Windows Ribbon for WinForms, Part 2 - Basic Ribbon Wrapper
• Windows Ribbon for WinForms, Part 3 - First WinForms Ribbon Application
• Windows Ribbon for WinForms, Part 4 - Application Menu with Buttons
• Windows Ribbon for WinForms, Part 5 - Application Menu with SplitButton and DropButton
• Windows Ribbon for WinForms, Part 6 – Tabs, Groups and HelpButton
• Windows Ribbon for WinForms, Part 7 – Spinner
• Windows Ribbon for WinForms, Part 8 – ComboBox
• Windows Ribbon for WinForms, Part 9 – Changing Ribbon Colors
• Windows Ribbon for WinForms, Part 10 – Working With Images
• Windows Ribbon for WinForms, Part 11 – DropDownGallery, SplitButtonGallery, and InRibbonGallery
• Windows Ribbon for WinForms, Part 12 – CheckBox and ToggleButton
• Windows Ribbon for WinForms, Part 13 – DropDownColorPicker
• Windows Ribbon for WinForms, Part 14 – FontControl
• Windows Ribbon for WinForms, Part 15 – Use Ribbon as External DLL
• Windows Ribbon for WinForms, Part 16 – ApplicationModes
• Windows Ribbon for WinForms, Part 17 – Contextual Tabs
• Windows Ribbon for WinForms, Part 18 – ContextPopup
• Windows Ribbon for WinForms, Part 19 – RecentItems
• Windows Ribbon for WinForms, Part 20 – QuickAccessToolbar
• Windows Ribbon for WinForms, Part 21 – SizeDefinition

                                </div>

轉載：https://blog.csdn.net/blackwoodcliff/article/details/99660387