[C#/WPF/.NET8] Button 엘리먼트 : 클릭시 회전하는 톱니바퀴 버튼 만들기

■ 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>
        <Style x:Key="GearButtonStyleKey" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse
                                Fill="{TemplateBinding Background}"
                                Width="{TemplateBinding Width}"
                                Height="{TemplateBinding Height}" />
                            <Path Name="gearPath"
                                Width="{TemplateBinding Width}"
                                Height="{TemplateBinding Height}"
                                Stretch="Uniform"
                                Fill="{TemplateBinding Foreground}"
                                RenderTransformOrigin="0.5 0.5"
                                Data="M 495.9 166.6 c 3.2 8.7 .5 18.4 -6.4 24.6 l -43.3 39.4 c 1.1 8.3 1.7 16.8 1.7 25.4 s -0.6 17.1 -1.7 25.4 l 43.3 39.4 c 6.9 6.2 9.6 15.9 6.4 24.6 c -4.4 11.9 -9.7 23.3 -15.8 34.3 l -4.7 8.1 c -6.6 11 -14 21.4 -22.1 31.2 c -5.9 7.2 -15.7 9.6 -24.5 6.8 l -55.7 -17.7 c -13.4 10.3 -28.2 18.9 -44 25.4 l -12.5 57.1 c -2 9.1 -9 16.3 -18.2 17.8 c -13.8 2.3 -28 3.5 -42.5 3.5 s -28.7 -1.2 -42.5 -3.5 c -9.2 -1.5 -16.2 -8.7 -18.2 -17.8 l -12.5 -57.1 c -15.8 -6.5 -30.6 -15.1 -44 -25.4 L 83.1 425.9 c -8.8 2.8 -18.6 0.3 -24.5 -6.8 c -8.1 -9.8 -15.5 -20.2 -22.1 -31.2 l -4.7 -8.1 c -6.1 -11 -11.4 -22.4 -15.8 -34.3 c -3.2 -8.7 -0.5 -18.4 6.4 -24.6 l 43.3 -39.4 C 64.6 273.1 64 264.6 64 256 s 0.6 -17.1 1.7 -25.4 L 22.4 191.2 c -6.9 -6.2 -9.6 -15.9 -6.4 -24.6 c 4.4 -11.9 9.7 -23.3 15.8 -34.3 l 4.7 -8.1 c 6.6 -11 14 -21.4 22.1 -31.2 c 5.9 -7.2 15.7 -9.6 24.5 -6.8 l 55.7 17.7 c 13.4 -10.3 28.2 -18.9 44 -25.4 l 12.5 -57.1 c 2 -9.1 9 -16.3 18.2 -17.8 C 227.3 1.2 241.5 0 256 0 s 28.7 1.2 42.5 3.5 c 9.2 1.5 16.2 8.7 18.2 17.8 l 12.5 57.1 c 15.8 6.5 30.6 15.1 44 25.4 l 55.7 -17.7 c 8.8 -2.8 18.6 -0.3 24.5 6.8 c 8.1 9.8 15.5 20.2 22.1 31.2 l 4.7 8.1 c 6.1 11 11.4 22.4 15.8 34.3 z M 256 336 c 44.2 0 80 -35.8 80 -80 s -35.8 -80 -80 -80 s -80 35.8 -80 80 s 35.8 80 80 80 z">
                                <Path.RenderTransform>
                                    <RotateTransform x:Name="gearRotateTransform" />
                                </Path.RenderTransform>
                            </Path>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Button.PreviewMouseDown">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="gearRotateTransform"
                                            Storyboard.TargetProperty="Angle"
                                            To="180"
                                            Duration="00:00:00.1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Button Name="gearButton1"
            Style="{StaticResource GearButtonStyleKey}"
            Width="32"
            Height="32"
            Background="Transparent"
            Foreground="DarkGray" />
        <Button Name="gearButton2"
            Style="{StaticResource GearButtonStyleKey}"
            Margin="0 10 0 0"
            Width="64"
            Height="64"
            Background="Transparent"
            Foreground="DarkGray" />
        <Button Name="gearButton3"
            Style="{StaticResource GearButtonStyleKey}"
            Margin="0 10 0 0"
            Width="128"
            Height="128"
            Background="Transparent"
            Foreground="DarkGray" />
    </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>

<Setter.Value>

<Grid>

<Ellipse

Fill="{TemplateBinding Background}"

Width="{TemplateBinding Width}"

Height="{TemplateBinding Height}" />

<Path Name="gearPath"

Width="{TemplateBinding Width}"

Height="{TemplateBinding Height}"

Stretch="Uniform"

Fill="{TemplateBinding Foreground}"

RenderTransformOrigin="0.5 0.5"

Data="M 495.9 166.6 c 3.2 8.7 .5 18.4 -6.4 24.6 l -43.3 39.4 c 1.1 8.3 1.7 16.8 1.7 25.4 s -0.6 17.1 -1.7 25.4 l 43.3 39.4 c 6.9 6.2 9.6 15.9 6.4 24.6 c -4.4 11.9 -9.7 23.3 -15.8 34.3 l -4.7 8.1 c -6.6 11 -14 21.4 -22.1 31.2 c -5.9 7.2 -15.7 9.6 -24.5 6.8 l -55.7 -17.7 c -13.4 10.3 -28.2 18.9 -44 25.4 l -12.5 57.1 c -2 9.1 -9 16.3 -18.2 17.8 c -13.8 2.3 -28 3.5 -42.5 3.5 s -28.7 -1.2 -42.5 -3.5 c -9.2 -1.5 -16.2 -8.7 -18.2 -17.8 l -12.5 -57.1 c -15.8 -6.5 -30.6 -15.1 -44 -25.4 L 83.1 425.9 c -8.8 2.8 -18.6 0.3 -24.5 -6.8 c -8.1 -9.8 -15.5 -20.2 -22.1 -31.2 l -4.7 -8.1 c -6.1 -11 -11.4 -22.4 -15.8 -34.3 c -3.2 -8.7 -0.5 -18.4 6.4 -24.6 l 43.3 -39.4 C 64.6 273.1 64 264.6 64 256 s 0.6 -17.1 1.7 -25.4 L 22.4 191.2 c -6.9 -6.2 -9.6 -15.9 -6.4 -24.6 c 4.4 -11.9 9.7 -23.3 15.8 -34.3 l 4.7 -8.1 c 6.6 -11 14 -21.4 22.1 -31.2 c 5.9 -7.2 15.7 -9.6 24.5 -6.8 l 55.7 17.7 c 13.4 -10.3 28.2 -18.9 44 -25.4 l 12.5 -57.1 c 2 -9.1 9 -16.3 18.2 -17.8 C 227.3 1.2 241.5 0 256 0 s 28.7 1.2 42.5 3.5 c 9.2 1.5 16.2 8.7 18.2 17.8 l 12.5 57.1 c 15.8 6.5 30.6 15.1 44 25.4 l 55.7 -17.7 c 8.8 -2.8 18.6 -0.3 24.5 6.8 c 8.1 9.8 15.5 20.2 22.1 31.2 l 4.7 8.1 c 6.1 11 11.4 22.4 15.8 34.3 z M 256 336 c 44.2 0 80 -35.8 80 -80 s -35.8 -80 -80 -80 s -80 35.8 -80 80 s 35.8 80 80 80 z">

<Path.RenderTransform>

</Path.RenderTransform>

</Path>

</Grid>

<ControlTemplate.Triggers>

<DoubleAnimation

Storyboard.TargetName="gearRotateTransform"

Storyboard.TargetProperty="Angle"

To="180"

Duration="00:00:00.1"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Button Name="gearButton1"

Style="{StaticResource GearButtonStyleKey}"

Width="32"

Height="32"

Background="Transparent"

Foreground="DarkGray" />

<Button Name="gearButton2"

Style="{StaticResource GearButtonStyleKey}"

Margin="0 10 0 0"

Width="64"

Height="64"

Background="Transparent"

Foreground="DarkGray" />

<Button Name="gearButton3"

Style="{StaticResource GearButtonStyleKey}"

Margin="0 10 0 0"

Width="128"

Height="128"

Background="Transparent"

Foreground="DarkGray" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace TestProject;

/// <summary>
/// 메인 윈도우
/// </summary>
public partial class MainWindow : Window
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 회전 여부
    /// </summary>
    private bool isRotating = false;

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainWindow()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainWindow()
    {
        InitializeComponent();

        this.gearButton1.Click += settingButton_Click;
        this.gearButton2.Click += settingButton_Click;
        this.gearButton3.Click += settingButton_Click;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 기어 버튼 클릭시 처리하기 - settingButton_Click(sender, e)

    /// <summary>
    /// 기어 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void settingButton_Click(object sender, RoutedEventArgs e)
    {
        if(!this.isRotating)
        {
            this.isRotating = true;

            Button button = sender as Button;

            Path gearPath = (Path)button.Template.FindName("gearPath", button);

            RotateTransform rotateTransform = gearPath.RenderTransform as RotateTransform;

            DoubleAnimation rotateBackAnimation = new DoubleAnimation
            {
                Duration = TimeSpan.FromSeconds(0.2),
                From     = 180,
                To       = 0
            };

            rotateBackAnimation.Completed += (s, _) =>
            {
                this.isRotating = false;

                rotateTransform.Angle = 0;
            };

            rotateTransform.BeginAnimation(RotateTransform.AngleProperty, rotateBackAnimation);
        }
    }

    #endregion
}

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject;

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 회전 여부

/// </summary>

private bool isRotating = false;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.gearButton1.Click += settingButton_Click;

this.gearButton2.Click += settingButton_Click;

this.gearButton3.Click += settingButton_Click;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 기어 버튼 클릭시 처리하기 - settingButton_Click(sender, e)

/// <summary>

/// 기어 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void settingButton_Click(object sender, RoutedEventArgs e)

{

if(!this.isRotating)

{

this.isRotating = true;

Button button = sender as Button;

Path gearPath = (Path)button.Template.FindName("gearPath", button);

RotateTransform rotateTransform = gearPath.RenderTransform as RotateTransform;

DoubleAnimation rotateBackAnimation = new DoubleAnimation

{

Duration = TimeSpan.FromSeconds(0.2),

From = 180,

To = 0

};

rotateBackAnimation.Completed += (s, _) =>

{

this.isRotating = false;

rotateTransform.Angle = 0;

};

rotateTransform.BeginAnimation(RotateTransform.AngleProperty, rotateBackAnimation);

}

#endregion

}

TestProject.zip