[Windows ストア アプリ] スタイルを作成して再利用する

Windows ストア アプリではスタイルをリソースに登録して再利用（使い回す）ことができます。

たとえば、同じ幅と高さ、同じフォントサイズを持つButtonコントロールをいくつも作成したい場合などに有効です。

通常、幅が350、高さが80、フォントサイズが30のButtonを作成する場合のXAMLは下記のようになります。

<Button Content="FlipView02" Width="350" Height="80" FontSize="30" />

今度はスタイルを作成して再利用する方法について見てみましょう。

スタイルはリソースとして準備します。

XAMLは下記のようになります。

この例では、リソースを<Page.Resources>〜</Page.Resources>として準備しています。

<Page
    x:Class="WindowsStore1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStore1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <!-- ★★★リソース ここから★★★ -->
    <Page.Resources>
        <!-- ★★★ここにスタイルを作成★★★ -->
    </Page.Resources>
    <!-- ★★★リソース ここまで★★★ -->

</Page>

次にスタイル部分です。

スタイルは<Style>を使用します。スタイルを適用したいコントロールはTagetType属性で指定することができます。また、x:key属性を使用して名前を付けることができます。

たとえば、MyButtonという名前でButtonコントロールのスタイルを定義する場合は下記のようにします。

<Style TargetType="Button" x:Key="MyButton">

</Style>

次に、コントロールのスタイル（要するにプロパティです）を定義していきます。

スタイルは<Setter>で定義し、プロパティはProperty属性で、プロパティ値はValue属性に指定します。

たとえば、Buttonコントロールの幅(Width)、高さ(Height)、フォントサイズ(FontSize)を設定するには下記のようにします。

<Style TargetType="Button" x:Key="MyButton">
    <Setter Property="Width" Value="350" />
    <Setter Property="Height" Value="80" />
    <Setter Property="FontSize" Value="30" />
</Style>

以上のようにして定義したリソースを使うには、コントロールのStyle属性を使用します。先ほど作成したリソースは静的リソースなのでStaticResourceとなります。また、リソースの名称はMyButtonとしていたので、XAMLは下記のようになります。

<Button Content="ボタン1" Style="{StaticResource MyButton}"/>

以上で説明は終わりです。

上記のようにStyle属性を使用することで、同じスタイルを持つコントロールをいくつも作成することができます。

最後に、全体のXAMLを以下に示します。

<Page
    x:Class="WindowsStore1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStore1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style TargetType="Button" x:Key="MyButton">
            <Setter Property="Width" Value="350" />
            <Setter Property="Height" Value="80" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
        </Style>
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Vertical">
            <Button Content="ボタン1" Style="{StaticResource MyButton}"/>
            <Button Content="ボタン2" Style="{StaticResource MyButton}"/>
            <Button Content="ボタン3" Style="{StaticResource MyButton}"/>
        </StackPanel>
    </Grid>
</Page>

Please follow and like us: