共用方式為

逐步解說：更新 MFC Scribble 應用程式 （第 2 部分）

本逐步解說的第 1 部分示範如何將 Office Fluent 功能區新增至傳統 Scribble 應用程式。 此部分示範如何新增使用者可以使用的功能區面板和控件，而不是功能表和命令。

先決條件

Visual C++ 範例

章節

本逐步解說的這個部分有下列各節：

將新面板新增至功能區

這些步驟示範如何新增包含兩個複選框的 [檢視 ] 面板，以控制工具列和狀態列的可見性，以及包含垂直方向分割按鈕的 視窗 面板，可控制多文檔介面 （MDI） 視窗的建立和排列。

將 [檢視] 面板和 [視窗] 面板新增至功能區列

  1. 建立名為 View的面板，其有兩個複選框可切換狀態列和工具列。

    1. 從 工具箱 將 面板 拖曳至 常用 類別。 然後將兩個 複選框 拖曳至面板。

    2. 按面板以修改屬性。 將 Caption 變更為 View。

    3. 按兩下第一個複選框來修改其屬性。 將 [識別元] 變更為 ID_VIEW_TOOLBAR ，並將 [標題] 變更為 Toolbar。

    4. 按兩下第二個複選框來修改其屬性。 將 [識別元] 變更為 ID_VIEW_STATUS_BAR ，並將 [標題] 變更為 Status Bar。

  2. 建立名為 Window 且具有分割按鈕的面板。 當使用者按下分割按鈕時，快捷方式功能表會顯示已在Scribble 應用程式中定義的三個命令。

    1. 從 工具箱 將 面板 拖曳至 常用 類別。 然後將 [按鈕 ] 拖曳至面板。

    2. 按面板以修改屬性。 將 Caption 變更為 Window。

    3. 按一下 按鈕。 將 [標題 ] 變更為 Windows、 [索引鍵 ] 變更 w為 、 將 [大型影像索引 ] 變更為 1，並將 [分割模式 ] 變更為 False。 然後單擊功能表項旁的省略號 （...），以開啟 [項目編輯器] 對話框。

    4. 按兩下 [ 新增 三次] 以新增三個按鈕。

    5. 按下第一個按鈕，然後將 [標題 ] 變更為 New Window，並將 [ 標識符] 變更為 ID_WINDOW_NEW。

    6. 按下第二個按鈕，然後將 [標題] 變更為 Cascade，並將 [ 標識符] 變更為 ID_WINDOW_CASCADE。

    7. 按下第三個按鈕，然後將 [標題 ] 變更為 Tile，並將 [ 標識符 ] 變更為 ID_WINDOW_TILE_HORZ。

  3. 儲存變更，然後建置並執行應用程式。 應該顯示 [檢視 ] 和 [ 視窗 ] 面板。 按兩下按鈕以確認它們正常運作。

將說明面板新增至功能區

現在，您可以將 Scribble 應用程式中定義的兩個功能表項指派給名為 [說明主題 ] 和 [ 關於 Scribble] 的功能區按鈕。 按鈕會新增至名為 [說明] 的新面板。

如需新增說明面板

  1. 從 工具箱 將 面板 拖曳至 常用 類別。 然後將兩個 按鈕 拖曳到面板。

  2. 按面板以修改屬性。 將 Caption 變更為 Help。

  3. 按兩下第一個按鈕。 將 [標題] 變更為 Help Topics，並將 [標識元] 變更為 ID_HELP_FINDER。

  4. 按兩下第二個按鈕。 將 [標題] 變更為 About Scribble...，並將 [標識元] 變更為 ID_APP_ABOUT。

  5. 儲存變更，然後建置並執行應用程式。 應該顯示包含兩個功能區按鈕的 [說明 ] 面板。

    這很重要

    當您按兩下 [說明主題] 按鈕時，Scribble 應用程式會開啟名為 your_project_name.chm 的壓縮 HTML （.chm） 說明檔。 因此，如果您的專案未命名為 Scribble，您必須將說明檔重新命名為專案名稱。

