共用方式為

  • 發行項

第 1 部這個逐步解說示範如何將 Office 專有的功能區加入至傳統的手繪多邊形的應用程式。 此部份展示如何將功能區面板和控制項，讓使用者可以用的功能表和命令而不是。

必要條件

Visual C++ 範例

章節

這部分逐步解說包含下列各節：

  • 將新的面板加入至功能區

  • 將說明面板加入至功能區

  • 將畫筆面板加入至功能區

  • 加入至功能區的 [色彩] 按鈕

  • 將色彩成員加入至文件類別

  • 正在初始化畫筆和儲存喜好設定

將新的面板加入至功能區

這些步驟將示範如何將檢視 面板包含兩個核取方塊，以控制的工具列和狀態列，狀態列的可視性，同時也 視窗包含垂直方向的分割按鈕控制建立及的多重文件介面 (MDI) 視窗外觀的面板。

若要新增至功能區列的檢視面板和視窗面板

  1. 建立面板，名為檢視，其中有兩個切換狀態列和工具列的核取方塊。

    1. 從工具箱，拖曳 面板到 家用類別。 然後拖曳兩個的核取方塊加入面板中。

    2. 按一下要修改其內容的面板。 變更標題 到 檢視。

    3. 按一下第一個核取方塊，若要修改其屬性。 變更 ID 到 ID_VIEW_TOOLBAR 和標題 到 工具列。

    4. 按一下第二個核取方塊，若要修改其屬性。 變更 ID 到 ID_VIEW_STATUS_BAR 和標題 到 狀態列。

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

    1. 從工具箱，拖曳 面板 到 家用類別。 然後拖曳按鈕加入面板中。

    2. 按一下要修改其內容的面板。 變更標題 到 視窗。

    3. 按一下這個按鈕。 Change Caption to Windows, Keys to w, Large Image Index to 1, and Split Mode to False. 然後按一下省略符號 ( ...])，位在的功能表項目開啟 項目編輯器 對話方塊。

    4. 按一下 [ 新增三次，以新增三個按鈕。

    5. 按一下第一個按鈕，然後變更標題 到 開新視窗，和 ID 到 ID_WINDOW_NEW。

    6. 按一下第二個按鈕，然後變更標題 到 (透視效果)，以及 ID 到 ID_WINDOW_CASCADE。

    7. 按一下第三個按鈕，然後變更標題 到 並排顯示，以及 識別碼 到 ID_WINDOW_TILE_HORZ。

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

[章節]

將說明面板加入至功能區

現在，您可以指派至功能區按鈕命名為手繪多邊形應用程式中所定義的兩個功能表項目 [說明] 主題和關於手繪多邊形。 這些按鈕加入至新的面板，名為幫助。

若要加入說明面板

  1. 從工具箱，拖曳 面板 到 家用類別。 然後拖曳兩個按鈕加入面板中。

  2. 按一下要修改其內容的面板。 變更標題 到 幫助。

  3. 按一下第一個按鈕。 變更標題 到 [說明] 主題，以及 ID 到 ID_HELP_FINDER。

  4. 按一下第二個按鈕。 變更標題 到 關於手繪多邊形..., and ID to ID_APP_ABOUT.

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

    重要

    當您按下 [說明] 主題 按鈕，手繪多邊形應用程式中開啟壓縮的 HTML (.chm) 說明檔名為 your_project_name。 chm.因此，如果您的專案是不手繪多邊形，您必須重新命名 [說明] 檔案到您的專案名稱。

[章節]

將畫筆面板加入至功能區

現在，加入一個面板，以顯示控制粗細和色彩的畫筆的按鈕。 這個面板所含粗的細的畫筆將交換二者的核取方塊。 它的功能類似的粗線描繪的功能表項目。

原始的手繪多邊形應用程式可讓使用者在使用者按一下時，就會出現在對話方塊中選取 [畫筆寬度筆寬在功能表上。 功能區列有充裕的空間，為新的控制項，因為您可以使用功能區上的兩個下拉式方塊來取代] 對話方塊。 一個組合方塊調整細畫筆的寬度，另一個下拉式方塊調整粗畫筆的寬度。

若要將畫筆面板和組合方塊新增至功能區

  1. 從工具箱，拖曳 面板 到 家用類別。 然後拖曳 ] 核取方塊 和兩個 下拉式方塊加入面板中。

  2. 按一下要修改其內容的面板。 變更標題 到 畫筆。

  3. 按一下核取方塊。 變更標題 到 使用粗，以及 ID 到 ID_PEN_THICK_OR_THIN。

  4. 按一下第一個下拉式方塊。 Change Caption to Thin Pen, ID to ID_PEN_THIN_WIDTH, Text to 2, Type to Drop List, and Data to 1;2;3;4;5;6;7;8;9;.

  5. 按一下第二個下拉式方塊。 變更標題 到 粗畫筆的， ID 到 ID_PEN_THICK_WIDTH， 文字 到 5， 型別 到 下拉式清單，和 資料 到 5; 6; 7; 8; 9; 10; 11; 12; 13; 14; 15; 16; 17; 18; 19; 20 ；.

  6. 新的下拉式方塊沒有對應到任何現有的功能表項目。 因此，您必須建立每個 [畫筆] 選項的功能表項目。

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

    2. 按一下 [ 畫筆 開啟 pen 功能表。 然後按一下 [ 在這裡輸入 和型別 這個 & n 筆。

    3. 若要開啟剛才輸入的文字上按一下滑鼠右鍵屬性 ] 視窗中，然後變更 ID 屬性設定為 ID_PEN_THIN_WIDTH。

    4. 您也必須建立每個畫筆的功能表項目的事件處理常式。 以滑鼠右鍵按一下這個 & n 筆 ，您剛建立，然後按一下功能表項目 加入事件處理常式。 事件處理常式精靈隨即出現。

    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(pThinComboBox->GetItem(nCurSel));
}
// Create a new pen using the selected width
ReplacePen();

  7. 接下來，建立功能表粗畫筆的項目和事件處理常式。

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

    2. 按一下 畫筆若要開啟 [畫筆] 功能表。 然後按一下 [ 在這裡輸入 和型別 Thic 和 k 畫筆。

    3. 以滑鼠右鍵按一下您剛才輸入要顯示的文字屬性視窗。 變更識別碼] 屬性， 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(pThickComboBox->GetItem(nCurSel));
}
// Create a new pen using the selected width
ReplacePen();

  8. 儲存變更，然後建置並執行應用程式。 新的按鈕和下拉式方塊應該會顯示。 請嘗試使用不同的畫筆寬度手繪多邊形。

