コントロールのテンプレートを変更する

Styleプロパティではコントロールのプロパティで指定できる範囲でしか見た目を変更できません。

プロパティを超えた範囲でコントロールの見た目を変更するにはTemplateプロパティを変更します。

Templateプロパティ内にControlTemplateを配置し、その中にコントロールの見た目を記述することで外観を大きく変更したコントロールを作成できます。

<Button>
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <StackPanel Width="100" Height="40" Background="BlueViolet">
                <Ellipse Fill="White" Width="20" Height="20" />
                <TextBlock Text="Click Me" />
            </StackPanel>
        </ControlTemplate>
    </Button.Template>
</Button>

また、リソースを使うと複数のボタンにTemplateを適用できます。

<Page>
...省略...
    <Page.Resources>
        <ControlTemplate x:Key="buttonTemplate" TargetType="Button">
            <StackPanel Width="100" Height="40" Background="BlueViolet">
                <Ellipse Fill="White" Width="20" Height="20" />
                <TextBlock Text="Click Me" />
            </StackPanel>
        </ControlTemplate>
    </Page.Resources>

    <StackPanel>
        <Button x:Name="button1" Template="{StaticResource buttonTemplate}" />
        <Button x:Name="button2" Template="{StaticResource buttonTemplate}" />
    </StackPanel>

</Page>

TemplateBinding

Template内の要素に対し、Templateの適用先のコントロールから値を設定するにはTemplateBindingを使います。

<Page>
...省略...
    <Page.Resources>
        <ControlTemplate x:Key="buttonTemplate" TargetType="Button">
            <StackPanel Width="100" Height="40" Background="BlueViolet">
                <Ellipse Fill="White" Width="20" Height="20" />
                <!--Template適用先のContentプロパティがここに入る-->
                <TextBlock Text="{TemplateBinding Content}" />
            </StackPanel>
        </ControlTemplate>
    </Page.Resources>

    <StackPanel>
        <Button x:Name="button1" Content="Click" Template="{StaticResource buttonTemplate}" />
        <Button x:Name="button2" Content="Touch" Template="{StaticResource buttonTemplate}" />
    </StackPanel>

</Page>

Text以外にも複雑なContentを指定する場合はContentPresenterを使います。

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

    <Page.Resources>
        <ControlTemplate x:Key="buttonTemplate" TargetType="Button">
            <StackPanel Width="100" Height="40" Background="BlueViolet">
                <Ellipse Fill="White" Width="20" Height="20" />
                <!--Template適用先のContentプロパティがここに入る-->
                <ContentPresenter Content="{TemplateBinding Content}" />
            </StackPanel>
        </ControlTemplate>
    </Page.Resources>

    <StackPanel>
        <Button x:Name="button1" Content="Click" Template="{StaticResource buttonTemplate}" />
        <Button x:Name="button2" Template="{StaticResource buttonTemplate}">
            <Button.Content>
                <Rectangle Fill="Red" Width="20" Height="20" />
            </Button.Content>
        </Button>
    </StackPanel>

</Page>

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.