[アーティクル]
10/20/2021

ハンズオンラボ: WPF の活用～ WPF Ribbon コントロール～

更新日: 2009 年 9 月 25 日

ハンズオンラボ

ダウンロード

ドキュメント: HOLWPF2-WPFRibbon-rev1.1 (XPS 形式、1.83 MB | PDF 形式、1.72 MB)
コードサンプル: HOLWPF2-WPFRibbon-rev1.1 (ZIP 形式、1.31 MB)

このドキュメントに記載されている情報 (URL 等のインターネット Web サイトに関する情報を含む) は、将来予告なしに変更することがあります。このドキュメントに記載された内容は情報提供のみを目的としており、明示または黙示に関わらず、これらの情報についてマイクロソフトはいかなる責任も負わないものとします。

お客様が本製品を運用した結果の影響については、お客様が負うものとします。お客様ご自身の責任において、適用されるすべての著作権関連法規に従ったご使用を願います。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることなく、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。

マイクロソフトは、このドキュメントに記載されている内容に関し、特許、特許申請、商標、著作権、またはその他の無体財産権を有する場合があります。別途マイクロソフトのライセンス契約上に明示の規定のない限り、このドキュメントはこれらの特許、商標、著作権、またはその他の無体財産権に関する権利をお客様に許諾するものではありません。

別途記載されていない場合、このソフトウェアおよび関連するドキュメントで使用している会社、組織、製品、ドメイン名、電子メールアドレス、ロゴ、人物、出来事などの名称は架空のものです。実在する会社名、組織名、商品名、個人名などとは一切関係ありません。

Microsoft、MS-DOS、Windows、Windows NT、MSDN、Active Directory、BizTalk、Windows Server、SQL Server、SharePoint、Outlook、PowerPoint、FrontPage、Visual Basic、Visual C++、Visual C#、Visual Studio は、米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です。

記載されている会社名、製品名には、各社の商標のものもあります。

1. 演習: WPF の活用～ Ribbon コントロール～

Windows Presentation Foundation (WPF) には、表現力の優れたデスクトップアプリケーションを構築するために、様々なコントロールが標準装備として提供されています。また、WPF で利用可能な様々な追加機能が別途リリースされています。この演習では、WPF とは別途提供されている、Ribbon コントロールを使用します。Ribbon コントロールを使用すると、WPF アプリケーション上に、Office 2007 のリボンと同様の操作性を実現することができます。

ここでは、Visual Studio 2008 SP1 の環境で予め作成した WPF アプリケーションを使用します。このアプリケーションには、Menu、ToolBar などの従来のコントロールを使用した典型的なユーザーエクスペリエンスが既に実装されています。これらの従来のコントロールを、Ribbon コントロールの新機能を利用するように変更することで、この新しいコントロールの機能を確認します。

前提知識

この演習のドキュメントでは、次に挙げる知識を既にお持ちであることを前提に解説しています。ただし、XAML の構文等に自信のない方でも、この演習付属のサンプルの完成品をコンパイルし、実行することで、Ribbon コントロールが提供する機能を体感することができます。

