[C#/WPF] ControlTemplate 엘리먼트 : 마우스 위치시 배경색이 변경되는 Button 엘리먼트 정의하기

■ ControlTemplate 엘리먼트를 사용해 마우스 위치시 배경색이 변경되는 Button 엘리먼트를 정의하는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <ControlTemplate x:Key="roundbutton" TargetType="Button">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal">
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="ellipse"
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    Duration="0:0:0.3"
                                    To="{TemplateBinding Background}" />
                            </Storyboard>
                        </VisualState>
                        <VisualState Name="MouseOver">
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="ellipse"
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    Duration="0:0:0.3"
                                    To="Yellow" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Ellipse Name="ellipse"
                    Fill="{TemplateBinding Background}"
                    Stroke="{TemplateBinding Foreground}" />
                <ContentPresenter x:Name="contentPresenter"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" />
            </Grid>
        </ControlTemplate>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Label>Unstyled Button</Label>
        <Button
            Margin="0 10 0 0"
            Width="100"
            Height="30"
            Content="Button 1" />
        <Label
            Margin="0 10 0 0"
            Content="Rounded Button" />
        <Button
            Template="{StaticResource roundbutton}"
            Margin="0 10 0 0"
            Width="100"
            Height="100"
            Content="Button 2" />
    </StackPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Grid>

<VisualStateManager.VisualStateGroups>

<ColorAnimation

Storyboard.TargetName="ellipse"

Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"

Duration="0:0:0.3"

To="{TemplateBinding Background}" />

</Storyboard>

</VisualState>

<ColorAnimation

Storyboard.TargetName="ellipse"

Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"

Duration="0:0:0.3"

To="Yellow" />

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Ellipse Name="ellipse"

Fill="{TemplateBinding Background}"

Stroke="{TemplateBinding Foreground}" />

<ContentPresenter x:Name="contentPresenter"

HorizontalAlignment="Center"

VerticalAlignment="Center" />

</Grid>

</ControlTemplate>

</Window.Resources>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Label>Unstyled Button</Label>

<Button

Margin="0 10 0 0"

Width="100"

Height="30"

Content="Button 1" />

<Label

Margin="0 10 0 0"

Content="Rounded Button" />

<Button

Template="{StaticResource roundbutton}"

Margin="0 10 0 0"

Width="100"

Height="100"

Content="Button 2" />

</StackPanel>

</Window>

TestProject.zip