次の方法で共有

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

  • [アーティクル]

このチュートリアルでは、リボン ユーザー インターフェイスを使用するために MFC アプリケーションを修正する方法を説明します。 Visual Studio は、Office 2007 リボンと Windows 7 Scenic リボンの両方をサポートしています。 リボン ユーザー インターフェイスの詳細については、「リボン」を参照してください。

このチュートリアルでは、マウスを使用して線画を描く、従来の Scribble 1.0 MFC サンプルを変更します。 ここでは、リボン バーを表示するよう Scribble サンプルを変更します。 パート 2 では、リボン バーにさらにボタンを追加します。

前提条件

Scribble 1.0 MFC サンプル。 Visual Studio 2017 以降への変換については、「移植ガイド: MFC Scribble」を参照してください。

セクション

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

基底クラスの置き換え

メニュー ベースのアプリケーションをリボン ベースのアプリケーションに変換するには、アプリケーション、フレーム ウィンドウ、ツール バーの各クラスを、更新された基底クラスから派生させる必要があります (元の Scribble サンプルは変更しないことをお勧めします。代わりに、Scribble プロジェクトをクリーンし、別のディレクトリにコピーしてから、コピーを変更します)。

Scribble アプリケーションの基底クラスを置き換えるには

  1. scribble.cpp で、CScribbleApp::InitInstance に AfxOleInit の呼び出しが含まれていることを確認します。

  2. pch.h (Visual Studio 2017 以前の場合は stdafx.h) で、次の行を追加します:

    #include <afxcontrolbars.h>

  3. scribble.h で、CScribbleApp クラスの定義を変更し、CWinAppEx クラスから派生するようにします。

    class CScribbleApp: public CWinAppEx

  4. Scribble 1.0 は、Windows アプリケーションが初期化 (.ini) ファイルを使用してユーザー設定のデータを保存したときに書き込まれています。 初期化ファイルは変更せず、Scribble を変更してユーザー設定をレジストリに格納します。 レジストリ キーとベースを設定するには、次のコードを、CScribbleApp::InitInstance ステートメントの後ろの LoadStdProfileSettings() に含めます。

    SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));

  5. マルチ ドキュメント インターフェイス (MDI) アプリケーション用のメイン フレームはもう CMDIFrameWnd クラスから派生しません。 代わりに、CMDIFrameWndEx クラスから派生します。

    mainfrm.h ファイルと mainfrm.cpp ファイルで、CMDIFrameWnd への参照をすべて、CMDIFrameWndEx への参照に置き換えます。

  6. childfrm.h ファイルと childfrm.cpp ファイルで、CMDIChildWnd を CMDIChildWndEx に置き換えます。

    Childfrm. h ファイル内では、CSplitterWnd を CSplitterWndEx に置き換えます。

  7. ツール バーとステータス バーを変更して、新しい MFC クラスを使用します。

    mainfrm.h ファイルでは、次の手順に従います。

    1. CToolBar を CMFCToolBarに置き換えます。

    2. CStatusBar を CMFCStatusBar で置き換え

  8. mainfrm.cpp ファイルでは、次の手順に従います。

    1. m_wndToolBar.SetBarStyle を m_wndToolBar.SetPaneStyle に置き換えます。

    2. m_wndToolBar.GetBarStyle を m_wndToolBar.GetPaneStyle に置き換えます。

    3. DockControlBar(&m_wndToolBar) を DockPane(&m_wndToolBar) に置き換えます。

  9. ipframe.cpp ファイルでは、コードの次の 3 行をコメント アウトします。

    m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->DockPane(&m_wndToolBar);

  10. 変更を保存し、アプリケーションをビルドして実行します。

プロジェクトへのビットマップの追加

このチュートリアルの次の 4 つの手順には、ビットマップ リソースが必要です。 適切なビットマップをさまざまな方法で取得できます:

  • 独自のビットマップを作成するには、 リソース エディター を使用します。 または、リソースエディターを使用して、Visual Studio に含まれており、 Visual Studio イメージライブラリからダウンロードできる、ポータブル ネットワーク グラフィックス (.png) イメージからビットマップをアセンブルします。

    ただし、リボン ユーザー インターフェイスでは、特定のビットマップが透明なイメージをサポートしている必要があります。 透明なビットマップは 32 ビット ピクセルを使用しますが、そのうち 24 ビットは赤、緑、青の各色成分を表し、残りの 8 ビットは色の透明度を指定するアルファ チャネルを表します。 現在のリソース エディターでは、32 ビット ピクセルのビットマップを表示できますが、変更できません。 そのため、透明なビットマップを作成する場合は、リソース エディターではなく、外部のイメージ エディターを使用します。

  • 適切なリソース ファイルを別のアプリケーションからプロジェクトにコピーし、そのファイルからビットマップをインポートします。