將畫筆面板新增至功能區

現在，新增面板來顯示控制畫筆粗細和色彩的按鈕。 此面板包含一個複選框，可在粗細的手寫筆之間切換。 其功能類似於 Scribble 應用程式中的 粗線 功能表項。

原始的 Scribble 應用程式可讓使用者從使用者單擊功能表上的 [手寫筆寬度 ] 時出現的對話框選取畫筆寬度。 由於功能區有足夠空間容納新控件，因此您可以在功能區上使用兩個下拉式方塊來替代對話方塊。 一個下拉式方塊會調整細筆的寬度，另一個下拉式方塊會調整粗筆的寬度。

將筆工具面板和下拉式方塊新增至功能區

  1. 從 工具箱 將 面板 拖曳至 常用 類別。 然後將 複選框 和兩個 下拉式方塊 拖曳到面板。

  2. 按面板以修改屬性。 將 Caption 變更為 Pen。

  3. 按兩下複選框。 將 [標題] 變更為 Use Thick，並將 [標識元] 變更為 ID_PEN_THICK_OR_THIN。

  4. 點擊第一個下拉式選單。 將 標題 變更為 Thin Pen，標識符 變更為 ID_PEN_THIN_WIDTH，類型 變更為 Drop List，數據 變更為 1;2;3;4;5;6;7;8;9;，並將 文字 變更為 2。

  5. 點擊第二個下拉式選單。 將 標題 變更為 Thick Pen，標識符 變更為 ID_PEN_THICK_WIDTH，類型 變更為 Drop List，數據 變更為 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;，並將 文字 變更為 5。

  6. 新的組合方塊不會對應至任何現有的功能表項，因此您必須為每個筆選項建立功能表項。

    1. 在 [ 資源檢視] 視窗中，開啟 IDR_SCRIBBTYPE 功能表資源。

    2. 單擊 [畫筆 ] 以開啟畫筆功能表。 然後按下 [在這裡輸入] ，然後輸入 Thi&n Pen。

    3. 以滑鼠右鍵按下您輸入以開啟 [ 屬性 ] 視窗的文字，然後將 ID 屬性變更為 ID_PEN_THIN_WIDTH。

    4. 為每個畫筆功能表項建立事件處理程式。 以滑鼠右鍵按下您建立的 [Thi&n Pen ] 功能表項，然後按兩下 [ 新增事件處理程式]。 [ 事件處理程序精靈 ] 隨即顯示。

    5. 在精靈的 [ 類別] 列表 框中，選取 [CScribbleDoc ]，然後按兩下 [ 新增和編輯]。 此命令會建立名為的 CScribbleDoc::OnPenThinWidth事件處理程式。

    6. 將下列程式碼新增至 CScribbleDoc::OnPenThinWidth。

      // Get a pointer to the ribbon bar
CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

// Get a pointer to the Thin Width combo box
CMFCRibbonComboBox* pThinComboBox = DYNAMIC_DOWNCAST(
CMFCRibbonComboBox, pRibbon->FindByID(ID_PEN_THIN_WIDTH));

