為Ribbon界面的按鈕添加自定義圖像

上一節我們介紹了在Ribbon界面上添加按鈕並響應按鈕事件的過程，我們也看到了沒有圖像按鈕看上去不是那么美觀，因此添加上我們自己喜歡的圖案成要當務之急。在為按鈕添加圖案，就要用到我們上節添加的另一個回調函數GetImage，它的聲明如下：

function GetImage(const ctrl: IDispatch): IDispatch; safecall;

根據微軟的定義，Ctrl是要獲取圖像的按鈕的IRibbonControl接口，我們要根據它的ID來判斷誰要獲取圖片，返回值是圖片對象的IPictureDisp接口，要想正確返回這個接口，我們就要對常規圖像進行轉換，獲取IPictureDisp接口后返回。

關於GetImage這個回調函數的定義在這里要多說兩句，我當初在這里費了不少時間才找到正確的定義方法。詳見下圖：

一定要選中圖中的 [out, retval]才行，我也是試了很多次才發現的。

本節我們決定從資源文件中載入圖片，然后轉換后返回給Office，關於資源文件編輯與添加在這里我就不多說的，網上有很多相關的教程。我們在資源文件中添加了兩個BMP文件，資源名稱同前面定義的按鈕的ID一樣，分別為“btn1”、“btn2”，然后寫一個函數進行圖片轉換並獲得IPictureDisp接口，函數內容如下：

function GetPictureFromRes(const Name: WideString): IPictureDisp; var pic: TPicture; Ipic: IPictureDisp; begin
  try pic := TPicture.Create; pic.Bitmap.LoadFromResourceName(HInstance, name); GetOlePicture(pic, Ipic); Result := Ipic; except Result := nil; end; end; ｛要添加對Graphics和AxCtrls單元的引用才行｝

這個函數負責根據提供的資源名稱name載入相應的資源圖片，然后通過GetOlePicture函數獲得IPictureDisp接口，如果失敗會返回空指針。

我們的GetImage函數的實現如下：

function TTestRibbon.GetImage(const ctrl: IDispatch): IDispatch; begin Result:=GetPictureFromRes((ctrl as IRibbonControl).Id) as IDispatch; end;

 

根據按鈕ID獲取資源圖片接口，然后轉換成IDispatch接口返回。

到此處再編譯我們的工程，然后打開Word或WPS就可以看到我們定義了圖片的按鈕。

除了添加自定義圖像，我們也可以給按鈕添加Office系統自帶的圖片,這只需在XML中定義就可以了，具體來說是定義button的imageMso屬性。比如以下語句就可以添加一個擁有系統“復制”按鈕圖標的按鈕“我的復制”：

<button id="btn3" label="我的復制" screentip="我的復制" onAction="OnAction" imageMso="Copy"/>

Screentip屬性就是當我們的鼠標移到按鈕上時顯示的提示信息。

我們也可以添加一個擁有系統功能的按鈕，只需定義button的idMso屬性就可以了，如下語句可以直接添加系統的“剪切”、“復制”、“粘貼”功能：

              
                    <button idMso="Cut"/> 
                    <button idMso="Copy"/> 
                    <button idMso="Paste"/> 

至於怎么知道這個功能或圖片的名稱，可以參考下圖的提示，打開word的選項——自定義，鼠標放到我們需要的功能上，提示信息的英文部分就是我們要的名稱。

我們修改后的CustomUI.XML文件內容如下：

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
    <ribbon startFromScratch="false">
        <tabs>
            <tab id="DemoTab" label="育林軟件">
                <group id="loadFormsGroup" label="測試分組">
                    <button id="btn1" label="測試功能" screentip="測試功能" onAction="OnAction" getImage="GetImage"/>
                    <button id="btn2" label="關於我們" screentip="關於我們" onAction="OnAction" getImage="GetImage"/>
                    <button id="btn3" label="我的復制" screentip="我的復制" onAction="OnAction" imageMso="Copy"/>    
                    <button idMso="Cut"/> 
                    <button idMso="Copy"/> 
                    <button idMso="Paste"/> 
                </group>
            </tab>
        </tabs>
    </ribbon>
</customUI>

運行Word和WPS就可以看到如下的界面。

【原創文章，轉載請注明出處】

 

本教程全部代碼與資源文件下載：

http://pan.baidu.com/s/1eQrSOSE