🗿

[WPF] Templateで見た目を変えつつStyleとTriggerでMouseOver等のときの色を変える

2021/08/19に公開

WPF

template

style

tech

やりたいこと

styleの基本とTemplateの基本は学習したが、コードを書いていてよく使う「Templateで見た目を変えつつStyleとTriggerでMouseOver等のときの色を変える」というやり方のひな型を作っておきたい。

サンプルコード

下図のようなデフォルトのButtonとは違う見た目のボタンをTemplateで作って、さらにStyleとTriggerでマウスオーバー時の色を変える。

通常時

マウスオーバー時

コード

<!-- styleの中のControlTemplateを直接書くパターン-->
<!-- これだと一緒にTriggerとかも設定できる -->
<Button Grid.Row="1" Grid.Column="1" Content="styleの中のControlTemplateを直接書く">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <!-- 見た目作成 -->
                        <Grid>
                            <Rectangle Name="rect" Stroke="Blue" StrokeThickness="3" Margin="5" Fill="LightGray"/>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>

                        <!-- トリガー設定 -->
                        <!-- ※名前を使う場合は[見た目作成]個所の名前定義している部分より下にないといけない -->
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Fill" TargetName="rect" Value="Gray"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

ざっくり説明

下記で見た目を変更しつつ、Triggerから操れるようにNameで名前を付けておく。

Triggerで指定のプロパティの値の変化を監視して、条件を満たしたら上で名前を付けた部品のプロパティの値を変える。

ということをする。

その他

今回はButtonに直接styleやTrigger、Templateを書いたが、下記の以前かいた記事のように、ResourceDictionaryの中に書くことも可能。

⇒画面のxamlの量を抑えたい場合や、他でも同じボタンが登場する場合はResourceDictionaryにstyleを書いて使ってあげればよいかも。

やりたいこと

サンプルコード

ざっくり説明

その他

Discussion