Zenn
🗿

[WPF] Templateでできることと書き方

2021/08/19に公開
WPF
#
template
#
style
tech

もくじ
https://qiita.com/tera1707/items/4fda73d86eded283ec4f

やりたいこと

画面の部品の見た目をTemplateを使って変えたいなと思ったときに、いまだにどこにどう書くんだったか、と迷う。
しかもなぜか、以前に調べたことを毎回結構忘れていて時間を取られるので、一度ひな型なものを持っておきたい。

書く場所と書き方

下記のパターンをとりあえずひな型として挙げる。

パターン 備考
①ResourceDictionaryに登録したControlTemplateを使う
②ResourceDictionaryに登録したstyleの中のControlTemplateを使うパターン これだと一緒にTriggerとかも設定できる
③ControlTemplateを直接書くパターン
④styleの中のControlTemplateを直接書くパターン これだと一緒にTriggerとかも設定できる

サンプルコード

実行時の画面

そのときのコード

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:TemplateJikken">
    
    <!-- ControlTemplateを定義 -->
    <ControlTemplate x:Key="ButtonTemplate1" TargetType="Button">
        <Grid>
            <Ellipse Stroke="Black" StrokeThickness="3" Margin="5"/>
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </ControlTemplate>

    <!-- styleの中にControlTemplateを定義 -->
    <!-- これだと一緒にTriggerとかも設定できる -->
    <Style x:Key="ButtonStyle1" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Rectangle Stroke="Green" StrokeThickness="3" Margin="5"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
</ResourceDictionary>

<Window x:Class="TemplateJikken.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemplateJikken"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Dictionary1.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <!-- ResourceDictionaryに登録したControlTemplateを使うパターン-->
        <Button Grid.Row="0" Grid.Column="0" Content="ResourceDictionaryに登録したControlTemplateを使用" Template="{StaticResource ButtonTemplate1}" />

        <!-- ResourceDictionaryに登録したstyleの中のControlTemplateを使うパターン-->
        <Button Grid.Row="0" Grid.Column="1" Content="ResourceDictionaryに登録したstyleの中のControlTemplateを使う" Style="{StaticResource ButtonStyle1}"/>

        <!-- ControlTemplateを直接書くパターン-->
        <Button Grid.Row="1" Grid.Column="0" Content="ControlTemplateを直接書く">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Stroke="Yellow" StrokeThickness="5" Margin="5"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Button.Template>            
        </Button>

        <!-- 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 Stroke="Blue" StrokeThickness="3" Margin="5"/>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
    </Grid>
</Window>

Discussion