[章節]

將 [色彩] 按鈕加入至 [畫筆] 面板

接下來，將 CMFCRibbonColorButton 物件，讓使用者以彩色的手繪多邊形。

若要新增至 [畫筆] 面板的色彩] 按鈕

  1. 您將 [色彩] 按鈕之前，請為其建立功能表項目。 在資源檢視 ] 視窗中，開啟 IDR_SCRIBBTYPE 的功能表資源。 按一下 畫筆若要開啟 [畫筆] 功能表的功能表項目。 然後按一下 [ 在這裡輸入 和型別 與淺色。 以滑鼠右鍵按一下您剛才輸入要顯示的文字屬性視窗。 變更要 ID ID_PEN_COLOR。

  2. 現在，加入 [色彩] 按鈕。 從工具箱，拖曳 色彩] 按鈕 到 畫筆面板。

  3. 按一下 [色彩] 按鈕。 Change Caption to Color, ID to ID_PEN_COLOR, SimpleLook to True, Large Image Index to 1, and Split Mode to False.

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

[章節]

將色彩成員加入至文件類別

因為原始的手繪多邊形應用程式並沒有色彩的畫筆，您必須撰寫為它們的實作。 若要儲存文件的畫筆的色彩，將新成員加入至文件類別，CscribbleDoc.

若要將色彩成員加入至文件類別

  1. 在 scribdoc.h，在CScribbleDoc類別，找出// Attributes一節。 加入以下程式碼行的定義之後m_nThickWidth資料成員。

    // Current pen color
COLORREF   m_penColor;

  2. 每個文件含有一份 stokes 使用者已繪製。 每個筆觸定義的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. 以滑鼠右鍵按一下色彩 功能表項目，然後按一下 [ 新增事件 Handler…. 事件處理常式精靈就會出現。

    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. 初始化在功能區列上的畫筆。

    中時，將下列程式碼加入至 scribdoc.cpp， CScribbleDoc::InitDocument方法之後， m_sizeDoc = CSize(200,200)陳述式。

    // 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 應用程式。 當您修改現有的應用程式時，請使用這個逐步解說中做為指引。

請參閱

工作

逐步解說： 更新 MFC Scribble 應用程式 (第 1 部)

其他資源

逐步解說 (MFC)