チュートリアル: MFC Scribble アプリケーションの更新 (パート 2)

[アーティクル]
06/16/2023

このチュートリアルのパート 1 では、従来の Scribble アプリケーションに Office Fluent リボンを追加する方法を示しました。このパートでは、ユーザーがメニューやコマンドの代わりに使用可能なリボンパネルとコントロールを追加する方法を示します。

前提条件

Visual C++ のサンプル

セクション

このパートは、次のセクションで構成されています。

リボンへの新しいパネルの追加
リボンへのヘルプパネルの追加
リボンへの [ペン] パネルの追加
リボンへのカラーボタンの追加
ドキュメントクラスへのカラーメンバーの追加
ペンの初期化と基本設定の保存

リボンへの新しいパネルの追加

次の手順では、ツールバーとステータスバーの表示を制御する 2 つのチェックボックスを含む [表示] パネルと、マルチドキュメントインターフェイス (MDI) ウィンドウの作成と配置を制御する垂直方向の分割ボタンを含む [ウィンドウ] パネルを追加する方法を示します。

リボンバーに [表示] パネルと [ウィンドウ] パネルを追加するには

View という名前のパネルを作成します。このパネルには、ステータスバーとツールバーを切り替える 2 つのチェックボックスがあります。
1. [ツールボックス] から、[パネル] を [ホーム] カテゴリにドラッグします。次に、2 つの [チェックボックス] をパネルにドラッグします。
2. パネルをクリックしてそのプロパティを変更します。 [キャプション] を View に変更します。
3. 1 つ目のチェックボックスをクリックしてそのプロパティを変更します。 [ID] を ID_VIEW_TOOLBAR に変更し、[キャプション] を Toolbar に変更します。
4. 2 つ目のチェックボックスをクリックしてそのプロパティを変更します。 [ID] を ID_VIEW_STATUS_BAR に変更し、[キャプション] を Status Bar に変更します。
分割ボタンが付いた Window という名前のパネルを作成します。ユーザーが分割ボタンをクリックすると、Scribble アプリケーションで既に定義されている 3 つのコマンドがショートカットメニューに表示されます。
1. [ツールボックス] から、[パネル] を [ホーム] カテゴリにドラッグします。次に、[ボタン] をパネルにドラッグします。
2. パネルをクリックしてそのプロパティを変更します。 [キャプション] を Window に変更します。
3. ボタンをクリックします。 [キャプション] を Windows に、[キー] を w に、[大きいイメージのインデックス] を 1 に、[分割モード] を False に変更します。次に、[メニュー項目] の横にある省略記号 ([...]) をクリックして、[項目エディター] ダイアログボックスを開きます。
4. [追加] を 3 回クリックして、3 つのボタンを追加します。
5. 1 つ目のボタンをクリックしてから、[キャプション] を New Window に、[ID] を ID_WINDOW_NEW に変更します。
6. 2 つ目のボタンをクリックしてから、[キャプション] を Cascade に、[ID] を ID_WINDOW_CASCADE に変更します。
7. 3 つ目のボタンをクリックしてから、[キャプション] を Tile に、[ID] を ID_WINDOW_TILE_HORZ に変更します。
変更内容を保存し、アプリケーションをビルドして実行します。 [表示] パネルと [ウィンドウ] パネルが表示されます。ボタンをクリックして、それらが正しく機能することを確認します。

リボンへのヘルプパネルの追加

これで、Scribble アプリケーションで定義された 2 つのメニュー項目を、[ヘルプトピック] と [Scribble バージョン情報] という名前のリボンボタンに割り当てることができます。ボタンが [ヘルプ] という名前の新しいパネルに追加されます。

ヘルプパネルを追加するには

[ツールボックス] から、[パネル] を [ホーム] カテゴリにドラッグします。次に、2 つの [ボタン] をパネルにドラッグします。
パネルをクリックしてそのプロパティを変更します。 [キャプション] を Help に変更します。
1 つ目のボタンをクリックします。 [キャプション] を Help Topics に、[ID] を ID_HELP_FINDER に変更します。
2 つ目のボタンをクリックします。 [キャプション] を About Scribble... に、[ID] を ID_APP_ABOUT に変更します。
変更内容を保存し、アプリケーションをビルドして実行します。 2 つのリボンボタンを含む [ヘルプ] パネルが表示されます。

重要

[ヘルプトピック] ボタンをクリックすると、Scribble アプリケーションで、your_project_name.chm という名前の圧縮された HTML (.chm) ヘルプファイルが開きます。その結果、プロジェクトに Scribble という名前が付けられていない場合は、ヘルプファイルの名前をプロジェクト名に変更する必要があります。

リボンへの [ペン] パネルの追加

ここで、ペンの太さと色を制御するボタンを表示するためのパネルを追加します。このパネルには、太いペンと細いペンを切り替えるチェックボックスがあります。この機能は、Scribble アプリケーションの [太線] メニュー項目の機能に似ています。

