[WPFリボン プログラミング] 第5回 ～タブとグループの作り方～

  • Article

[WPFリボン プログラミング ]第5回 ～タブとグループの作り方～

[ テスト用プロジェクトの作成 ]
リボン インターフェイスの実装をするために、最初に単純なテスト用のアプリケーションを作成し、そのアプリケーションに機能を追加していく形式で説明します。
まずは、テスト用のアプリケーションを下記の手順で作成します。

手順1 : 新規プロジェクトの作成Microsoft Ribbon for WPFをインストールしている環境でVisual Studio 2010を起動し、[ファイル]-[新規作成]-[プロジェクト]で[WPFアプリケーション]を選択して、新しいWPFアプリケーションを作成します。
プロジェクト名は任意の名前で構いません。
なお、C#で説明するので、言語はC#を選んでください。Visual Basicの場合は、手順4のみ異なります。
プロジェクトを新規作成するときに、[WPF Ribbon Application]も選択できますが、今回は選択しないでください。WPF Ribbon Applicationのひな形には、最初からタブやアイコンが登録されています。今回は、なるべくシンプルなアプリケーションに機能を追加したいので、WPFアプリケーションを元に実装していきます。

手順2 : Ribbonコントロールの追加ツールボックスの[Microsoft Ribbon for WPF]にある[Ribbon]コントロールを、XAMLデザイナー上にドラッグ アンド ドロップします。位置は、ウィンドウの左上に揃えておきます。

手順3 : Ribbonコントロールのプロパティの変更XAMLデザイナー上に貼り付けたRibbonコントロールを選択している状態で、プロパティウィンドウを使用してWidthプロパティとHeightプロパティをAuto、HorizontalAlignmentプロパティをStretchに変更します。
WidthプロパティやHeightプロパティをAutoにするときや、HorizontalAlignmentプロパティをStretchにするには、それぞれのプロパティ名が書かれた部分の右にある◆をクリックし、[値のリセット]を選択します。

手順4 : C# のコードの変更C#のコードであるMainWindow.xaml.csを開き、コードの先頭のusingが並んでいるところに、下記の1行を追加します。

using Microsoft.Windows.Controls.Ribbon;

次に、MainWindowの宣言部分を以下のようにWindowからRibbonWindowに変更します。
(変更前) public partial class MainWindow : Window
(変更後) public partial class MainWindow : RibbonWindow

Visual Basicの場合は、MainWindow.xaml.vbに以下の2行を追加します。

Imports Microsoft.Windows.Controls.Ribbon ' この文を追加
Class MainWindow
Inherits RibbonWindow ' この文を追加
End Class

手順5 : XAMLのコードの変更XAMLのコードであるMainWindow.xamlを開き、先頭行のWindowと書かれて部分をを以下のようにmy:RibbonWindowに変更します。

(変更前) <Window x:Class= (この後はプロジェクト名によって変わります)
(変更後) <my:RibbonWindow x:Class= (この後はプロジェクト名によって変わります)

次に、最下行のWindowと書かれた部分も、my:RibbonWindowに変更します。

(変更前) </Window>
(変更前) </my:RibbonWindow>

手順6 : XAMLコードの編集この後の作業が容易になるように、MainWindow.xamlの以下の部分を変更します。

(変更前)
<my:Ribbon Name="ribbon1" VerticalAlignment="Top" />

(変更後)
<my:Ribbon Name="ribbon1" VerticalAlignment="Top">

</my:Ribbon>

ここまでで、テスト用のアプリケーションが完成しました。
[F5]キーを押して実行すると、リボンインターフェイスがついたアプリケーションが起動します。

[ タブを作る ]
タブを作るには、ツールボックスにあるRibbonTabコントロールを、XAMLデザイナー上にドラッグ アンド ドロップします。
しかし、XAMLデザイナーのグラフィカル デザインビュー上(上半分の白い部分)にドロップしても、うまくいかないときがあります。
そのときは、XAMLが表示されている分離コードビュー(下半分のXAMLの部分)にドラッグ アンド ドロップします。
そのとき、ドロップする位置は、<my:Ribbon>タグで囲われている中にドロップします。手順6の1行空いている部分です。
ドロップすると以下の変更前のようになりますので、変更後のように編集します。

(変更前)
<my:Ribbon Name="ribbon1" VerticalAlignment="Top">
<my:RibbonTab />
</my:Ribbon>

(変更後)
<my:Ribbon Name="ribbon1" VerticalAlignment="Top">
<my:RibbonTab>

</my:RibbonTab>
</my:Ribbon>

タブの名前は、以下のようにHeaderプロパティによって指定します。
<my:RibbonTab Header="タブ1">

[ グループを作る ]
グループも、タブと同じような方法で作成します。
グループはタブの中に作られるので、以下のように<my:RibbonTab>タグの中に<my:RibbonGroup>タグを作ります。
ツールボックスからRibbonGroupコントロールをドラッグ アンド ドロップして、編集しても構いません。
RibbonTabと同じく、Headerプロパティで表示名を指定します。

<my:RibbonTab Header="タブ1">
<my:RibbonGroup Header="グループ1">

</my:RibbonGroup>
</my:RibbonTab>

[ 今回の生成物 ]
今回の手順で、下図のようなアプリケーションが作成できました。

生成されたXAMLのコードは、以下のようになります。
最初の行のWpfApplication26と書かれている部分には、作成したプロジェクト名が表示されています。

<my:RibbonWindow x:Class="WpfApplication26.MainWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" xmlns:my="https://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon">
<Grid>
<my:Ribbon Name="ribbon1" VerticalAlignment="Top">
<my:RibbonTab Header="タブ1">
<my:RibbonGroup Header="グループ1">

                </my:RibbonGroup>
</my:RibbonTab>
</my:Ribbon>
</Grid>
</my:RibbonWindow>

次回からは、このアプリケーションに機能を実装していきます。

[WPFリボンの開発用コンポーネントのダウンロード先]
WPFリボンの開発は、Visual Studio 2010またはExpression Blend 4に、Microsoft Ribbon for WPFというコンポーネントを追加することによって開発できます。
以下のサイトからダウンロードすることができます。
https://www.microsoft.com/downloads/en/details.aspx?FamilyID=2bfc3187-74aa-4154-a670-76ef8bc2a0b4&displaylang=en

[WPFリボン プログラミング]
第1回 : ～リボン インターフェイスとは～
第2回 : ～開発環境を揃える～
第3回 : ～リボンについて知っておくべきこと～
第4回 : ～リボン インターフェイスを作る2つの方法～
第5回 : ～タブとグループの作り方～

マイクロソフト
田中達彦