連載：次世代技術につながるSilverlight入門 再利用性とUIのカスタマイズ 岩永 信之 2012/10/02

Page1 Page2 Page3 Page4

　今回は、再利用性やUI（ユーザー・インターフェイス）のカスタマイズの話をしていこう。SilverlightにおけるUIのカスタマイズは、以下のような機能を使って行える。

• リソース： ブラシなどの1つのオブジェクトを、複数のUI要素から参照する
• スタイル： プロパティ値（＝フォント・サイズや背景色など）を、複数のUI要素に一斉適用する
• コントロール・テンプレート： 機能（＝押したらコマンド実行するとか、つまみをスライドするとか）だけを残して、見た目を完全に入れ替える
• データ・テンプレート： データの表示方法を、コントロール・テンプレートと同様の方法で、柔軟に定義する
• コントロール作成： 機能面まで含めた完全なコントロールを自作する

　Silverlightでは（WPFやWinRTでも）、「スタイル」と「テンプレート」の仕組みが非常に強力で、UIのカスタマイズという用途ではほとんどの場合、このいずれかを使う。2種類あるテンプレートのうち、データ・テンプレートに関しては、次回以降、「データ・バインディング」という仕組みとともに説明する。従って、今回は、スタイルとコントロール・テンプレートの2つに特に焦点を当てて説明することになる。

■リソース

　Silverlightは、1つのオブジェクトを複数のUI要素で共有するための、「リソース」という仕組みを持っている（スタイルもテンプレートも、リソース化して使う場合が多い）。

　例えば、リソースを使わず、List 1のようなXAMLコードを書いた場合、Figure 1に示すように、2つのブラシ（SolidColorBrushクラス（System.Windows.Media名前空間）のオブジェクト）が生成される。

<StackPanel>   <Button Foreground="Blue" Content="button 1" />   <Button Foreground="Blue" Content="button 2" /> </StackPanel>>

List 1： リソースを利用しない例

Figure 1： List 1の結果、生成されるオブジェクト

　これに対して、リソースを使って、List 2のようなXAMLコードを書くことで、Figure 2に示すように、生成されるブラシを1つだけにし、複数のUI要素から参照できる。

<StackPanel>   <StackPanel.Resources>     <SolidColorBrush x:Key"brush" Color="Blue" />   </StackPanel.Resources>   <Button Foreground="{StaticResource brush}" Content="button 1" />   <Button Foreground="{StaticResource brush}" Content="button 2" /> </StackPanel>

List 2： リソースを利用する例

Figure 2： List 2の結果、生成されるオブジェクト

　1つのオブジェクトを複数箇所から参照することで、変更が必要になった際、1カ所の修正で所望の全ての箇所に変更が反映される。

　後述する（そして、今回の主役の）スタイルやテンプレートも、リソースとして定義して、複数のUI要素から参照することが多い。

●リソースの定義

　FrameworkElementクラス（System.Windows名前空間）はResourcesプロパティを持っていて、この中で定義したXAML要素がリソースになる。UI要素のほとんどはFrameworkElementクラスから派生しているため、ほとんどの要素中でリソースを定義できる。

　このResourcesプロパティの型は、ResourceDictionaryクラス（System.Windows名前空間）になっている。名前どおり、辞書（Dictionary）になっていて、要素にはx:Key属性でキーを指定する。例えば、List 3のような書き方をする。

<UserControl x:Class="CustomizationSample.MainPage"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">   <UserControl.Resources>     <SolidColorBrush x:Key="brush1" Color="Red" />     <SolidColorBrush x:Key="brush2" Color="Green" />     <SolidColorBrush x:Key="brush3" Color="Blue" />   </UserControl.Resources> </UserControl>

List 3： リソースの定義例

●外部リソースの読み込み

　ルート要素がResouceDictionaryのXAMLファイル（＝リソース・ディクショナリ）を別途用意しておき、それを外部リソースとして読み込むこともできる。

