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

■スタイル

　スタイルは、Figure 5に示すように、フォント・サイズや背景色、文字色など、いくつかのプロパティ値の設定を、複数のUI要素に一斉適用する機能である。

Figure 5： スタイルの適用

　Silverlightでも、HTMLでいうところのCSSのようなスタイル設定の機構を持っている。HTMLとCSSが全く異なる見た目になる（「<>文化」と「{}文化」の差）のに対して、Silverlightのものは、スタイルの部分もXAMLのルールに従う（XML形式で書き、XMLタグから.NETオブジェクトが生成される）ことになる。例えば、List 8に示すようなXAMLコードになる。

<Style x:Key="GridStyle1" TargetType="Grid">   <Setter Property="Background" Value="#FFCCAAAA"/> </Style>

List 8： XAMLのスタイルの例

　XML形式であるため、Visual Studioなどのツールでの読み書きが容易である。特に、Visual Studio 2012では、XAMLエディタやビジュアル・デザイナ機能が強化されていて、スタイルの編集も容易になっている。

●スタイルの定義

　前述の例のとおり、<Style>要素によってスタイルを定義する。<Style>要素は、前節で説明したリソースとして定義しておくのが一般的である。

　Visual Studio 2012では、Figure 6に示すように、ビジュアル・デザイナ上からコンテキスト・メニューでスタイルの編集／新規作成ができる。

Figure 6： Visual Studio 2012を使ったスタイルの作成

　［定義先］で指定したXAML要素のリソースとして、<Style>要素が作成される。

　<Style>要素内には、<Setter>要素を並べて書く。それぞれの<Setter>要素には、List 9に示すように、Propety属性でプロパティ名を、Value属性で設定したい値を記述する。

<Style x:Key="GridStyle1" TargetType="Grid">   <Setter Property="Background" Value="#FFCCAAAA"/>   <Setter Property="Cursor" Value="Hand"/>   <Setter Property="Margin" Value="10"/> </Style>

List 9： スタイルの設定例

　これらの編集は、Visual Studio 2012上では、Figure 7に示すように、プロパティ・ウィンドウを使って設定できる。

Figure 7： Visual Studio 2012のプロパティ・ウィンドウ上でのスタイル設定

　もちろん、XAMLコードを直接編集しても構わない。Figure 8に示すように、Visual StudioのXAMLエディタ上では、スタイル設定可能なプロパティの一覧が（IntelliSenseの）補完候補として表示される。

Figure 8： Visual Studio 2012のXAMLエディタ上でのスタイル編集

●スタイルの適用

　適用したスタイルは、FrameworkElementクラスのStyleプロパティに与えることで、UI要素に反映できる。

　Figure 6のようにVisual Studioのエディタ機能を使ってスタイルを作成した場合、適用先にはすでにList 10に示すような属性が追加されているはずだ。

<Grid Style="{StaticResource GridStyle1}"> </Grid>

List 10： スタイルの適用例

　適用する（＝StaticResouceマークアップ拡張で参照する）スタイルの変更も、Figure 9に示すように、プロパティ・ウィンドウ上から行える。

Figure 9： Visual Studio 2012のプロパティ・ウィンドウ上でのスタイル適用の変更

○スタイルの自動適用

　リソース中の<Style>要素に対して、x:Key属性を省略し、TargetType属性でスタイル適用先の型のみを指定した場合、その型のUI要素全てに自動的にスタイルが適用される。例えば、List 11に示すようなXAMLコードを書くと、3つある<Button>要素全てに対してスタイルが適用される。

<navigation:Page   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>     <Style TargetType="Button">       <Setter Property="FontSize" Value="20" />       <Setter Property="Foreground" Value="Red" />     </Style>   </navigation:Page.Resources>   <Grid>     <StackPanel>       <Button Content="button 1" />       <Button Content="button 2" />       <Button Content="button 3" />     </StackPanel>   </Grid> </navigation:Page>

List 11： スタイルの自動適用の例

　ちなみにこの場合、TargetType属性で指定した値がそのままResourcesプロパティ（辞書型要素）のキーとして使用される。

　次のページでは、テンプレートについて説明する。

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

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

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