[Windows Phone] スタイルでコントロールの外観をカスタマイズする

はじめに

こんにちは！加藤潤です。 今回はWindows Phoneでスタイルを定義してコントロールの外観をカスタマイズする方法をご紹介します。

開発環境

• Windows 10 Pro
• Microsoft Visual Studio Community 2015

準備

今回はボタンの外観をカスタマイズしてみたいと思います。 まずは以下のようにボタンを5つ配置しました。

<br /><button></button>
<button></button>
<button></button>

<button></button>
<button></button>

Gridの直下にボタンが3つあり、Gridの中のStackPanel内にさらにボタンが2つあります。 この状態では特にスタイルを適用していないのでプレビュー画面は以下のようになります。

ボタンに直接スタイルを定義する

準備が出来たのでスタイルを定義しましょう。 まずはボタンに直接スタイルを定義する方法です。 button1を下記のように変更します。

<button>
</button>

ボタンの背景色をGreen、前面色をWhiteにしてみました。 この状態でプレビュー画面を確認してみましょう。スタイルを定義したbutton1にだけスタイルが適用されています。

TargetTypeでスタイル適用対象コントロールの型を指定しています。今回はボタンなので"Button"を指定しています。

複数のコントロールに同じスタイルを適用する

ボタンが1つだけならボタンに直接スタイルを定義してもさほど問題にならないかと思いますが、ボタンが複数あったらどうでしょう。 同じスタイルを複数のコントロールに一括で適用したい場面も出てくるでしょう。 XAMLにはそのための仕組みがちゃんと用意されています。

その場合はスタイルをリソースとして定義します。 XAMLでは様々な要素がリソース（Resouces）を持つことができます。 例えば画面を表すPageやコンテナコントロールであるStackPanel、アプリケーション自体もリソースを持つことができます。

ページ単位でスタイルを定義する

画面（Page）全体でスタイルを統一するには以下のようにPageのリソースとしてスタイルを定義します。

<br />

画面上の全てのボタンにスタイルが適用されていることがわかると思います。

コンテナコントロール単位でスタイルを定義する

1つの画面の中でもGridやStackPanelの中に配置したコントロールにだけスタイルを適用したい場合は対象コンテナコントロールのリソースとしてスタイルを定義します。

<br /><br /><button></button>
<button></button>

この例ではStackPanel内のボタンにのみスタイルが適用されていることがわかるかと思います。

アプリケーション単位でスタイルを定義する

画面によらず、アプリケーション全体を通じて外観を統一したい場合もあると思います。 その場合は以下のようにアプリケーションのリソースとしてスタイルを定義します。 （プレビューの結果はページ単位と同じなので割愛します）

<br /><br /><br />

コントロール毎に個別にスタイルを指定する

前述したようにボタンにスタイルを直接定義することでボタン毎にスタイルを指定することもできますが、 再利用性を考えるとやはりスタイルはリソースして定義しておきたいところです。 例えばリソースに複数のスタイルを定義しておいてボタンによって適用するスタイルを変えたい場合はどうするのでしょうか？

その場合は以下のようにスタイル定義時に識別子となるx:Keyを付与しておきます。

<br />

そしてスタイル適用対象のコントロール側でStyle="{StaticResource スタイルのキー}"としてスタイルを参照するようにします。

<button></button>
<button></button>

以下のようにボタン側で指定したスタイルが適用されていることが確認できました。

まとめ

いかがだったでしょうか。Windows Phone（XAML）ではCSSと似た感じでスタイルを定義・適用できます。 スタイルを上手く活用していきましょう！