[C#/WPF] RotateTransform 엘리먼트 : 마우스 진입시 이미지 회전하기

■ RotateTransform 엘리먼트를 사용해 마우스 진입시 이미지를 회전하는 방법을 보여준다.

TestProject.zip

다운로드

▶ 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="RotateTransform 엘리먼트 : 마우스 진입시 이미지 회전하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Grid.Resources>
            <ImageBrush x:Key="SourceImageBrushKey"
                ImageSource="Koala.png" />
            <Style TargetType="Rectangle">
                <Setter Property="Width"                 Value="400"     />
                <Setter Property="Height"                Value="400"     />
                <Setter Property="RenderTransformOrigin" Value="0.5 0.5" />
                <Setter Property="Fill"                  Value="{StaticResource SourceImageBrushKey}" />
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <RotateTransform />
                    </Setter.Value>
                </Setter>
                <Setter Property="BitmapEffect">
                    <Setter.Value>
                        <BlurBitmapEffect Radius="0" />
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)"
                                        FillBehavior="Stop"
                                        AccelerationRatio="0.2"
                                        To="360" />
                                    <DoubleAnimation
                                        Storyboard.TargetProperty="(Rectangle.BitmapEffect).(BlurBitmapEffect.Radius)"
                                        FillBehavior="Stop"
                                        AutoReverse="True"
                                        To="5"
                                        Duration="0:0:0.5" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Resources>
        <Rectangle>
            <Rectangle.Clip>
                <EllipseGeometry
                    Center="200 200"
                    RadiusX="200"
                    RadiusY="200" />
            </Rectangle.Clip>
        </Rectangle>
        <Rectangle>
            <Rectangle.Clip>
                <EllipseGeometry
                    Center="200 200"
                    RadiusX="150"
                    RadiusY="150" />
            </Rectangle.Clip>
        </Rectangle>
        <Rectangle>
            <Rectangle.Clip>
                <EllipseGeometry
                    Center="200 200"
                    RadiusX="100"
                    RadiusY="100" />
            </Rectangle.Clip>
        </Rectangle>
        <Rectangle>
            <Rectangle.Clip>
                <EllipseGeometry
                    Center="200 200"
                    RadiusX="50"
                    RadiusY="50" />
            </Rectangle.Clip>
        </Rectangle>
    </Grid>
</Window>

 

▶ MainWindow.xaml.cs

using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion
    }
}