您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> 關於.NET

Windows Ribbon 框架開發全攻略：從空白功能區到自適應佈局實戰

編輯：關於.NET

前言：Ribbon 介面的現代化優勢

Windows Ribbon 框架為傳統 Win32 桌面應用帶來 Office 風格的現代化命令介面。其核心架構採用 標記與程式碼分離：XML 定義結構、控制項組織與資源；C++ COM 介面負責初始化與事件處理。這種分離讓 UI 設計與業務邏輯獨立演進，大幅降低維護成本。

開發環境需求

Visual Studio 2005 或更新版本（Express 版功能受限）
Windows 7 SDK (v7.0 RC Build 或更新)
建議先安裝 VS 再安裝 SDK，避免版本衝突

核心術語速覽

Application Menu：左上角主選單
Quick Access Toolbar (QAT)：快速存取工具列
Tab：選項卡（如「首頁」、「插入」）
Group：群組（選項卡內的功能分區）
Control：控制項（按鈕、核取方塊、切換按鈕等）
Command：命令（邏輯動作實體，與控制項解耦）

練習一：建立空白功能區並整合至應用程式

任務 1-2：建立專案與基礎標記檔

建立 Win32 專案 RibbonApp
新增 ribbonmarkup.xml，定義最小功能區結構：

<Application xmlns="https://schemas.microsoft.com/windows/2009/Ribbon">
  <Application.Commands>
    <Command Name="TabHome" Symbol="cmdTabHome" Id="30000" />
  </Application.Commands>
  <Application.Views>
    <Ribbon>
      <Ribbon.Tabs>
        <Tab CommandName="TabHome" />
      </Ribbon.Tabs>
    </Ribbon>
  </Application.Views>
</Application>

任務 3：配置 VS 自動編譯標記

對 ribbonmarkup.xml 設定自訂建置步驟：

命令列: uicc.exe ribbonmarkup.xml ribbonmarkup.bml /res:ribbonres.rc
輸出: ribbonmarkup.bml;ribbonres.rc

uicc.exe 將 XML 編譯為二進位標記 (.bml) 與資源腳本 (.rc)，再將 #include "ribbonres.rc" 加入專案 .rc 檔。

任務 4-7：建立宿主類別、初始化與銷毀功能區

專案啟用 ATL（靜態或動態連結）
新增 Ribbon.cpp 實作 IUIApplication 介面（三方法暫回傳 E_NOTIMPL）
全域 IUIFramework* g_pFramework，InitRibbon(HWND) 執行：
1. CoCreateInstance(CLSID_UIRibbonFramework) 取得框架指標
2. 建立 CApplication 物件
3. g_pFramework->Initialize(hWnd, pApplication)
4. g_pFramework->LoadUI(GetModuleHandle(NULL), L"APPLICATION_RIBBON")
在 _tWinMain 初始化 COM、呼叫 InitRibbon、WM_DESTROY 時呼叫 DestroyRibbon（Destroy() + Release()）
視窗樣式加入 WS_CLIPCHILDREN 消除調整大小時閃爍

練習二：加入控制項、資源與命令處理

任務 1-2：加入按鈕與設定標籤/提示/圖示

在 <Application.Commands> 新增 GroupMain、MyButton 命令
在 <Tab> 內新增 <Group> 與 <Button>
設定自訂建置步驟產生 ribbonres.h（/header:ribbonres.h），包含命令符號定義
加入點陣圖資源，於命令定義中設定 LabelTitle、TooltipTitle/Description、LargeImages

任務 3：實作按鈕點擊事件

CApplication 繼承 IUICommandHandler
實作 Execute：判斷 nCmdID == cmdMyButton 彈出訊息方塊
OnCreateUICommand 對特定命令回傳 QueryInterface 指標

任務 4-5：核取方塊與切換按鈕互換

標記中將 <CheckBox> 改為 <ToggleButton>，C++ 程式碼完全不用修改，因兩者命令類型相同。

任務 6：群組尺寸定義模板

為 GroupMain 加入 SizeDefinition="TwoButtons"，大按鈕並排顯示。

任務 7-8：切換按鈕控制按鈕啟用/停用與動態標籤更新

類別新增 BOOL _fEnabled 狀態旗標
Execute 中透過 GetUICommandProperty/SetUICommandProperty 切換 UI_PKEY_Enabled 屬性
連結 propsys.lib 使用屬性輔助 API
實作 UpdateProperty：當 key == UI_PKEY_Label 時依狀態回傳「啟用按鈕」/「停用按鈕」
呼叫 InvalidateUICommand 觸發標籤重繪

練習三：進階控制項組織與自適應縮放策略

任務 1：新增多個群組與控制項

新增 GroupDatabase（三大按鈕）、GroupClipboard（大按鈕+小按鈕組合）
使用 ControlGroup 組織小按鈕
引入大/小圖示資源（LargeImages/SmallImages）

任務 2：定義縮放政策

<Tab.ScalingPolicy>
  <ScalingPolicy>
    <ScalingPolicy.IdealSizes>
      <Scale Group="GroupMain" Size="Large"/>
      <Scale Group="GroupDatabase" Size="Large"/>
      <Scale Group="GroupClipboard" Size="Large"/>
    </ScalingPolicy.IdealSizes>
    <Scale Group="GroupClipboard" Size="Medium"/>
    <Scale Group="GroupClipboard" Size="Popup"/>
    <Scale Group="GroupDatabase" Size="Medium"/>
  </ScalingPolicy>
</Tab.ScalingPolicy>

行為：視窗縮小時，Clipboard 群組優先縮小（標籤消失→彈出式），Database 群組轉小按鈕垂直排列，最終功能區自動隱藏騰出工作區空間。