次の方法で共有

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

  • [アーティクル]

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

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

必須コンポーネント

サンプル ジグザグ線します。MFC MDI 描画アプリケーション

RibbonGadgets サンプル:リボン ガジェット アプリケーション

セクション

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

  • 基本クラスの置き換え

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

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

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

  • リボン カテゴリの追加

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

基本クラスの置き換え

メニュー ベースのアプリケーションをリボン ベースのアプリケーションに変換するには、アプリケーション、フレーム ウィンドウ、ツール バーの各クラスを、更新された基本クラスから派生させる必要があります (元の 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. 複数ドキュメント インターフェイス (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. Windows エクスプローラーを使用して、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) 含まれています。 必要な 16 × 16 イメージは 8 個 (16 × 128) なので、[リソース ビュー] を使用して、ビットマップの幅を 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. 次の修正を行い、ユーザーがアプリケーション ボタンをクリックしたときに表示されるメニューを作成します。 省略記号ボタンをクリックします (...) 横に の主な項目 を開くには、 アイテム エディター。

    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]、[イメージ]、[大きいイメージ] を、それぞれ「印刷プレビュー(&V)」、「ID_FILE_PRINT_PREVIEW」、「6」、「6」に変更します。

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

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

    1. のプロパティ ウィンドウで、省略記号ボタンをクリックします (...) 横に ボタン を開くには、 アイテム エディター。

    2. [追加] をクリックしてボタンを追加します。 [キャプション]、[ID]、[イメージ] を、それぞれ「終了(&X)」、「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 つだけです。 デザイン ビューで [カテゴリ] をクリックして、そのプロパティを表示します。 プロパティ値は次のとおり変更します。キャプション に ＆ ホーム、 大きな画像 に IDB_RIBBON_HOMELARGE、 の小さな画像 に IDB_RIBBON_HOMESMALL。

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

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

  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 MDI 描画アプリケーション

その他の技術情報

チュートリアル (MFC)