//Get the selected value
int nCurSel = pThinComboBox->GetCurSel();
if (nCurSel>= 0)
{
    m_nThinWidth = atoi(CStringA(pThinComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();

  7. 接下來，建立粗線筆的選單項目和事件處理程式。

    1. 在 [ 資源檢視] 視窗中，開啟 IDR_SCRIBBTYPE 功能表資源。

    2. 單擊 [畫筆 ] 以開啟畫筆功能表。 然後按下 [在這裡輸入] ，然後輸入 Thic&k Pen。

    3. 以滑鼠右鍵按下您輸入的文字來顯示 [ 屬性 ] 視窗。 將 ID 屬性變更為 ID_PEN_THICK_WIDTH。

    4. 以滑鼠右鍵按下您建立的 [粗筆] 功能表項，然後按下 [ 新增事件處理程式]。 [ 事件處理程序精靈 ] 隨即顯示。

    5. 在精靈的 [ 類別] 列表 框中，選取 [CScribbleDoc ]，然後按兩下 [ 新增和編輯]。 此命令會建立名為的 CScribbleDoc::OnPenThickWidth事件處理程式。

    6. 將下列程式碼新增至 CScribbleDoc::OnPenThickWidth。

      // Get a pointer to the ribbon bar
CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx *) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

CMFCRibbonComboBox* pThickComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox, pRibbon->FindByID(ID_PEN_THICK_WIDTH));
// Get the selected value
int nCurSel = pThickComboBox->GetCurSel();
if (nCurSel>= 0)
{
    m_nThickWidth = atoi(CStringA(pThickComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();

  8. 儲存變更，然後建置並執行應用程式。 應該顯示新的按鈕和下拉式組合框。 請嘗試使用不同的手寫筆寬度來塗鴉。

將色彩按鈕新增至畫筆面板

接下來，新增 CMFCRibbonColorButton 物件，讓使用者以色彩標示。

將色彩按鈕新增至畫筆面板

  1. 新增色彩按鈕之前，請先為其建立功能表項。 在 [ 資源檢視] 視窗中，開啟 IDR_SCRIBBTYPE 功能表資源。 單擊 [畫筆 ] 功能表項以開啟畫筆功能表。 然後按下 [在這裡輸入] ，然後輸入 &Color。 以滑鼠右鍵按下您輸入的文字來顯示 [ 屬性 ] 視窗。 將識別碼變更為 ID_PEN_COLOR。

  2. 現在新增色彩按鈕。 從 [工具箱] 將 [色彩按鈕 ] 拖曳至 [畫筆 ] 面板。

  3. 按兩下色彩按鈕。 將 標題 變更為 Color，將 標識符 變更為 ID_PEN_COLOR，將 簡單外觀 變更為 True，將 大型影像索引 變更為 1，並將 分割模式 變更為 False。

  4. 儲存變更，然後建置並執行應用程式。 新的色彩按鈕應該會顯示在 [畫筆 ] 面板上。 不過，無法使用，因為它還沒有事件處理程式。 後續步驟示範如何新增色彩按鈕的事件處理程式。

將色彩成員新增至文件類別

由於原始 Scribble 應用程式沒有彩色畫筆，因此您必須為其撰寫實作。 若要儲存檔案的畫筆色彩，請將新成員新增至檔案類別 CscribbleDoc

若要將色彩成員新增至文件類別

  1. 在 scribdoc.h 中的類別 CScribbleDoc ，尋找區段 // Attributes。 在數據成員的定義 m_nThickWidth 之後，新增下列幾行程序代碼。

    // Current pen color
COLORREF m_penColor;

  2. 每份檔都包含使用者已繪製的一份戳記清單。 每個筆劃都是由 CStroke 對象定義。 類別 CStroke 不包含畫筆色彩的相關信息，因此您必須修改 類別。 在 scribdoc.h 的 CStroke 類別中，於數據成員的定義 m_nPenWidth 之後新增下列幾行程式代碼。

    // Pen color for the stroke
COLORREF m_penColor;

  3. 在 scribdoc.h 中，新增參數指定寬度和色彩的新 CStroke 建構函式。 在語句CStroke(UINT nPenWidth);的後面新增下列程式代碼行。

    CStroke(UINT nPenWidth, COLORREF penColor);

  4. 在 scribdoc.cpp 中，新增新 CStroke 建構函式的實作。 在完成建構函式 CStroke::CStroke(UINT nPenWidth) 的實作後，新增下列程式碼。

    // Constructor that uses the document's current width and color
CStroke::CStroke(UINT nPenWidth, COLORREF penColor)
{
    m_nPenWidth = nPenWidth;
    m_penColor = penColor;
    m_rectBounding.SetRectEmpty();
}

  5. 將CStroke::DrawStroke方法的第二行變更如下所示。

    if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))

  6. 設定檔案類別的預設畫筆色彩。 在 scribdoc.cpp 中，將下列幾行新增至 CScribbleDoc::InitDocument，位於 m_nThickWidth = 5; 語句之後。

    // default pen color is black
m_penColor = RGB(0, 0, 0);

  7. 在 scribdoc.cpp 中，將 CScribbleDoc::NewStroke 方法的第一行更改為以下內容。

    CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);

  8. 將方法的最後一行 CScribbleDoc::ReplacePen 變更為下列內容。

    m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);

  9. 您已在上一個步驟中新增 m_penColor 成員。 現在，為設定成員的色彩按鈕建立事件處理程式。

    1. 在 [ 資源檢視] 視窗中，開啟IDR_SCRIBBTYPE功能表資源。

    2. 以滑鼠右鍵按兩下 [色彩] 選單項，然後按下 [ 新增事件處理程式]。 [事件處理程序精靈] 隨即出現。

    3. 在精靈的 [ 類別] 列表 框中，選取 [CScribbleDoc ]，然後按兩下 [ 新增和編輯 ] 按鈕。 命令建立 CScribbleDoc::OnPenColor 事件處理程式存根。

  10. 以下列程式代碼取代事件處理程式的 CScribbleDoc::OnPenColor 存根。

    void CScribbleDoc::OnPenColor()
{
    // Change pen color to reflect color button's current selection
    CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
    ASSERT_VALID(pRibbon);

    CMFCRibbonColorButton* pColorBtn = DYNAMIC_DOWNCAST(
        CMFCRibbonColorButton, pRibbon->FindByID(ID_PEN_COLOR));

    m_penColor = pColorBtn->GetColor();
    // Create new pen using the selected color
    ReplacePen();
}

  11. 儲存變更，然後建置並執行應用程式。 您現在可以按下色彩按鈕，並變更畫筆的色彩。