オリジナルの Scribble アプリケーションを使用すると、メニューの [ペンの太さ] をクリックしたときに表示されるダイアログボックスからペンの太さを選択できます。リボンバーには新しいコントロール用の十分なスペースがあるため、リボンの 2 つのコンボボックスを使用してダイアログボックスを置き換えることができます。一方のコンボボックスは細いペンの太さを調整し、もう一方のコンボボックスは太いペンの太さを調整します。

[ペン] パネルとコンボボックスをリボンに追加するには

[ツールボックス] から、[パネル] を [ホーム] カテゴリにドラッグします。次に、1 つの [チェックボックス] と 2 つの [コンボボックス] をパネルにドラッグします。
パネルをクリックしてそのプロパティを変更します。 [キャプション] を Pen に変更します。
チェックボックスをオンにします。 [キャプション] を Use Thick に、[ID] を ID_PEN_THICK_OR_THIN に変更します。
1 つ目のコンボボックスをクリックします。 [キャプション] を Thin Pen に、[ID] を ID_PEN_THIN_WIDTH に、[タイプ] を Drop List に、[データ] を 1;2;3;4;5;6;7;8;9; に、[テキスト] を 2 に変更します。
2 つ目のコンボボックスをクリックします。 [キャプション] を Thick Pen に、[ID] を ID_PEN_THICK_WIDTH に、[タイプ] を Drop List に、[データ] を 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20; に、[テキスト] を 5 に変更します。
新しいコンボボックスは、既存のメニュー項目に対応していないため、すべてのペンオプションのメニュー項目を作成する必要があります。
1. [リソースビュー] ウィンドウで、[IDR_SCRIBBTYPE] メニューリソースを開きます。
2. [ペン] をクリックして、[ペン] メニューを開きます。次に、[ここに入力] をクリックし、「Thi&n Pen」と入力します。
3. 入力したテキストを右クリックして [プロパティ] ウィンドウを開いてから、ID プロパティを ID_PEN_THIN_WIDTH に変更します。
4. すべてのペンメニュー項目のイベントハンドラーを作成します。作成した [Thi>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(CStringA(pThinComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();
```
次に、太いペン用のメニュー項目とイベントハンドラーを作成します。
1. [リソースビュー] ウィンドウで、[IDR_SCRIBBTYPE] メニューリソースを開きます。
2. [ペン] をクリックして、[ペン] メニューを開きます。次に、[ここに入力] をクリックし、「Thic&k Pen」と入力します。
3. 入力したテキストを右クリックして、[プロパティ] ウィンドウを表示します。 ID プロパティを ID_PEN_THICK_WIDTH に変更します。
4. 作成した [Thick Pen] メニュー項目を右クリックしてから、[イベントハンドラーの追加] をクリックします。 イベントハンドラーウィザードが表示されます。
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();
```
変更内容を保存し、アプリケーションをビルドして実行します。新しいボタンとコンボボックスが表示されます。別のペンの太さを使って走り書きを試してください。

[ペン] パネルへのカラーボタンの追加

次に、ユーザーが色付きで走り書きができるようにする CMFCRibbonColorButton オブジェクトを追加します。

[ペン] パネルにカラーボタンを追加するには

カラーボタンを追加する前に、それ用のメニュー項目を作成します。 [リソースビュー] ウィンドウで、[IDR_SCRIBBTYPE] メニューリソースを開きます。 [ペン] メニュー項目をクリックして、[ペン] メニューを開きます。次に、[ここに入力] をクリックし、「&Color」と入力します。入力したテキストを右クリックして、[プロパティ] ウィンドウを表示します。 ID を ID_PEN_COLORに変更します。
ここで、カラーボタンを追加します。 [ツールボックス] から、[カラーボタン] を [ペン] パネルにドラッグします。
カラーボタンをクリックします。 [キャプション] を Color に、[ID] を ID_PEN_COLOR に、[簡易表示] を True に、[大きいイメージのインデックス] を 1 に、[分割モード] を False に変更します。
変更内容を保存し、アプリケーションをビルドして実行します。新しいカラーボタンが [ペン] パネルに表示されます。ただし、イベントハンドラーがまだないため、使用できません。次の手順では、カラーボタンのイベントハンドラーを追加する方法について説明します。

ドキュメントクラスへのカラーメンバーの追加

オリジナルの Scribble アプリケーションにはカラーペンがないため、それ用の実装を作成する必要があります。ドキュメントのペンの色を保存するには、ドキュメントクラス CscribbleDoc に新しいメンバーを追加します。

ドキュメントクラスにカラーメンバーを追加するには

scribdoc.h の CScribbleDoc クラスで、// Attributes セクションを探します。 m_nThickWidth データメンバーの定義の後ろに、次のコード行を追加します。
```
// Current pen color
COLORREF m_penColor;
```
すべてのドキュメントに、ユーザーが既に描画したストロークの一覧が含まれています。すべてのストロークが、CStroke オブジェクトによって定義されます。 CStroke クラスには、ペンの色に関する情報が含まれていないため、クラスを変更する必要があります。 scribdoc.h の CStroke クラスで、m_nPenWidth データメンバーの定義の後ろに、次のコード行を追加します。
```
// Pen color for the stroke
COLORREF m_penColor;
```
scribdoc.h で、太さと色を指定するパラメーターを持つ新しい CStroke コンストラクターを追加します。 CStroke(UINT nPenWidth); ステートメントの後ろに次のコード行を追加します。
```
CStroke(UINT nPenWidth, COLORREF penColor);
```

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();
}

CStroke::DrawStroke メソッドの 2 行目を次のように変更します。
```
if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
```
ドキュメントクラスの既定のペンの色を設定します。 scribdoc.cpp で、m_nThickWidth = 5; ステートメントの後ろの CScribbleDoc::InitDocument に次の行を追加します。
```
// default pen color is black
m_penColor = RGB(0, 0, 0);
```
scribdoc.cpp で、CScribbleDoc::NewStroke メソッドの先頭行を次のように変更します。
```
CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
```
CScribbleDoc::ReplacePen メソッドの最終行を次のように変更します。
```
m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
```
前の手順で m_penColor メンバーを追加しました。ここで、メンバーを設定するカラーボタンのイベントハンドラーを作成します。
1. [リソースビュー] ウィンドウで、[IDR_SCRIBBTYPE] メニューリソースを開きます。
2. [色] メニュー項目を右クリックし、[イベントハンドラーの追加] をクリックします。 イベントハンドラーウィザードが表示されます。
3. ウィザードの [クラス] リストボックスで、[CScribbleDoc] を選択してから、[追加と編集] ボタンをクリックします。コマンドによって、CScribbleDoc::OnPenColor イベントハンドラースタブが作成されます。

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();
}

変更を保存し、アプリケーションをビルドして実行します。カラーボタンを押すと、ペンの色を変更できるようになりました。

ペンの初期化と基本設定の保存

次に、ペンの色と太さを初期化します。最後に、色の描画を保存してファイルから読み込みます。

リボンバーのコントロールを初期化するには

リボンバーのペンを初期化します。

次のコードを、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);