Visual Studio 2008 (Visual C# 2008) における基本的な操作。たとえば、ソリューションを開く方法、エディタでの編集、ビルド (コンパイル) や実行の方法、WPF アプリケーションの XAML ビューの開き方など。
XAML の基本的な構文やその特徴。
WPF アプリケーションの基本的な作成手順や特徴。

演習のシステム要件

この演習を行うには、あらかじめ以下の環境を用意する必要があります。

Windows 7 (日本語 32 ビット版)
Visual C# 2008 SP1 (Visual Studio 2008 SP1) 日本語版、Express Edition も可能
WPF Toolkit - June 2008 Release (サンプル中の DataGrid コントロールのために必要)
WPF Ribbon Control (Ribbon コントロールのために必要)
この演習で使用する付属のソースプログラム (サンプルプログラム)

この後は、上記の各項について、留意点をいつくか補足します。予めご覧ください。

ここでは、Windows 7 を使用することを前提に手順を示しますが、Visual Studio 2008 SP1 が動作可能な環境であれば、他の Windows 環境でも同様の演習を行うことは可能です。ただし、練習 1 のタスク 2 では、エアログラスが有効な環境 (Windows 7 または Windows Vista) が必要です。

Visual C# 2008 のエディションは問いません。(ただし、このドキュメントの作成には、Visual Studio Team System を使用しています。エディションによっては、ドキュメント内のキャプチャ画面の体裁などが、若干異なる場合があります。) Visual C# 2008 Express Edition も演習を行うことが可能です。Visual C# 2008 Express Edition は、Visual Studio 2008 Express Edition SP1 の一部として、以下の URL のダウンロードセンターから無償で入手できます。(2009 年 8 月現在)

https://www.microsoft.com/downloads/search.aspx?displaylang=ja

なお、Visual Studio 2008 を使用するにあたり、SP1 をご使用ください。今回の演習で併用する WPF Toolkit は、SP1 環境が前提になります。

前述のとおり、この演習用の予め用意されたサンプルアプリケーションには DataGrid コントロールが使用されているため、WPF Toolkit - June 2008 Release (以降は WPF Toolkit と表記) が必要です。WPF Toolkit は、以下の URL から入手できます。

ダウンロードページ: https://wpf.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=29117 (英語)
CodePlex における WPF 関連サイトのホーム: https://wpf.codeplex.com/ (英語)

WPF Toolkit の入手方法、及び、インストール方法については、後述の「WPF Toolkit の入手とインストール」を参照してください。

Ribbon コントロールを使用するには、以下の URL から別途提供されている「WPF Ribbon Control」を入手する必要があります。詳しい入手方法は、後述の「WPF Ribbon Control の入手」を参照してください。

Office UI ライセンス: https://msdn.microsoft.com/ja-jp/office/aa973809.aspx

演習に使用する付属のソースプログラムの入手方法については、このドキュメントを入手されたサイト等でご確認ください。ソースプログラムの使用方法は、後述の「演習で使用する付属のソースプログラム (サンプルプログラム) のインストール方法」の項を参照してください。

WPF Toolkit の入手とインストール

WPF Toolkit は、バイナリファイルとソースファイルが公開されています。以下の URL にアクセスした後、次図のリンクからそれぞれ入手することができます。(この演習で最低限必要なのは、バイナリファイルです。)

ダウンロードページ: https://wpf.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=29117 (英語)

WPF Toolkit

なお、上記のリンクをクリックすると、「Microsoft Public License (Ms-PL)」が表示されるので、当該ファイルを入手するには、これに同意する必要があります。

バイナリファイルは、ファイル名「WPFToolkit.msi」(Windows Installer パッケージ) として提供されます。バイナリファイルとソースファイルをダウンロードする場合は、ZIP ファイル形式であり、この ZIP ファイルの中に、WPFToolkit.msi が含まれます。

演習環境を構築するには、この WPFToolkit.msi を実行し、セットアップウィザードを起動させ、既定のオプションのまま、WPF Toolkit をインストールしてください。

WPF Ribbon Control の入手

この Ribbon コントロール (WPF Ribbon Control) は、Office Fluent UI License のもとに使用する (無償) ことができます。この Ribbon コントロールのバイナリファイルを取得するには、以下の手順が必要です。この演習を行うには、予め入手しておいてください。

https://msdn.microsoft.com/ja-jp/office/aa973809.aspx にアクセスします。
開いた Web ページ上の [Office UI ライセンスの取得 (英語)] リンクをクリックします。
各人の Windows Live ID を使用してサインインします。もし、Windows Live ID を持っていない場合は、同じページの上のリンクを使用して、無償で Windows Live ID を作ることができます。
Office Fluent UI License のフォームに必要事項を入力し、ライセンス契約に同意します。
続いて表示されるページで、右下部にある [WPF Ribbon Control: Binary & Link to Sample Application] というタイトルのボタンをクリックし、Ribbon コントロールのバイナリファイルをダウンロードします。
ZIP ファイルとしてダウンロードされるので、その中に RibbonControlsLibrary.dll が存在することを確認します。

演習で使用する付属のソースプログラム (サンプルプログラム) のインストール方法

演習で使用するソースプログラムには、特別なインストール方法はありません。入手されたソースプログラムのフォルダ「HOLWPFRibbon」全体を、任意のパスにコピーしてください。たとえば、C:\ にコピーすれば、演習で作業を行うソースプログラムのパスは、次のようになります。

例1. C:\HOLWPFRibbon

なお、演習の本文では、ソースプログラム等の位置を示す際、次のように、ソースプログラムのルートフォルダに対する相対パスで表記しています。

例2. Ex1_Starter\CheckbookManager.sln

この場合、ソースプログラムのフォルダが例 1 の場所であるなら、絶対パスは次の意味になります。

例3. C:\HOLWPFRibbon\Ex1_Starter\CheckbookManager.sln

なお、演習作業の中で、ソースプログラムに書き込む場合もあるので、作業を行うユーザーアカウントには、ソースプログラムに対して、書き込み可能なアクセス許可を与えてください。

演習の目的

この演習では、小切手の記録帳である既存の WPF アプリケーションを使用し、これを Ribbon コントロールを使用するように変更します。ここでは、既存のメニューとツールバーの組み合わせで実装されたユーザーエクスペリエンスを、Ribbon コントロールを使用したものに変更します。

Note: この演習の中のいつくかのタスクには、その時点まで行ったソースプログラムもあります。演習の途中から始めたい場合や、作業中のソースプロクラムを壊してしまった場合、それらを使用すると便利です。

ページのトップへ

2. 練習1: Ribbon コントロールの使用

Office 2007 がリリースされて以来、人々は Office のリボンに魅了されて、自分たちのアプリケーションに、それをエミュレートする機能を追加しようと試みています。この機能は、アプリケーションにとっての、現代的な外観であると考えられています。

Office 2007

WPF Ribbon コントロールを使用することで、この優れた UI の機能を享受できます。この練習では、リボンの機能を確認し、それをアプリケーションの中からどのように利用するかを取り上げます。このコントロールは、WPF の優れたスタイルやテーマの機能を提供しつつ、Office で見られる様々なリボンの機能をサポートします。

この練習の目的は、リボンをどのように使用するかをデモすることであり、すべての機能をカバーすることはできません。しかし、この練習を終えるまでに、最も一般的なリボンの使い方を取り扱い、それをアプリケーションにどのように取り入れるかを確認できます。その過程で次のことを行います。

既存のメニューとツールバーを削除する
WPF Ribbon コントロールのアセンブリをアプリケーションに追加する
リボンで利用可能なコマンドを表示する

ここでは、余計な作り込みをしなくて済むように、予め用意されたプロジェクトを使用します。

ページのトップへ

タスク 1 - Ribbon コントロールを使用する

Visual Studio 2008 SP1 を使用して、この演習用のフォルダの中の、以下のパスのソリューションを開きます。これは、この練習で題材として使用するアプリケーションです。

Ex1_Starter\CheckbookManager.sln
このアプリケーションをビルドします。
このアプリケーションを実行します。次のフォームが開くことを確認します。確認が済んだらアプリケーションを終了しておきます。
最初に行うべき手順は、Ribbon コントロールを含むアセンブリ RibbonControlsLibrary.dll への参照を、プロジェクトに追加することです。次の要領で行います。
1. ダウンロードしたファイルの中から、RibbonControlsLibrary.dll を見つけます。
2. この DLL ファイルを、この演習用のフォルダに含まれる dependencies サブフォルダ (つまり、HOLWPFRibbon\dependencies) にコピーします。
3. ソリューションエクスプローラ上で、[参照設定] ノードを右クリックして、[参照の追加] メニューをクリックします。
4. [参照の追加] ダイアログボックスが表示されたら、[参照] タブをクリックし、前述の dependencies サブフォルダにある RibbonControlsLibrary.dll を選択します。
5. [OK] をクリックし、[参照の追加] ダイアログボックスを閉じます。
次に、MainWindow.xaml を XAML ビューで開き、Menu 要素ブロックと ToolBarTray 要素ブロックを削除します。この部分は、このあと Ribbon コントロールに置き換えます。StatusBar 要素は、残しておいてください。
<DockPanel.Resources> セクションにある、すべての <Image> 要素を削除します。これらは、メニューバーとツールバーで使用していたもので、必要ありません。このあとリボンには、リボン用のイメージデータを使用します。

次に、<Window> 開始タグの中に、Ribbon コントロールへのアクセスを可能にするため、このアセンブリを参照するプレフィックスを追加します。
1. プレフィックスを指定します。この練習では「r」を使用します。
2. CLR の名前空間として「Microsoft.Windows.Controls.Ribbon」を指定し、アセンブリの名前として「RibbonControlsLibrary」を指定します。(文字列リテラルの部分は、改行せずに入力してください。)

<Window x:Class="CheckbookManager.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:me="clr-namespace:CheckbookManager"
    xmlns:Data="clr-namespace:CheckbookManager.Data"
    xmlns:Converters="clr-namespace:CheckbookManager.Converters"
    xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;
             assembly=RibbonControlsLibrary"
    xmlns:my="http://shcemas.microsoft.com/wpf/2008/toolkit" ...

ここで、<StatusBar> 開始タグの前に、Ribbon コントロールのために <r:Ribbon> 要素のブロックを追加し、ウィンドウの上辺にドッキングするように設定します。デザインビューでみると、リボンが表示されるはずです。

</DockPanel.Resources>
<r:Ribbon DockPanel.Dock="Top">
</r:Ribbon>
<!-- Status bar on bottom: holds balance -->
<StatusBar DockPanel.Dock="Bottom"
               Background="{StaticResource whiteBackBrush}"

リボンは、メニューやツールバーと同様に、コマンドによって駆動します。実際に、ここで定義するコマンドは、リボンと関連づけて、リボンを介して公開されます。しかし、リボンで必要なのは、テキスト形式の名前だけではありません。コマンドを適切に表現するためには、イメージやツールチップの情報、説明文も必要です。そして、リボンのために、RibbonCommand と呼ばれる RoutedCommand の派生クラスを用意し、リボンに関して処理を行うには、このクラスを介して行います。

各 RibbonCommand は、RoutedCommand に追加するいくつかのプロパティを持っています。

LabelTitle - リボンの項目にラベルを表示するために使用される
LabelDescription - 説明情報を表示するために使用される
ToolTipTitle - そのコマンドのツールチップのタイトルを表示するために使用される
ToolTipDescription - ツールチップの 2 行目のテキストを表示するために使用される
ToolTipImageSource - ツールチップ上にイメージを表示するために使用される
SmallImageSource - 項目が小さいサイズで表示されるときに使用されるイメージ
LargeImageSource - 項目が大きいサイズで表示されるときに使用されるイメージ
ToolTipFooterTitle - コマンドのツールチップのフッターを表示するために使用される
ToolTipFooterDescription - ツールチップのフッターの 2 行目のテキストを表示するために使用される
ToolTipFooterImageSource - ツールチップのフッターのイメージを表示するために使用される

ツールチップに関連する各プロパティは、コマンドに関連付いたコントロールのツールチップを自動的に生成させるために、リボンによって利用されます。大小のイメージは、ラベルとともに表示される際に使用されます。

リボンを使用する最初の手順は、アプリケーションメニューを定義することです。この定義は、リボンの最も重要な要素である、アプリケーションメニューとしてドロップダウン表示される部分に利用されます。

<r:Ribbon.ApplicationMenu> プロパティに、新しい <r:RibbonApplicationMenu> 要素を追加します (完成したソースがこの後に記載されています)。

この <r:RibbonApplicationMenu> (アプリケーションメニュー) に関して、主に設定すべきことは、アプリケーションメニューの Command プロパティに RibbonCommand を設定することです。この RibbonCommand には、イメージや既定の動作などを指定します。
<r:RibbonApplicationMenu.Command> プロパティに対して、次の要領で新たに <r:RibbonCommand> 要素を追加します。
1. Executed プロパティに「OnCloseApplication」を指定します。これは、分離コードのメソッドであり、そのメソッドの中から Close メソッドを呼び出します。
2. LabelTitle プロパティに「Application Button」を設定します。
3. LabelDescription プロパティに「Close the Application」を設定します。
4. SmallImageSource プロパティに「images/Coins.png」を設定します。
5. LargeImageSource プロパティに「images/Coins.png」を設定します。
6. ToolTipTitle プロパティに「Personal Finance Manager」を設定します。
7. ToolTipDescription プロパティには、タイトルの下に表示すべき何らかのテキストを設定します。

ここまでのところで、<r:Ribbon.ApplicationMenu> は次のようになっていることを確認します。

<r:Ribbon DockPanel.Dock="Top">
   <r:Ribbon.ApplicationMenu>
      <r:RibbonApplicationMenu>
         <r:RibbonApplicationMenu.Command>
            <r:RibbonCommand 
                 Executed="OnCloseApplication"
                 LabelTitle="Application Button"
                 LabelDescription="Close the application."
                 SmallImageSource="images/Coins.png"
                 LargeImageSource="images/Coins.png"
                 ToolTipTitle="Personal Finance Manager"
                 ToolTipDescription
                    ="Click here to open or save a checkbook register." />
         </r:RibbonApplicationMenu.Command>
      </r:RibbonApplicationMenu>
   </r:Ribbon.ApplicationMenu>
</r:Ribbon>

アプリケーションを実行し、ボタンの上にマウスポインタを移動します。ツールチップが表示されることを確認します。これは、前の手順で作成した <r:RibbonCommand> の実行結果です。これによって、動作と視覚的効果が提供されます。リボンのマークアップに定義された通りに提供されます。
確認が済んだら、アプリケーションを終了します。

このボタンをクリックすると、空のメニューが表示されます。なぜなら、まだメニューには何も追加してないからです。RibbonApplicationMenu (アプリケーションメニュー) には、通常は子要素として、RibbonApplicationMenuItem を追加します。ここで簡単なメニューを追加します。

XAML ビューに戻り、次のように <r:RibbonApplicationMenu> 要素の内部に、Command プロパティの定義に続けて、<r:RibbonApplicationMenuItem> 要素のブロックを追加します。

<r:RibbonApplicationMenu>
   <r:RibbonApplicationMenu.Command>
        :(省略)
   </r:RibbonApplicationMenu.Command>
   <r:RibbonApplicationMenuItem>
   </r:RibbonApplicationMenuItem>
</r:RibbonApplicationMenu>

前の手順で追加した RibbonApplicationMenuItem 自体の Command プロパティに、新たに RibbonCommand を追加します。アプリケーションメニュー自体に設定した同じ基本的な定義が、そのまま利用できます。ただし、LabelTitle プロパティを「Close」に変更します。

<r:RibbonApplicationMenuItem>
   <r:RibbonApplicationMenuItem.Command>
      <r:RibbonCommand
         LabelTitle="Close" 
         LabelDescription="Close the Application"
         Executed="OnCloseApplication" />
   </r:RibbonApplicationMenuItem.Command
</r:RibbonApplicationMenuItem>

ここでアプリケーションを実行します。リボンのアプリケーションメニューにメニュー項目 (Close) が追加されたことを確認します。

このように RibbonCommand は、Ribbon コントロールの振る舞いや外見に関して、中核となる存在です。通常は、このあとの手順として、リボンに公開したい機能を、RibbonCommand に実装します。しかし、それには多くの時間がかかるので、ここでは、既にある程度作り込んだものが用意してあります。
ここで、AppCommands.xaml を開いてください。ここには、RibbonCommand としてコマンドが定義してあり (コメントアウトしてあります)、適切なイメージと関連付けてあります。
1. RibbonCommand の定義を囲ったコメントを解除します。コメントブロックの直前にある「>」は不要になるので、ビルドする前に必ず削除してください。
2. AppCommands.cs を開きます。このファイルには、既にコマンド (RoutedCommand) が定義されていますが、このあと、新しいコマンドで入れ替えます。
  Note: Visual Studio でコードブロックをまとめてコメントを解除する簡単な方法は、コードブロックの範囲を選択した後、Ctrl + K、Ctrl + U の順にショートカットキーを押します。または、範囲を選択した後、メニューバーから [編集] メニュー、[詳細]、[選択範囲のコメントを解除] の順にクリックします。
3. AppCommands.cs の中の、これらの既存のコマンドを削除するか、コメントアウトします。代わりに、コメントアウトされていた RibbonCommand オブジェクトのコメント (#region RibbonCommands から #endregion まで) を解除します。
4. 以下に示す名前空間を使用する using ディレクティブを、先頭の既存の using ディレクティブの次に追加します。
  
  using System.Windows;
  using Microsoft.Windows.Controls.Ribbon;

Note: RibbonCommand オブジェクトを生成する方法は、いくつかあります。ここでは XAML を利用しました。というのは、ここではほとんどがテキストであり、コンテンツのローカライズをするのが簡単だからです。しかし、分離コードを使用して、これらのオブジェクトを作成することもできます。

ここでビルドを行い、[出力] ウィンドウで「正常終了」のメッセージが表示され、コンパイルエラーがないことを確認しておきます。

Note: これ以降の手順において、現時点の Visual Studio のデザインビュー (MainWindow.xaml) には、正しく表示されませんが、XAML ビューを使用して、引き続き作業を行うことができます。また、Visual Studio の [エラー一覧] ウィンドウにも、XAML の解析に失敗した旨のエラーメッセージが表示される場合があります。[出力] ウィンドウで「正常終了」のメッセージが表示されれば問題ないので、そのまま次の手順に進んでください。

次に、リボンの内部を作り込んでいきます。リボンは、タブ、グループ、およびコントロールから構成されます。グループとコントロールは、コマンドに関連付けられ、視覚的な情報のほか、起動すべきコマンドを提供します。

リボンを構築するにあたり、改めてコマンドを整理し、どう見せるか検討することは重要です。一般に次の点をふまえて検討します。
- タブは、共通の機能をグループ化するために使用されます。よく使用されるものをまとめたり、一緒に使用するのが自然な機能などをグループ化したりします。
- グループは、タブの中で、類似しているが明確に異なるコマンドを分離するために使用します。たとえば、Office であれば、ホームタブの中に、グループとして、クリップボード、フォント、段落、スタイル、そして編集などがあります。
次にコントロールです。コントロールは、ユーザーが対話する構成要素です。リボンに配置される最も典型的なコントロールはボタンです。しかしリボンには、よくある対話型操作の各シナリオで利用される基本的なコントロールが複数提供されています。最も柔軟性ある実装例としては、リボンにカスタムコントロールを追加することもできます。リボンに標準装備されているコントロールとしては、次のものがあります。
- RibbonButton
- RibbonCheckBox
- RibbonToggleButton
- RibbonDropDownButton
- RibbonSplitButton
- RibbonComboBox
- RibbonTextBox
- RibbonLabel
- RibbonSeparator
- RibbonToolTip
これらすべては、標準的な WPF コントロールとして直接対応するものがあります。ほとんどの場合、実際はこれらのコントロールは、標準的な WPF コントロールから継承しており、リボンにおける管理で使用される IRibbonControl インターフェイスの実装が追加されたものです。このインターフェイスは、新規にコントロールを作成する際にも使用されるインターフェイスです。

この練習での目標は、先に用意した RibbonCommand に相当する一連の機能を、リボンとして公開することです。このあと、これらの機能をグループ化して、レイアウトは次のようにします。

ここでは、2 つのタブ (Banking と Reporting) があり、Banking タブには 5 つのグループがあります。それでは、実装方法を確認してみましょう。

MainWindow.xaml を XAML ビューで開き、既存の Ribbon コントロールに移動します。

次のように、<r:Ribbon> 要素ブロック内の既存コンテンツの下に、2 つの <r:RibbonTab> を追加します。
1. それぞれの Label プロパティには、タブに表示したいテキストを指定します。

<r:Ribbon DockPanel.Dock="Top">
       : (省略)
    <r:RibbonTab Label="Banking">
    </r:RibbonTab>
    <r:RibbonTab Label="Reporting">
    </r:RibbonTab>
</r:Ribbon>

次にグループを定義します。いくつか必要な作業があります。たとえば、グループに含めるべき一連のコントロールを定義するほか、グループから起動できるダイアログボックスで実行するコマンドを実装したり、グループを表示する領域が小さすぎる場合に表示するイメージを指定したりします。

Banking タブの中に <r:RibbonTab.Groups> セクションを追加します。

その中に <r:RibbonGroup> 要素のブロックを追加します。

<r:RibbonTab Label="Banking">
          <!-- Define the groups in this tab -->
          <r:RibbonTab.Groups>
              <!-- Clipboard commands -->
              <r:RibbonGroup>
              </r:RibbonGroup>
          </r:RibbonTab.Groups>

各グループの内部には、GroupSizeDefinitions というコレクションを持ち、グループ内にどのように子要素を配置するかを定義します。もし定義がなければ、リボンは既定のレイアウトを使用します。この定義をもとに、リボンはグループを利用可能なサイズに変更します。これによってリボンでは、動的にグループのリサイズが行われ、内部のコントロールは定義に基づいて、必要に応じて移動します。

多くのコントロールが必要な場合、カスタムレイアウトを作成し、それをリボンに適用することもでき、リボンはリサイズの基準として利用します。ここでは、簡単な GroupSizeDefinition を作成し、3 つのコントロールを追加して、大きなアイコンを表示するようにします。

グループの中に、<r:RibbonGroup.GroupSizeDefinitions> プロパティを追加します。(以下に完成したソースがあります。この手順 22 から 25 までに入力するソースは、この後置き換えるので、時間がなければ入力しなくとも構いません。)
このプロパティの値として、<r:RibbonGroupSizeDefinitionCollection> 要素のブロック (コレクション) を追加します。
このコレクションの中に、<r:RibbonGroupSizeDefinition> 要素のブロックを追加します。

さらにその中に、3 つの <r:RibbonControlSizeDefinition> オブジェクトを追加します。
1. それぞれの ImageSize プロパティに「Large」を設定し、IsLabelVisible プロパティには、「True」を設定します。

<!-- Clipboard commands -->
<r:RibbonGroup>
   <r:RibbonGroup.GroupSizeDefinitions>
      <r:RibbonGroupSizeDefinitionCollection>
         <r:RibbonGroupSizeDefinition>
             <r:RibbonControlSizeDefinition ImageSize="Large"
                                           IsLabelVisible="True"/>
            <r:RibbonControlSizeDefinition ImageSize="Large" 
                                           IsLabelVisible="True"/>
            <r:RibbonControlSizeDefinition ImageSize="Large"
                                           IsLabelVisible="True"/>
         </r:RibbonGroupSizeDefinition>
      </r:RibbonGroupSizeDefinitionCollection>
   </r:RibbonGroup.GroupSizeDefinitions>
</r:RibbonGroup>

しかし、共通の順番やレイアウトを共有するためには、このようなグループのサイズの定義をリソースの中に定義し、それを必要な個所から参照することになります。上記のコードを次のように書き換えてください。
1. <r:Ribbon> の中に、<r:Ribbon.Resources> セクション (リソース) を追加します。リソースの中には、グループサイズの定義を追加します。
2. Banking タブの GroupSizeDefinition プロパティには、そのリソースを参照するように設定します。

<r:Ribbon DockPanel.Dock="Top">
   <r:Ribbon.Resources>
      <r:RibbonGroupSizeDefinitionCollection x:Key="RibbonLayout">
         <r:RibbonGroupSizeDefinition>
            <!-- Control sizes: L,L,L -->
            <r:RibbonControlSizeDefinition ImageSize="Large"
                                           IsLabelVisible="True"/>
            <r:RibbonControlSizeDefinition ImageSize="Large"
                                           IsLabelVisible="True"/>
            <r:RibbonControlSizeDefinition ImageSize="Large"
                                           IsLabelVisible="True"/>
         </r:RibbonGroupSizeDefinition>
         <r:RibbonGroupSizeDefinition>
            <!-- Control sizes: L,M,M -->
            <r:RibbonControlSizeDefinition ImageSize="Large"
                                           IsLabelVisible="True"/>
            <r:RibbonControlSizeDefinition ImageSize="Small"
                                           IsLabelVisible="True"/>
            <r:RibbonControlSizeDefinition ImageSize="Small"
                                           IsLabelVisible="True"/>
         </r:RibbonGroupSizeDefinition>
         <r:RibbonGroupSizeDefinition>
            <!-- Control sizes: L,S,S -->
            <r:RibbonControlSizeDefinition ImageSize="Large"
                                           IsLabelVisible="True"/>
            <r:RibbonControlSizeDefinition ImageSize="Small"
                                           IsLabelVisible="False"/>
            <r:RibbonControlSizeDefinition ImageSize="Small"
                                           IsLabelVisible="False"/>
         </r:RibbonGroupSizeDefinition>
            <!-- Collapsed -->
         <r:RibbonGroupSizeDefinition IsCollapsed="True" />
      </r:RibbonGroupSizeDefinitionCollection>
   </r:Ribbon.Resources>
       : (省略) アプリケーション メニューの定義
   <r:RibbonTab Label="Banking">
      <r:RibbonTab.Groups>
         <!-- Clipboard commands -->
         <r:RibbonGroup
             GroupSizeDefinitions="{StaticResource RibbonLayout}">
         </r:RibbonGroup>
      </r:RibbonTab.Groups>
   </r:RibbonTab>
       : (省略)
</r:Ribbon>

これで、いくつかのグループサイズの定義ができました。この中のどれかを使用することになります。なお、このサンプルでは、グループ内のコントロールの数が、3 個を超えないことを前提にしています。これは、ここでのデザインの方針によるもので、コントロールをどう配置するかで変わってきます。また、1 つのグループの定義は、複数のグループをまたいで再利用することができます。今度は、グループにコントロールを追加します。

ここでは、RibbonButton コントロールを使用します。<r:RibbonGroup> の要素ブロックの中に、次のコマンドを実行する 3 つの RibbonButton コントロールを追加します。(このあとのソースを参照のこと)。

AppCommands.Cut

AppCommands.Copy

AppCommands.Paste
最後に、グループにコマンドを追加します。<r:RibbonGroup.Command> プロパティの中に、<r:RibbonCommand> を直接追加します。
1. LabelTitle プロパティに「Clipboard」を設定し、SmallImageSource プロパティには「images/Paste.png」を設定します。このイメージは、グループが閉じた際の表示に使用されます。

Clipboard のグループが次のようになっていることを確認します。

<!-- Clipboard commands -->
<r:RibbonGroup
         GroupSizeDefinitions="{StaticResource RibbonLayout}">
   <r:RibbonGroup.Command>
      <r:RibbonCommand LabelTitle="Clipboard"
                       SmallImageSource="images/Paste.png" />
   </r:RibbonGroup.Command>
   <r:RibbonButton Command="me:AppCommands.Cut"/>
   <r:RibbonButton Command="me:AppCommands.Copy"/>
   <r:RibbonButton Command="me:AppCommands.Paste"/>
</r:RibbonGroup>

ここで、アプリケーションを実行します。次図のように、Clipboard のグループに、Cut、Copy、Paste の 3 つの項目があることを確認します。確認が済んだら、アプリケーションを終了します。

最後に、スクリーンショットと同じになるように、グループを追加します。また、適当なコマンドと関連付けてください (AppCommands.xaml の中の一覧を参照してください)。グループの定義を行うには、前の手順で行った方法を参考にしてください。また、このあとに掲載するソースも、必要に応じて参照してください。

<r:RibbonTab Label="Banking">
   <r:RibbonTab.Groups>
      <!-- Clipboard commands -->
      <r:RibbonGroup GroupSizeDefinitions="{StaticResource RibbonLayout}">
         <r:RibbonGroup.Command>
            <r:RibbonCommand LabelTitle="Clipboard"
                              SmallImageSource="images/Paste.png" />
         </r:RibbonGroup.Command>
         <r:RibbonButton Command="me:AppCommands.Cut"/>
         <r:RibbonButton Command="me:AppCommands.Copy"/>
         <r:RibbonButton Command="me:AppCommands.Paste"/>
      </r:RibbonGroup>
      <r:RibbonGroup GroupSizeDefinitions="{StaticResource RibbonLayout}">
         <r:RibbonGroup.Command>
            <r:RibbonCommand LabelTitle="Checkbook"
                             SmallImageSource="images/AddNew.png" />
         </r:RibbonGroup.Command>
         <r:RibbonButton Command="me:AppCommands.AddNew"/>
         <r:RibbonButton Command="me:AppCommands.Clear" />
         <r:RibbonButton Command="me:AppCommands.Delete"/>
      </r:RibbonGroup>
      <r:RibbonGroup GroupSizeDefinitions="{StaticResource RibbonLayout}">
         <r:RibbonGroup.Command>
            <r:RibbonCommand LabelTitle="Statements" 
                             SmallImageSource="images/Reconcile.png" />
         </r:RibbonGroup.Command>
         <r:RibbonButton Command="me:AppCommands.Reconcile"/>
      </r:RibbonGroup>
      <r:RibbonGroup GroupSizeDefinitions="{StaticResource RibbonLayout}">
         <r:RibbonGroup.Command>
            <r:RibbonCommand LabelTitle="Online" 
                             SmallImageSource="images/CreditCards.png" />
         </r:RibbonGroup.Command>
         <r:RibbonButton Command="me:AppCommands.DownloadStatements"/>
         <r:RibbonButton Command="me:AppCommands.DownloadCreditCards"/>
         <r:RibbonButton Command="me:AppCommands.Transfer"/>
      </r:RibbonGroup>
      <r:RibbonGroup GroupSizeDefinitions="{StaticResource RibbonLayout}">
         <r:RibbonGroup.Command>
            <r:RibbonCommand LabelTitle="Tools"
                             SmallImageSource="images/Backup.png" />
         </r:RibbonGroup.Command>
         <r:RibbonButton Command="me:AppCommands.Backup"/>
         <r:RibbonButton Command="me:AppCommands.Calculator"/>            
      </r:RibbonGroup>
   </r:RibbonTab.Groups>
</r:RibbonTab>

これで複数のグループが実装できたので、アプリケーションを実行して、リサイズしてみてください。アプリケーションのウィンドウの幅や高さを変えると、リボンのレイアウトがどう変化するか確認してください。

Note: もし、リボンのグループを閉じたくなければ、それぞれのグループに名前を割り振った後、RibbonTab.GroupSizeReductionOrder プロパティに、リサイズの際にグループが使用するレイアウトテンプレートを設定します。

次に、2 つ目のタブを実装します。1 つ目のタブとほぼ同じですが、レポートのリストを表示する MenuItem オブジェクトを伴う RibbonDropDownButton コントロールを使用する点が異なります。

2 つ目のタブが前図になるように自力で実装するか、または、次のソースを参考に作成してください。

<r:RibbonTab Label="Reporting">
   <r:RibbonTab.Groups>
      <r:RibbonGroup GroupSizeDefinitions="{StaticResource RibbonLayout}">
         <r:RibbonGroup.Command>
            <r:RibbonCommand LabelTitle="Reports" 
                    SmallImageSource="images/CashflowReport.png" />
         </r:RibbonGroup.Command>
         <r:RibbonButton Command="me:AppCommands.TrendReport" />
         <r:RibbonButton Command="me:AppCommands.BudgetReport"/>
         <r:RibbonDropDownButton Command="me:AppCommands.OtherReports">
            <MenuItem Header="Cash Flow Report" />
            <MenuItem Header="Favorites Report" />
            <MenuItem Header="Spending Report" />
            <MenuItem Header="Savings Report" />
            <MenuItem Header="Credit Report" />
         </r:RibbonDropDownButton>
      </r:RibbonGroup>
   </r:RibbonTab.Groups>
</r:RibbonTab>

このアプリケーションに対して最後に実装するのは、リボンで最も頻繁に使用するコマンドを、クイックアクセスツールバーに追加することです。このツールバーは、アプリケーションメニューの隣に表示されます。これは、Ribbon.QuickAccessToolBar プロパティに、QuickAccessToolBar を設定することで行います。

<r:Ribbon> 要素のブロックの中に (リソースの定義 Ribbon.Resources セクションの後が良いでしょう)、<r:Ribbon.QuickAccessToolBar> セクションを追加します。
この中に、<r:RibbonQuickAccessToolBar> 要素のブロックを追加します。
1. CanUserCustomize プロパティに「True」を設定します。
このツールバーに、任意の RibbonButton を追加します。この例では、AddNew、Cut、Copy、Paste および Help が追加されていますが、自由に追加して構いません。
1. RibbonQuickAccessToolBar.Placement プロパティには、それぞれのボタンをユーザーがツールバーから削除できるかなどを指定します。指定できる値は、「InCustomizeMenu」、「InToolBar」および「InCustomizeMenuAndToolBar」です。

完成したコードが次のようになっているか確認します。(追加したコマンドによって異なります。)

<!-- Quick access menu -->
<r:Ribbon.QuickAccessToolBar>
   <r:RibbonQuickAccessToolBar CanUserCustomize="True">
      <r:RibbonButton Command="me:AppCommands.AddNew" 
        r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar" />
      <r:RibbonButton Command="me:AppCommands.Cut" 
        r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar" />
      <r:RibbonButton Command="me:AppCommands.Copy" 
        r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar" />
      <r:RibbonButton Command="me:AppCommands.Paste"  
        r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar" />
      <r:RibbonButton Command="me:AppCommands.Help" 
        r:RibbonQuickAccessToolBar.Placement="InToolBar" />
   </r:RibbonQuickAccessToolBar>
</r:Ribbon.QuickAccessToolBar>

アプリケーションを実行し、次のように表示されるか確認します。

クイックアクセスツールバーを使用すると、タブがどのような状態であろうと、よく使用するコマンドは常に利用できる状態にあります。また、ユーザーは下向きの矢印を展開すると、この一覧をカスタマイズできます (前述のように、プロパティで制限を加えることができます)。

これで、基本的なリボンの実装作業は終りました。このタスクの完成品は、演習フォルダの Ex1_Solution_Task1 サブフォルダの中にあります。

しかし、Ribbon コントロールの機能はこれだけではありません。テンプレートを介して、様々なカスタマイズが可能であり、ここで触れなかったコントロールもいくつかあります。今回作成したアプリケーションをもとに、他のコントロールも追加してみてください。または、次のタスクに進んで、アプリケーションにグラス効果を与える Ribbon コントロールを使用する練習を行ってみてください。

ページのトップへ

タスク 2 – Windows Vista の「グラス」効果を提供する

このタスクでは、もう 1 つの一般的な要望である、Windows Vista や Windows 7 上のアプリケーションに、「グラス」効果を利用する方法について確認します。Ribbon コントロールには、RibbonWindow と呼ばれる新しい Windows の派生クラスを介して、この機能が追加されています。

この新しいクラスは、単純に従来の Windows に置き換わるものであり、自動的にタイトルバーを取り除き、アプリケーションの外見を現代的なものにします。

Note: この機能を正常に使用して、グラス効果を確認するには、エアログラスが有効な環境でなければなりません。

Visual Studio 2008 SP1 を使用して、この演習用のフォルダの中の、以下のパスのソリューションを開きます。または、前のタスクで完成させたアプリケーションを、引き続き使います。

Ex1_Starter_Task2\CheckbookManager.sln
このアプリケーションをビルドします。
Note: タスク 1 でも触れたように、Visual Studio の [エラー一覧] ウィンドウにも、XAML の解析に失敗した旨のエラーメッセージが表示される場合があります。[出力] ウィンドウで「正常終了」のメッセージが表示されれば問題ないので、そのまま次の手順に進んでください。
MainWindow.xaml を XAML ビューで開き、<Window> タグを <r:RibbonWindow> タグに置き換えます。必ず、終了タグも同様に </r:RibbonWindow> に書き換えます。
MainWindow.xaml.cs を開きます。ソリューションエクスプローラ上で、このファイルが見つからない場合は、MainWindow.xaml ノードの先頭に付いた [+] ハンドルをクリックしてツリーを展開させて、MainWindow.xaml.cs ノードを表示させてください。
1. 継承元の基本クラスである Window クラスを、RibbonWindow クラスに置き換えます。なお、完全修飾名を使わずに、RibbonWindow を表記するには、以下の using ディレクティブを追加する必要があります。
  
  using Microsoft.Windows.Controls.Ribbon;
  
  または、継承元を置き換えずに、継承元の記述自体を削除します。もともと、このクラスはパーシャルクラスであり、XAML 側の定義を元に、XAML コンパイラが生成するもう一方のパーシャルクラスから、適切な継承元を識別できます。
ここで、アプリケーションを実行します。次図のようにクイックアクセスツールバーがタイトルバーに移動したことを確認します。これは「グラスウィンドウ」の動作です。必要なスペースを節約し、Office 2007 に似た視覚効果を提供します。
見た目はよいですが、2 つ問題もあります。
1. タイトルバーにタイトルがありません。グラスウィンドウを利用したことで起きました。
2. 左上の端にウィンドウを制御するアイコンがあります。

XAML を使用して、これら両方の問題を解決します。
1. まず XAML ビューを使用して、<r:Ribbon> 開始タグに移動し、Title プロパティにタイトルを指定します。これによって、RibbonWindow にタイトルが表示されます。元の Window からタイトルをコピーペーストして構いませんが、ここでは、既存の Window の Title プロパティとデータバインディングを行うことで、タイトルを反映するようにします。(紙面の都合で改行していますが、実際は 1 行で入力してください。)

<r:Ribbon DockPanel.Dock="Top"
          Title="{Binding RelativeSource={RelativeSource FindAncestor,
                          AncestorType={x:Type Window}},Path=Title}">