このチュートリアルでは、 「チュートリアル: MFC を使用したリボンアプリケーションの作成」で作成した例からリソースファイルをコピーします。

ビットマップをプロジェクトに追加するには

  1. ファイルエクスプローラーを使用して、リボンの例のリソース ディレクトリ (res) から Scribble プロジェクトのリソース ディレクトリ (res) に、次の .bmp ファイルをコピーします:

    1. main.bmp を Scribble プロジェクトにコピーします。

    2. filesmall.bmp と filelarge.bmp を Scribble プロジェクトにコピーします。

    3. filelarge.bmp ファイルと filesmall.bmp ファイルの新しいコピーを作成します。このとき、コピーは Ribbon サンプルに保存します。 homesmall.bmp と homelarge.bmp のコピーの名前を変更し、それらを Scribble プロジェクトに移動します。

    4. toolbar.bmp ファイルのコピーを作成します。このとき、コピーを Ribbon サンプルに保存します。 panelicons.bmp のコピーの名前を変更し、それを Scribble プロジェクトに移動します。

  2. MFC アプリケーション用のビットマップをインポートします。 [リソース ビュー] で、[scribble.rc] ノードをダブルクリックし、[ビットマップ] ノードをダブルクリックして [リソースの追加] をクリックします。 表示されたダイアログ ボックスで、[インポート] をクリックします。 res ディレクトリを開き、main.bmp ファイルを選択して、[開く] をクリックします。

    main.bmp ビットマップには、26 × 26 イメージが含まれています。 ビットマップの ID を IDB_RIBBON_MAIN に変更します。

  3. アプリケーション ボタンにアタッチされるファイル メニュー用のビットマップをインポートします。

    1. filesmall.bmp ファイルをインポートします。このファイルには 16 × 16 イメージが 11 個 (16 × 176) 含まれています。 ビットマップの ID を IDB_RIBBON_FILESMALL に変更します。

    Note

    必要なのは最初の 8 個の 16x16 イメージ (16x128) のみであるため、必要に応じて、このビットマップの右端の幅を 176 から 128 にトリミングすることができます。

    1. filelarge.bmp をインポートします。このファイルには 32 × 32 イメージが 9 個 (32 × 288) 含まれています。 ビットマップの ID を IDB_RIBBON_FILELARGE に変更します。

  4. リボンのカテゴリとパネル用のビットマップをインポートします。 リボン バーの各タブはカテゴリであり、テキスト ラベルと省略可能なイメージで構成されます。

    1. homesmall.bmp ビットマップをインポートします。このファイルには、小さいボタン用の 16 × 16 イメージが 11 個含まれています。 ビットマップの ID を IDB_RIBBON_HOMESMALL に変更します。

    2. homelarge.bmp ビットマップをインポートします。このファイルには、大きいボタン用の 32 × 32 イメージが 9 個含まれています。 ビットマップの ID を IDB_RIBBON_HOMELARGE に変更します。

  5. サイズが変更されたリボン パネル用のビットマップをインポートします。 このビットマップ、つまりパネル アイコンは、リボンが小さすぎてパネル全体を表示できない場合に、サイズ変更操作後に使用されます。

    1. panelicons.bmp をインポートします。このファイルには 16 × 16 イメージが 8 個含まれています。 ビットマップ エディターの [プロパティ] ウィンドウで、ビットマップの幅を 64 (16 × 64) に変更します。 ビットマップの ID を IDB_PANEL_ICONS に変更します。

    Note

    必要なのは最初の 4 個の 16x16 イメージ (16x64) のみであるため、必要に応じて、このビットマップの右端の幅を 128 から 64 にトリミングすることができます。

リボン リソースをプロジェクトに追加する

メニューを使用するアプリケーションを、リボンを使用するアプリケーションに変更する場合は、既存のメニューを削除する必要も、無効にする必要もありません。 リボン リソースを作成し、リボン ボタンを追加し、新しいボタンをメニュー項目と関連付けるだけです。 メニューは表示されなくなりますが、リボン バーからのメッセージはメニュー経由で送られ、メニューのショートカットは引き続き利用できます。