色の描画をファイルに保存します。次のコードを、scribdoc.cpp の CStroke::Serialize メソッドの ar << (WORD)m_nPenWidth; ステートメントの後ろに追加します。
```
ar << (COLORREF)m_penColor;
```
最後に、ファイルから色の描画を読み込みます。次のコード行を、CStroke::Serialize メソッドの m_nPenWidth = w; ステートメントの後ろに追加します。
```
ar >> m_penColor;
```
ここで、色付きで走り書きし、描画をファイルに保存します。

まとめ

MFC Scribble アプリケーションを更新しました。既存のアプリケーションを変更するときに、このチュートリアルをガイドとして使用してください。

次の方法で共有

チュートリアル: MFC Scribble アプリケーションの更新 (パート 2)

前提条件

セクション

リボンへの新しいパネルの追加

リボンバーに [表示] パネルと [ウィンドウ] パネルを追加するには

リボンへのヘルプパネルの追加

ヘルプパネルを追加するには

リボンへの [ペン] パネルの追加

[ペン] パネルとコンボボックスをリボンに追加するには

[ペン] パネルへのカラーボタンの追加

[ペン] パネルにカラーボタンを追加するには

ドキュメントクラスへのカラーメンバーの追加

ドキュメントクラスにカラーメンバーを追加するには

ペンの初期化と基本設定の保存

リボンバーのコントロールを初期化するには

まとめ

関連項目

フィードバック

その他のリソース

次の方法で共有

チュートリアル: MFC Scribble アプリケーションの更新 (パート 2)

前提条件

セクション

リボンへの新しいパネルの追加

リボン バーに [表示] パネルと [ウィンドウ] パネルを追加するには

リボンへのヘルプ パネルの追加

ヘルプ パネルを追加するには

リボンへの [ペン] パネルの追加

[ペン] パネルとコンボ ボックスをリボンに追加するには

[ペン] パネルへのカラー ボタンの追加

[ペン] パネルにカラー ボタンを追加するには

ドキュメント クラスへのカラー メンバーの追加

ドキュメント クラスにカラー メンバーを追加するには

ペンの初期化と基本設定の保存

リボン バーのコントロールを初期化するには

まとめ

関連項目

フィードバック

その他のリソース

リボンバーに [表示] パネルと [ウィンドウ] パネルを追加するには

リボンへのヘルプパネルの追加

ヘルプパネルを追加するには

[ペン] パネルとコンボボックスをリボンに追加するには

[ペン] パネルへのカラーボタンの追加

[ペン] パネルにカラーボタンを追加するには

ドキュメントクラスへのカラーメンバーの追加

ドキュメントクラスにカラーメンバーを追加するには

リボンバーのコントロールを初期化するには