　リソース・ディクショナリはVisual Studioの項目テンプレートにもなっているので、これを使ってXAMLファイルを追加するといいだろう。［ソリューション エクスプローラー］上で、追加したい場所のコンテキスト・メニューから［追加］−［新しい項目］を選択すると表示されるダイアログで、Figure 3に示すように、［Silverlight リソース ディクショナリ］を選択する。

Figure 3： リソース・ディクショナリの追加画面

　リソース・ディクショナリ内は、例えば、List 4に示すような書き方をする。

<ResourceDictionary   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">   <SolidColorBrush x:Key="brush1" Color="Red" />   <SolidColorBrush x:Key="brush2" Color="Green" />   <SolidColorBrush x:Key="brush3" Color="Blue" /> </ResourceDictionary>

List 4： リソース・ディクショナリの例

　このリソース・ディクショナリ（例として、「Dictionary1.xaml」というファイル名を付けたとして）を読み込みたい側のXAMLコードは、List 5に示すように、ResourceDictionary要素のSourceプロパティに、読み込みたいファイルのURIを指定する。

<navigation:Page   x:Class="CustomizationSample.Views.ResourceDictionarySample"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation">   <navigation:Page.Resources>     <ResourceDictionary Source="Dictionary1.xaml" />   </navigation:Page.Resources> </navigation:Page>

List 5： リソース・ディクショナリを読み込む例

　また、複数のリソース・ディクショナリを同時に読み込みたい場合、List 6に示すように、MergedDictionariesプロパティを利用する。

<navigation:Page   x:Class="CustomizationSample.Views.ResourceDictionarySample"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation">   <navigation:Page.Resources>     <ResourceDictionary>       <ResourceDictionary.MergedDictionaries>         <ResourceDictionary Source="Dictionary1.xaml" />         <ResourceDictionary Source="Dictionary2.xaml" />       </ResourceDictionary.MergedDictionaries>     </ResourceDictionary>   </navigation:Page.Resources> </navigation:Page>

List 6： 複数のリソース・ディクショナリを読み込む例

●リソースの参照

　リソースの利用側では、StaticResourceマークアップ拡張を使う。例えば、List 7に示すような書き方をする。

<UserControl x:Class="CustomizationSample.MainPage"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">   <UserControl.Resources>     <SolidColorBrush x:Key="brush" Color="Green" />   </UserControl.Resources>   <StackPanel>     <Button Foreground="{StaticResource brush}" Content="button 1" />     <StackPanel>       <StackPanel.Resources>         <SolidColorBrush x:Key="brush" Color="Blue" />       </StackPanel.Resources>       <Button Foreground="{StaticResource brush}" Content="button 2" />     </StackPanel>   </StackPanel> </UserControl>

List 7： リソースを参照する例

この例中の「{StaticResource brush}」の部分の「brush」は、リソースのキー（＝x:Key属性の内容）である。

　リソースは、要素自身から順に親要素をたどって検索され、同じキーのリソースがあった場合には要素に近い側が使われる。この例の場合、「brush」というキーを持つリソースが2つあるが、1つ目のボタン（＝Content属性の値が「button 1」のもの）は緑色（Color属性の値が「Green」）、2つ目のボタン（＝Content属性の値がbutton 2のもの）は青色（Color属性の値が「Blue」）のブラシを参照することになる。

　Visual Studio上では、Figure 4に示すように、プロパティ設定画面からリソースの参照設定をできる（図はVisual Studio 2012のものである）。

Figure 4： Visual Studio 2012のプロパティ設定画面上でのリソースの参照

［Background］プロパティの値を設定しているところ。［ローカル リソース］から［brush1］を選択している。

　続いて次のページでは、スタイルについて説明する。

INDEX
	[連載] 次世代技術につながるSilverlight入門
	再利用性とUIのカスタマイズ
	1．リソース
	2．スタイル
	3．テンプレート
	4．コントロールの作成

「連載：次世代技術につながるSilverlight入門」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）