泥庭

2010年12月20日

Style

Filed under: WPF — タグ: — yone64 @ 12:37 AM

StyleってWPFの特徴の一つですよね。日頃何となく使っているStyleを気付いたことベースでまとめてみました。

Styleの基本。

FrameworkElementStyle型の依存性プロパティーを持っています。
このプロパティーを通して他の依存性プロパティーの値を設定することが出来ます。
例えば、次のxamlはStyleプロパティーを利用しFont関連のプロパティーを設定しています。

<Button Content="ぼたん" Name="button1">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="FontFamily" Value="Consolas"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="Foreground" Value="Blue"/>
        </Style>
    </Button.Style>
</Button>

は、以下と同じです。

<Button Content="ぼたん" Name="button1" FontFamily="Consolas" FontSize="15" Foreground="Blue" />

何がうれしいの?

Styleを使用しなくても、プロパティーの設定が出来るのであれば、Styleを使うメリットは何でしょう。
①Trigger
Style.TriggersにTriggerを設定することで条件付きでプロパティー値の変更が出来ます。
以下は、ボタンにマウスが乗ったときに文字を大きくするサンプルです。

<Button Content="ぼたん" Name="button1">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="FontFamily" Value="Consolas"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="Foreground" Value="Blue"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="FontSize" Value="30"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

②Resource
他のプロパティー同様、StyleもResourceに定義している物を利用することが出来ます。
つまり、複数のプロパティーと値のセットをStyleとしてResourceに登録しておくことで、複数のプロパティーを一括で設定することが出来ます。

(定義)

<Window.Resources>
    <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Aqua"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="FontSize" Value="50"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

(適用)

<Button Name="button2" Content="ボタン2" Style="{StaticResource ResourceKey=ButtonStyle}" />

続く

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com Blog.

%d人のブロガーが「いいね」をつけました。