次の方法で共有

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

  • [アーティクル]

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

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

必須コンポーネント

Visual C++ のサンプル

Visual C++ のサンプル

セクション

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

  • 基本クラスの置き換え

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

  • プロジェクトへのリボン リソースの追加

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

  • リボン カテゴリの追加

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

基本クラスの置き換え

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

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

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

  2. stdafx.h ファイルに次のコードを追加します。

    #include <afxcontrolbars.h>

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

    class CScribbleApp: public CWinAppEx

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

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

  5. ドキュメントの Interface (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. アプリケーションを静的にリンクする場合は、プロジェクトのリソース (.rc) ファイルの先頭に次のコードを追加します。

    #include "afxribbon.rc"

    afxribbon.rc のファイルは、実行時に必要なリソースが含まれています。MFC アプリケーション ウィザードには、アプリケーションを作成するときに、このファイルが自動的に含まれます。

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

[セクション]

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

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

  • リソース エディターを使用して、独自のビットマップを作成します。または、リソース エディターを使用して、Visual Studio に用意されている Portable Network Graphics (.png) イメージからビットマップを作成します。これらのイメージは VS2008ImageLibrary ディレクトリに格納されています。

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

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

このチュートリアルでは、Samples ディレクトリにあるアプリケーションからリソース ファイルをコピーします。

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

  1. RibbonGadgets サンプルのリソース ディレクトリ (res) から次の .bmp ファイルをコピーするファイル エクスプローラーの使用:

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

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

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

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

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

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

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

    1. filesmall.bmp ファイルをインポートします。このファイルには 16 × 16 イメージが 10 個 (16 × 160) 含まれています。これは、8 × () × イメージだけなので、160 から 128 まで、ビットマップの幅を変更するに [リソース ビュー] を使用します。ビットマップの ID を IDB_RIBBON_FILESMALL に変更します。

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

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

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

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

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

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

[セクション]

プロジェクトへのリボン リソースの追加

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

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

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

  1. [プロジェクト] メニューの [リソースの追加] をクリックします。

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

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

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

  4. デザイン ビューでアプリケーション ボタンをクリックして、そのプロパティを表示します。[イメージ]、[プロンプト]、[キー]、[大きいイメージ]、[小さいイメージ] のプロパティの値を、それぞれ「IDB_RIBBON_MAIN」、「ファイル」、「f」、「IDB_RIBBON_FILELARGE」、「IDB_RIBBON_FILESMALL」に変更します。

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

    1. [追加] をクリックしてボタンを追加します。[キャプション]、[ID]、[イメージ]、[大きいイメージ] を、それぞれ「新規作成(&N)」、「ID_FILE_NEW」、「0」、「0」に変更します。

    2. [追加] をクリックして 2 つ目のボタンを追加します。[キャプション]、[ID]、[イメージ]、[大きいイメージ] を、それぞれ「保存(&S)」、「ID_FILE_SAVE」、「2」、「2」に変更します。

    3. [追加] をクリックして 3 つ目のボタンを追加します。[キャプション]、[ID]、[イメージ]、[大きいイメージ] を、それぞれ「名前を付けて保存(&A)」、「ID_FILE_SAVE_AS」、「3」、「3」に変更します。

    4. 4 番目のボタンをクリック [追加 ] 追加。[キャプション]、[ID]、[イメージ]、[大きいイメージ] を、それぞれ「印刷(&P)」、「ID_FILE_PRINT」、「4」、「4」に変更します。

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

    6. 項目の種類を [ボタン] に変更します。[追加] をクリックして 5 つ目ボタンを追加します。[キャプション]、[ID]、[イメージ]、[大きいイメージ] を、それぞれ「閉じる(&C)」、「ID_FILE_CLOSE」、「5」、「5」に変更します。

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

    1. [印刷] ボタンをクリックして、項目の種類を [ラベル] に変更し、[挿入] をクリックします。[キャプション] を「ドキュメントのプレビューと印刷」に変更します。

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

    3. [印刷] ボタンをクリックし、[挿入] をクリックしてボタンを追加します。[キャプション]、[ID]、[イメージ]、[大きいイメージ] を、それぞれ「クイック印刷(&Q)」、「ID_FILE_PRINT_DIRECT」、「7」、「7」に変更します。

    4. [印刷] ボタンをクリックし、[挿入] をクリックしてボタンをもう 1 つ追加します。ID_FILE_PRINT_PREVIEWへの 印刷プレビュー (&V)、[ID]、6への [イメージ]、および6 [] への [大きいイメージ] への変更 [キャプション]。

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

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

    1. [プロパティ] ペインで、[項目エディタ] を開くに [ボタン] 横にある省略記号 (...) をクリックします。

    2. [追加] をクリックしてボタンを追加します。[キャプション] を [終了 (&X)]、[ID] を [ID;APP_EXIT]、[イメージ] を [8] に変更します。

[セクション]

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

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

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

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

    // Ribbon bar for the application
CMFCRibbonBar  m_wndRibbonBar;

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

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

[セクション]

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

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

[!メモ]

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

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

  1. この Scribble プログラムに必要なカテゴリは 1 つだけです。デザイン ビューで [カテゴリ] をクリックして、そのプロパティを表示します。[キャプション]、[大きいイメージ]、[小さいイメージ] を、それぞれ「ホーム(&H)」、「IDB_RIBBON_HOMELARGE」、「IDB_RIBBON_HOMESMALL」に変更します。

  2. 各リボン カテゴリは名前付きパネルに整理されます。各パネルには、関連操作を実行するコントロールのセットが含まれています。このカテゴリには 1 つのパネルがあります。[パネル] をクリックし、[キャプション] を「編集」に変更し、[イメージ インデックス] を「0」に変更します。

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

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

[セクション]

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

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

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

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

    // 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)

その他の技術情報

チュートリアル (MFC)