リボンはアプリケーション ボタンと 1 つ以上のカテゴリ タブで構成されます。アプリケーション ボタンは、リボンの左上にある大きいボタンです。 各カテゴリ タブは、1 つまたは複数のパネルで構成されます。パネルは、リボンのボタンやコントロールのコンテナーの役割を果たします。 次の手順では、リボン リソースを作成して、アプリケーション ボタンをカスタマイズする方法を説明します。

リボン リソースをプロジェクトに追加するには

  1. ソリューション エクスプローラーで Scribble プロジェクトを選択した状態で、[Project] メニューの [リソースの追加] をクリックします。

  2. [リソースの追加] ダイアログ ボックスで [リボン] を選択し、[新規作成] をクリックします。

    Visual Studio でリボン リソースが作成され、デザイン ビューで開かれます。 リボン リソース ID は IDR_RIBBON1 です。これはリソース ビューに表示されます。 リボンには、1 つのカテゴリと 1 つのパネルがあります。

  3. アプリケーション ボタンのカスタマイズは、そのプロパティを修正して行います。 このコードで使用されているメッセージ ID は、Scribble 1.0 用のメニューで定義済みです。

  4. デザイン ビューでアプリケーション ボタンをクリックして、そのプロパティを表示します。 プロパティの値を次のように変更します。 画像を IDB_RIBBON_MAIN へ、 プロンプト を File へ、キー を f へ、イメージ (大) を IDB_RIBBON_FILELARGE へ、そして イメージ (小) を IDB_RIBBON_FILESMALL へ変更してください。

  5. 次の修正を行い、ユーザーがアプリケーション ボタンをクリックしたときに表示されるメニューを作成します。 [項目エディター] を開くには、[メイン項目] の隣にある省略記号 (...) をクリックします。

    1. [項目 の種類 ] ボタン を選択した状態で、[追加] をクリックしてボタンを追加します。 キャプション を &New へ、ID を ID_FILE_NEW へ、イメージ を 0 へ、イメージ (大) を 0 へ変更します。

    2. [追加] をクリックしてボタンを追加します。 キャプション を &Save へ、ID を ID_FILE_SAVE へ、イメージ を 2 へ、イメージ (大) を 2 へ変更します。

    3. [追加] をクリックしてボタンを追加します。 キャプション を Save &As へ、ID を ID_FILE_SAVE_AS へ、イメージ を 3 へ、イメージ (大) を 3 へ変更します。

    4. [追加] をクリックしてボタンを追加します。 キャプション を &Print へ、ID を ID_FILE_PRINT へ、イメージ を 4 へ、イメージ (大) を 4 へ変更します。

    5. 項目の種類を [区切り記号] に変更し、[追加] をクリックします。

    6. 項目の種類を [ボタン] に変更します。 [追加] をクリックして 5 つ目のボタンを追加します。 キャプション を &Close へ、ID を ID_FILE_CLOSE へ、イメージ を 5 へ、イメージ (大) を 5 へ変更します。

  6. 次の修正を行い、前の手順で作成した [印刷] ボタンにサブメニューを作成します。

    1. [印刷] ボタンをクリックして、項目の種類を [ラベル] に変更し、[挿入] をクリックします。 [キャプション] を Preview and print the document に変更します。

    2. [印刷] ボタンをクリックして、項目の種類を [ボタン] に変更し、[挿入] をクリックします。 キャプション を &Print へ、ID を ID_FILE_PRINT へ、イメージ を 4 へ、イメージ (大) を 4 へ変更します。

    3. [印刷] ボタンをクリックし、[挿入] をクリックしてボタンを追加します。 キャプション を &Quick Print へ、ID を ID_FILE_PRINT_DIRECT へ、イメージ を 7 へ、イメージ (大) を 7 へ変更します。

    4. [印刷] ボタンをクリックし、[挿入] をクリックしてボタンをもう 1 つ追加します。 キャプション を Print Pre&view へ、ID を ID_FILE_PRINT_PREVIEW へ、イメージ を 6 へ、イメージ (大) を 6 へ変更します。

    5. これで、[メイン項目] を修正できました。 [閉じる] をクリックして項目エディターを終了します。

  7. 次の修正を行い、アプリケーション ボタン メニューの下部に表示される終了ボタンを作成します。

    1. ソリューション エクスプローラーの [リソース ビュー] タブを選択します。

    2. [プロパティ] ウィンドウで、[ボタン] の隣にある省略記号 ... をクリックして [項目エディター] を開きます。

    3. [項目 の種類 ] ボタン を選択した状態で、[追加] をクリックしてボタンを追加します。 キャプション を E&xit に、ID を ID_APP_EXIT に、Image を 8 に変更します。

    4. ボタンが変更されました。 [閉じる] をクリックして項目エディターを終了します。

リボン バーのインスタンスの作成

次の手順では、アプリケーションの起動時にリボン バーのインスタンスを作成する方法を説明します。 リボン バーをアプリケーションに追加するには、mainfrm.h ファイルでリボン バーを宣言します。 次に、mainfrm.cpp ファイルで、リボン リソースを読み込むコードを作成します。

リボン バーのインスタンスを作成するには

  1. mainfrm.h ファイルで、メイン フレームのクラス定義 CMainFrame の保護されたセクションにデータ メンバーを追加します。 このメンバーは、リボン バー用です。

    // Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;

  2. mainfrm.cpp ファイルで、return 関数の末尾にある最後の CMainFrame::OnCreate ステートメントの前に、次のコードを追加します。 このコードは、リボン バーのインスタンスを作成します。

    // Create the ribbon bar
if (!m_wndRibbonBar.Create(this))
{
    return -1;   //Failed to create ribbon bar
}
m_wndRibbonBar.LoadFromResource(IDR_RIBBON1);

リボン リソースのカスタマイズ

アプリケーション ボタンを作成したので、要素をリボンに追加できます。

Note

このチュートリアルでは、すべてのパネルで同じパネル アイコンを使用します。 ただし、他のイメージ リスト インデックスを使用して、他のアイコンを表示してもかまいません。

[Home] カテゴリと [Edit] パネルを追加するには

  1. この Scribble プログラムに必要なカテゴリは 1 つだけです。 [デザイン] ビューの [ツールボックス] で、[カテゴリ] をダブルクリックして追加し、そのプロパティを表示します。 プロパティ値を次のように変更します: キャプション は &Home へ、イメージ (大) は IDB_RIBBON_HOMELARGE へ、イメージ (小) は IDB_RIBBON_HOMESMALL へ。

  2. 各リボン カテゴリは名前付きパネルに整理されます。 各パネルには、関連操作を完了させるコントロールのセットが含まれています。 このカテゴリには 1 つのパネルがあります。 [パネル] をクリックし、[キャプション] を Edit に変更します。

  3. [編集] パネルに対して、ドキュメントの内容を消去するボタンを追加します。 このボタンのメッセージ ID は、IDR_SCRIBBTYPE メニュー リソースに定義済みです。 ボタン テキストと、ボタンを装飾するビットマップのインデックスに、「Clear All」と指定します。 [ツールボックス] を開き、ボタンを [編集] パネルにドラッグします。 ボタンをクリックし、キャプション を Clear All に、ID を ID_EDIT_CLEAR_ALL に、イメージ インデックス を 0 に、イメージ (大) インデックス を 0 に変更します。

  4. 変更内容を保存し、アプリケーションをビルドして実行します。 Scribble アプリケーションが起動されますが、ウィンドウ最上部にはメニュー バーではなく、リボンが表示されます。 リボン バーには 1 つのカテゴリ ([ホーム]) があります。また、[ホーム] には 1 つのパネル ([編集]) があります。 追加したリボン ボタンはイベント ハンドラーに関連付けられており、[開く]、[閉じる]、[保存]、[印刷]、[すべてクリア] の各ボタンは、意図したとおりに動作します。

アプリケーションの外観の設定

ビジュアル マネージャーは、アプリケーションのすべての描画を制御するグローバル オブジェクトです。 元の Scribble アプリケーションは Office 2000 のユーザー インターフェイス (UI) スタイルを使用しているため、このアプリケーションの外観は古めかしく感じられるかもしれません。 このアプリケーションは、Office 2007 のビジュアル マネージャーを使用するようにリセットして、Office 2007 のような外観にすることができます。

アプリケーションの外観を設定するには

  1. CMainFrame::OnCreate 関数の return 0; ステートメントの前に次のコードを入力して、既定のビジュアル マネージャーとスタイルを変更します。

    // Set the default manager to Office 2007
CMFCVisualManager::SetDefaultManager(RUNTIME_CLASS(CMFCVisualManagerOffice2007));
CMFCVisualManagerOffice2007::SetStyle(CMFCVisualManagerOffice2007::Office2007_LunaBlue);

  2. 変更内容を保存し、アプリケーションをビルドして実行します。 アプリケーションの UI が Office 2007 と類似した UI になります。

次のステップ

これで、従来の Scribble 1.0 MFC サンプルを、リボン デザイナーを使用するように修正しました。 パート 2 へ進んでください。

関連項目

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