[C#/WINUI3/.NET6] Rectangle 클래스 : ScaleTransition 속성에서 Vector3Transition 객체를 사용해 스케일 변경에 대한 애니메이션 만들기

■ Rectangle 클래스의 ScaleTransition 속성에서 Vector3Transition 객체를 사용해 스케일 변경에 대한 애니메이션을 만드는 방법을 보여준다.

▶ 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 Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Rectangle Name="rectangle" Grid.Column="0"
            VerticalAlignment="Top"
            HorizontalAlignment="Left"
            Margin="50"
            Width="50"
            Height="50"
            Fill="{ThemeResource SystemAccentColor}" />
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Button Name="scaleButton1"
                Tag="0.5"
                Content="Set Scale to (0.5, 0.5, 0.5)" />
            <Button Name="scaleButton2"
                Margin="0 10 0 0"
                Tag="1.0"
                Content="Set Scale to (1.0, 1.0, 1.0)" />
            <Button Name="scaleButton3"
                Margin="0 10 0 0"
                Tag="2.0"
                Content="Set Scale to (2.0, 2.0, 2.0)" />
            <TextBlock
                Margin="0 10 0 0"
                Text="Components" />
            <CheckBox Name="scaleXCheckBox"
                Margin="0 10 0 0"
                Content="Animate X"
                IsChecked="True" />
            <CheckBox Name="scaleYCheckBox"
                Margin="0 10 0 0"
                Content="Animate Y"
                IsChecked="True" />
            <CheckBox Name="scaleZCheckBox"
                Margin="0 10 0 0"
                Content="Animate Z"
                IsChecked="True" />
            <NumberBox Name="scaleNumberBox"
                Margin="0 10 0 0"
                Header="Scale (0.0 to 5.0)"
                Minimum="0"
                Maximum="5"
                Value="1" />
            <Button Name="scaleButton"
                Margin="0 10 0 0"
                Content="Set custom scale" />
        </StackPanel>
    </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.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Name="rectangle" Grid.Column="0"

VerticalAlignment="Top"

HorizontalAlignment="Left"

Margin="50"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}" />

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Button Name="scaleButton1"

Tag="0.5"

Content="Set Scale to (0.5, 0.5, 0.5)" />

<Button Name="scaleButton2"

Margin="0 10 0 0"

Tag="1.0"

Content="Set Scale to (1.0, 1.0, 1.0)" />

<Button Name="scaleButton3"

Margin="0 10 0 0"

Tag="2.0"

Content="Set Scale to (2.0, 2.0, 2.0)" />

<TextBlock

Margin="0 10 0 0"

Text="Components" />

<CheckBox Name="scaleXCheckBox"

Margin="0 10 0 0"

Content="Animate X"

IsChecked="True" />

<CheckBox Name="scaleYCheckBox"

Margin="0 10 0 0"

Content="Animate Y"

IsChecked="True" />

<CheckBox Name="scaleZCheckBox"

Margin="0 10 0 0"

Content="Animate Z"

IsChecked="True" />

<NumberBox Name="scaleNumberBox"

Margin="0 10 0 0"

Header="Scale (0.0 to 5.0)"

Minimum="0"

Maximum="5"

Value="1" />

<Button Name="scaleButton"

Margin="0 10 0 0"

Content="Set custom scale" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Numerics;

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

using Windows.System;

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

        #region 생성자 - MainPage()

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

            this.rectangle.ScaleTransition = new Vector3Transition();

            this.scaleButton1.Click     += scaleButton_Click;
            this.scaleButton2.Click     += scaleButton_Click;
            this.scaleButton3.Click     += scaleButton_Click;
            this.scaleNumberBox.KeyDown += scaleNumberBox_KeyDown;
            this.scaleButton.Click      += scaleButton_Click;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region Scale 넘버 박스 키 다운시 처리하기 - scaleNumberBox_KeyDown(sender, e)

        /// <summary>
        /// Scale 넘버 박스 키 다운시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void scaleNumberBox_KeyDown(object sender, KeyRoutedEventArgs e)
        {
            if(e.Key == VirtualKey.Enter)
            {
                scaleButton_Click(null, null);
            }
        }

        #endregion
        #region Scale 버튼 클릭시 처리하기 - scaleButton_Click(sender, e)

        /// <summary>
        /// Scale 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void scaleButton_Click(object sender, RoutedEventArgs e)
        {
            Vector3Transition scaleTransition = this.rectangle.ScaleTransition;

            scaleTransition.Components = ((this.scaleXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) |
                                         ((this.scaleYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |
                                         ((this.scaleZCheckBox.IsChecked == true) ? Vector3TransitionComponents.Z : 0);

            float customValue;

            if(sender != null && (sender as Button).Tag != null)
            {
                customValue = (float)Convert.ToDouble((sender as Button).Tag);
            }
            else
            {
                customValue = NormalizeValue(this.scaleNumberBox);
            }

            this.rectangle.Scale = new Vector3(customValue);
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 값 정규화하기 - NormalizeValue(numberBox)

        /// <summary>
        /// 값 정규화하기
        /// </summary>
        /// <param name="numberBox">넘버 박스</param>
        /// <returns>값</returns>
        private float NormalizeValue(NumberBox numberBox)
        {
            if(double.IsNaN(numberBox.Value))
            {
                numberBox.Value = 0;
            }

            return (float)numberBox.Value;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

using System;

using System.Numerics;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Input;

using Windows.System;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.rectangle.ScaleTransition = new Vector3Transition();

this.scaleButton1.Click += scaleButton_Click;

this.scaleButton2.Click += scaleButton_Click;

this.scaleButton3.Click += scaleButton_Click;

this.scaleNumberBox.KeyDown += scaleNumberBox_KeyDown;

this.scaleButton.Click += scaleButton_Click;

}

#endregion

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

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

//////////////////////////////////////////////////////////////////////////////// Event

#region Scale 넘버 박스 키 다운시 처리하기 - scaleNumberBox_KeyDown(sender, e)

/// <summary>

/// Scale 넘버 박스 키 다운시 처리하기

/// </summary>

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

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

private void scaleNumberBox_KeyDown(object sender, KeyRoutedEventArgs e)

{

if(e.Key == VirtualKey.Enter)

{

scaleButton_Click(null, null);

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void scaleButton_Click(object sender, RoutedEventArgs e)

{

Vector3Transition scaleTransition = this.rectangle.ScaleTransition;

scaleTransition.Components = ((this.scaleXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) |

((this.scaleYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |

((this.scaleZCheckBox.IsChecked == true) ? Vector3TransitionComponents.Z : 0);

float customValue;

if(sender != null && (sender as Button).Tag != null)

{

customValue = (float)Convert.ToDouble((sender as Button).Tag);

}

else

{

customValue = NormalizeValue(this.scaleNumberBox);

}

this.rectangle.Scale = new Vector3(customValue);

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 값 정규화하기 - NormalizeValue(numberBox)

/// <summary>

/// 값 정규화하기

/// </summary>

/// <param name="numberBox">넘버 박스</param>

/// <returns>값</returns>

private float NormalizeValue(NumberBox numberBox)

{

if(double.IsNaN(numberBox.Value))

{

numberBox.Value = 0;

}

return (float)numberBox.Value;

}

#endregion

}

TestProject.zip