ここでは、コントロールのツリーをさかのぼり Window を突き止め、リボンの Title プロパティと Window のTitle プロパティとの間で、データバインディングを行います。

b.	さらに、RibbonWindow の開始タグに元々あった Icon プロパティの設定を削除します。つまり、「Icon="images/Coins.png"」を削除します。

アプリケーションを実行します。タイトルバーにはタイトルが表示され、タイトルバー左端のアイコンが無くなったことを確認します。

最後に行うことは、Ribbon コントロールの Windows 7 のテーマを使用した既定のスタイルを変更し、Office 2007 の「Office ボタン」のような外見に変更します。このために必要な作業は、単に異なるスタイルをアプリケーションやウィンドウのリソースとして追加し、適用するだけです。
MainWindow.xaml.cs を開き、コンストラクタに移動します。

コンストラクタ内の最初の行に、次のコードを追加して、Office 2007 の「black」テーマを使用するようにします。

public MainWindow()
{
    this.Resources.MergedDictionaries
         .Add(Microsoft.Windows.Controls
              .Ribbon.PopularApplicationSkins.Office2007Black);

アプリケーションを実行し、アプリケーションメニューのボタンの形状が、Office 2007 のようになったことを確認します。

この練習の完成品は、演習フォルダの Ex1_Solution_Task2 サブフォルダの中にあります。

ページのトップへ

3. まとめ

この演習では、以下の練習を行いました。

既存のメニューとツールバーを、Ribbon コントロールに置き換えました。
XAML を使用して、リボンのタブやグループを構成し、ボタンを配置しました。
グループはリサイズや自動的な再配置が可能になるように定義し、また、ボタンにはコマンドやイメージを割り当てました。
エアログラスによって透けたタイトルバーに、クイックアクセスバーなどリボンを統合するために、Window クラスを RibbonWindow クラスに置き換えました。
Office 2007 の Office ボタンのような外観が提供されるように、適用されるスタイルを変更しました。

この演習で、WPF に対応したリボンについて、楽しんで学んで頂ければ幸いです。次は、これらのアイデアを活かして、ご自身のプロジェクトに適用してみてください。

ページのトップへ

次の方法で共有

ハンズオンラボ: WPF の活用～ WPF Ribbon コントロール～

ダウンロード

目次

1. 演習: WPF の活用～ Ribbon コントロール～

前提知識

演習のシステム要件

WPF Toolkit の入手とインストール

WPF Ribbon Control の入手

演習で使用する付属のソースプログラム (サンプルプログラム) のインストール方法

演習の目的

2. 練習1: Ribbon コントロールの使用

タスク 1 - Ribbon コントロールを使用する

タスク 2 – Windows Vista の「グラス」効果を提供する

3. まとめ

その他のリソース

次の方法で共有

ハンズオン ラボ: WPF の活用 ～ WPF Ribbon コントロール ～

ダウンロード

目次

1. 演習: WPF の活用 ～ Ribbon コントロール ～

前提知識

演習のシステム要件

WPF Toolkit の入手とインストール

WPF Ribbon Control の入手

演習で使用する付属のソース プログラム (サンプル プログラム) のインストール方法

演習の目的

2. 練習1: Ribbon コントロールの使用

タスク 1 - Ribbon コントロールを使用する

タスク 2 – Windows Vista の「グラス」効果を提供する

3. まとめ

その他のリソース

ハンズオンラボ: WPF の活用～ WPF Ribbon コントロール～

1. 演習: WPF の活用～ Ribbon コントロール～

演習で使用する付属のソースプログラム (サンプルプログラム) のインストール方法