[C#/WINUI3/.NET8] Rectangle 엘리먼트 : RenderTransform 속성에서 RotateTransform 객체를 사용해 사각형 회전 애니메이션 만들기 2

■ Rectangle 엘리먼트의 RenderTransform 속성에서 RotateTransform 객체를 사용해 사각형 회전 애니메이션을 만드는 방법을 보여준다.

※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Grid.Resources>
            <Storyboard x:Name="storyboard">
                <DoubleAnimation
                    Storyboard.TargetName="rectangle"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                    RepeatBehavior="Forever"
                    Duration="00:00:05"
                    From="45"
                    To="405" />
            </Storyboard>
        </Grid.Resources>
        <Rectangle Name="rectangle"
            Width="100"
            Height="100"
            Fill="RoyalBlue"
            RenderTransformOrigin="0.5 0.5">
            <Rectangle.RenderTransform>
                <RotateTransform
                    Angle="45" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

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

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

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="rectangle"

Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"

RepeatBehavior="Forever"

Duration="00:00:05"

From="45"

To="405" />

</Storyboard>

</Grid.Resources>

<Rectangle Name="rectangle"

Width="100"

Height="100"

Fill="RoyalBlue"

RenderTransformOrigin="0.5 0.5">

<Rectangle.RenderTransform>

<RotateTransform

Angle="45" />

</Rectangle.RenderTransform>

</Rectangle>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public sealed partial class MainPage : Page
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

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

        this.rectangle.PointerPressed += rectangle_PointerPressed;
    }

    #endregion

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

    #region 사각형 포인터 누를 경우 처리하기 - rectangle_PointerPressed(sender, e)

    /// <summary>
    /// 사각형 포인터 누를 경우 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void rectangle_PointerPressed(object sender, RoutedEventArgs e)
    {
        this.storyboard.Begin();
    }

    #endregion
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.rectangle.PointerPressed += rectangle_PointerPressed;

}

#endregion

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

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

#region 사각형 포인터 누를 경우 처리하기 - rectangle_PointerPressed(sender, e)

/// <summary>

/// 사각형 포인터 누를 경우 처리하기

/// </summary>

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

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

private void rectangle_PointerPressed(object sender, RoutedEventArgs e)

{

this.storyboard.Begin();

}

#endregion

}

TestProject.zip