初始化手寫筆和儲存喜好設定

接下來，初始化畫筆的色彩和寬度。 最後，儲存並載入檔案的色彩繪圖。

若要初始化功能區列上的控制件

  1. 初始化功能區列上的畫筆。

    在 CScribbleDoc::InitDocument 方法中的 m_sizeDoc = CSize(200,200) 語句之後，將下列程式碼新增至 scribdoc.cpp。

    // Reset the ribbon UI to its initial values
CMFCRibbonBar* pRibbon =
    ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

CMFCRibbonColorButton* pColorBtn = DYNAMIC_DOWNCAST(
    CMFCRibbonColorButton,
    pRibbon->FindByID(ID_PEN_COLOR));

// Set ColorButton to black
pColorBtn->SetColor(RGB(0, 0, 0));

CMFCRibbonComboBox* pThinComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox,
    pRibbon->FindByID(ID_PEN_THIN_WIDTH));

// Set Thin pen combobox to 2
pThinComboBox->SelectItem(1);

CMFCRibbonComboBox* pThickComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox,
    pRibbon->FindByID(ID_PEN_THICK_WIDTH));

// Set Thick pen combobox to 5
pThickComboBox->SelectItem(0);

  2. 將色彩繪圖儲存至檔案。 在 scribdoc.cpp 的 CStroke::Serialize 方法中，將下列語句新增到 ar << (WORD)m_nPenWidth; 語句之後。

    ar << (COLORREF)m_penColor;

  3. 最後，從檔案載入色彩繪圖。 在CStroke::Serialize方法中，於m_nPenWidth = w;語句之後加入下列程式碼行。

    ar >> m_penColor;

  4. 現在可塗上色彩，並將繪圖儲存至檔案。

結論

您已更新 MFC Scribble 應用程式。 當您修改現有的應用程式時，請使用本逐步解說作為指南。

另請參閱

逐步解說
逐步解說：更新 MFC Scribble 應用程式 （第 1 部分）

  • Last updated on