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

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

TestProject.zip

0.01MB

▶ 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>