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

2016.01.04

はじめに

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

開発環境

  • Windows 10 Pro
  • Microsoft Visual Studio Community 2015

準備

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

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RenderTransformOrigin="0.307,0.5">
    <Button x:Name="button1" Content="Button 1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
    <Button x:Name="button2" Content="Button 2" HorizontalAlignment="Left" Margin="10,47,0,0" VerticalAlignment="Top"/>
    <Button x:Name="button3" Content="Button 3" HorizontalAlignment="Left" Margin="10,84,0,0" VerticalAlignment="Top"/>
    <StackPanel HorizontalAlignment="Left" Height="100" Margin="10,121,0,0" VerticalAlignment="Top" Width="340" Orientation="Horizontal">
        <Button x:Name="button4" Content="Button 4"/>
        <Button x:Name="button5" Content="Button 5 " Margin="10"/>
    </StackPanel>
</Grid>

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

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

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

<Button x:Name="button1" Content="Button 1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </Button.Style>
</Button>

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

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

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

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

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

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

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

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="Green" />
        <Setter Property="Foreground" Value="White" />
    </Style>
</Page.Resources>

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

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

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

<StackPanel HorizontalAlignment="Left" Height="100" Margin="10,121,0,0" VerticalAlignment="Top" Width="340" Orientation="Horizontal">
    <StackPanel.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </StackPanel.Resources>
    <Button x:Name="button4" Content="Button 4"/>
    <Button x:Name="button5" Content="Button 5 " Margin="10"/>
</StackPanel>

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

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

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

<Application
    x:Class="ButtonStyle.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ButtonStyle"
    RequestedTheme="Light">
    <Application.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </Application.Resources>
</Application>

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

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

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

<Page.Resources>
    <Style TargetType="Button" x:Key="Style1">
        <Setter Property="Background" Value="Green" />
        <Setter Property="Foreground" Value="White" />
    </Style>
    <Style TargetType="Button" x:Key="Style2">
        <Setter Property="Background" Value="Orange" />
        <Setter Property="Foreground" Value="White" />
    </Style>
</Page.Resources>

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

<Button x:Name="button1" Style="{StaticResource Style1}" Content="Button 1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
<Button x:Name="button2" Style="{StaticResource Style2}" Content="Button 2" HorizontalAlignment="Left" Margin="10,47,0,0" VerticalAlignment="Top"/>

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

まとめ

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