ANIMATION Archives - 17 중 3 번째 페이지

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] ScaleAnimation 엘리먼트 : 스케일 애니메이션 만들기

■ ScaleAnimation 엘리먼트를 사용해 스케일 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (XAML)


xmlns:animation="using:CommunityToolkit.WinUI.animation"

<Button Name="startButton"
    HorizontalAlignment="Center"
    Padding="10"
    Content="Start">
    <animation:Explicit.animation>
        <animation:animationet x:Name="sequentialAnimation"
            IsSequential="True">
            <animation:animationcope>
                <animation:ScaleAnimation
                    From="1"
                    To="1.2" />
                <animation:TranslationAnimation
                    From="-20,0,0"
                    To="0" />
                <animation:OpacityAnimation
                    From="0"
                    To="1 "/>
            </animation:animationcope>
            <animation:ScaleAnimation To="1" />
        </animation:animationet>
    </animation:Explicit.animation>
</Button>

xmlns:animation="using:CommunityToolkit.WinUI.animation"

<Button Name="startButton"

HorizontalAlignment="Center"

Padding="10"

Content="Start">

<animation:Explicit.animation>

<animation:animationet x:Name="sequentialAnimation"

IsSequential="True">

<animation:animationcope>

<animation:ScaleAnimation

From="1"

To="1.2" />

<animation:TranslationAnimation

From="-20,0,0"

To="0" />

<animation:OpacityAnimation

From="0"

To="1 "/>

</animation:animationcope>

<animation:ScaleAnimation To="1" />

</animation:animationet>

</animation:Explicit.animation>

</Button>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] AnimationSet 엘리먼트 : IsSequential 속성을 사용해 순차 애니메이션 만들기

■ AnimationSet 엘리먼트의 IsSequential 속성을 사용해 순차 애니메이션을 만드는 방법을 보여준다. ※ 이 예제 코드에서 사용된 AnimationSet 엘리먼트는 CommunityToolkit.WinUI.Animations 누겟(버전 : 8.0.240109)을

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] RotationInDegreesAnimation 엘리먼트 : 회전 애니메이션 만들기

■ RotationInDegreesAnimation 엘리먼트를 사용해 회전 애니메이션을 만드는 방법을 보여준다. ※ 이 예제 코드에서 사용된 RotationInDegreesAnimation 엘리먼트는 CommunityToolkit.WinUI.Animations 누겟(버전 : 8.0.240109)을 참조한다. ※

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] ColorAnimation 엘리먼트 : 색상 애니메이션 만들기

■ ColorAnimation 엘리먼트를 사용해 색상 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (XAML)


xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"

<Button Name="button"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Padding="10 10 10 10"
    Content="Click me!">
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="fadeInAnimationSet">
            <ctwa:AnimationScope
                Duration="00:00:01"
                EasingType="Sine">
                <ctwa:OpacityAnimation From="0" To="1" />
                <ctwa:ColorAnimation
                    Target="(Button.Foreground).(SolidColorBrush.Color)"
                    Layer="Xaml">
                    <ctwa:ColorKeyFrame Key="0.0" Value="White"  />
                    <ctwa:ColorKeyFrame Key="0.5" Value="Orange" />
                    <ctwa:ColorKeyFrame Key="0.8" Value="Green" EasingType="Linear"/>
                    <ctwa:ColorKeyFrame Key="1.0" Value="Black" EasingMode="EaseOut" EasingType="Cubic" />
                </ctwa:ColorAnimation>
            </ctwa:AnimationScope>
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
</Button>

xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"

<Button Name="button"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10 10 10 10"

Content="Click me!">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="fadeInAnimationSet">

<ctwa:AnimationScope

Duration="00:00:01"

EasingType="Sine">

<ctwa:OpacityAnimation From="0" To="1" />

<ctwa:ColorAnimation

Target="(Button.Foreground).(SolidColorBrush.Color)"

Layer="Xaml">

<ctwa:ColorKeyFrame Key="0.0" Value="White" />

<ctwa:ColorKeyFrame Key="0.5" Value="Orange" />

<ctwa:ColorKeyFrame Key="0.8" Value="Green" EasingType="Linear"/>

<ctwa:ColorKeyFrame Key="1.0" Value="Black" EasingMode="EaseOut" EasingType="Cubic" />

</ctwa:ColorAnimation>

</ctwa:AnimationScope>

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</Button>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] AnimationScope 엘리먼트 : Duration/EasingType 속성을 사용해 애니메이션 범위 설정하기

■ AnimationScope 엘리먼트의 Duration/EasingType 속성을 사용해 애니메이션 범위를 설정하는 방법을 보여준다. ※ 이 예제 코드에서 사용된 AnimationScope 엘리먼트는 CommunityToolkit.WinUI.Animations 누겟(버전 : 8.0.240109)을

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] TranslationAnimation 엘리먼트 : 이동 애니메이션 만들기

■ TranslationAnimation 엘리먼트를 사용해 이동 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (XAML)


xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"

<Button Name="button"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Padding="10 10 10 10"
    Content="Click me!">
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="fadeInAnimationSet">
            <ctwa:OpacityAnimation     From="0"       To="1" />
            <ctwa:TranslationAnimation From="-20,0,0" To="0" />
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
</Button>

xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"

<Button Name="button"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10 10 10 10"

Content="Click me!">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="fadeInAnimationSet">

<ctwa:OpacityAnimation From="0" To="1" />

<ctwa:TranslationAnimation From="-20,0,0" To="0" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</Button>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] OpacityAnimation 엘리먼트 : 불투명도 애니메이션 만들기

■ OpacityAnimation 엘리먼트를 사용해 불투명도 애니메이션을 만드는 방법을 보여준다. ▶ 예제 코드 (XAML)


xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"

<Button Name="button"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Padding="10 10 10 10"
    Content="Click me!">
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="fadeInAnimationSet">
            <ctwa:OpacityAnimation     From="0"       To="1" />
            <ctwa:TranslationAnimation From="-20,0,0" To="0" />
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
</Button>

xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"

<Button Name="button"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10 10 10 10"

Content="Click me!">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="fadeInAnimationSet">

<ctwa:OpacityAnimation From="0" To="1" />

<ctwa:TranslationAnimation From="-20,0,0" To="0" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</Button>

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] AnimationSet 엘리먼트 : 애니메이션 그룹 만들기

■ AnimationSet 엘리먼트를 사용해 애니메이션 그룹을 만드는 방법을 보여준다. ※ 이 예제 코드에서 사용된 Explicit 엘리먼트는 CommunityToolkit.WinUI.Animations 누겟(버전 : 8.0.240109)을 참조한다. ※

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] Explicit 엘리먼트 : Animations 첨부 속성을 사용해 명시적 애니메이션 만들기

■ Explicit 엘리먼트의 Animations 첨부 속성을 사용해 명시적 애니메이션을 만드는 방법을 보여준다. ※ 이 예제 코드에서 사용된 Explicit 엘리먼트는 CommunityToolkit.WinUI.Animations 누겟(버전 :

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] CommunityToolkit.WinUI.Animations 누겟 설치하기

■ CommunityToolkit.WinUI.Animations 누겟을 설치하는 방법을 보여준다. 1. Visual Studio를 실행한다. 2. [도구] / [NuGet 패키지 관리자] / [패키지 관리자 콘솔] 메뉴를 실행한다.

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] Implicit 엘리먼트 : ShowAnimations/HideAnimations/Animations 첨부 속성을 사용해 암시적 애니메이션 만들기

■ Implicit 엘리먼트의 ShowAnimations/HideAnimations/Animations 첨부 속성을 사용해 암시적 애니메이션을 만드는 방법을 보여준다. ※ 이 예제 코드에서 사용된 Implicit 엘리먼트는 CommunityToolkit.WinUI.Animations 누겟(버전 :

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] Connected 엘리먼트 : Key/AnchorElement/ListItemKey/ListItemElementName 첨부 속성을 사용해 연결 애니메이션 만들기

■ Connected 엘리먼트의 Key/AnchorElement/ListItemKey/ListItemElementName 첨부 속성을 사용해 연결 애니메이션을 만드는 과정을 보여준다. ※ 이 예제 코드에서 사용된 Connected 엘리먼트는 CommunityToolkit.WinUI.Animations 누겟(버전 :

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] CommunityToolkit.WinUI.UI.Animations 누겟 설치하기

■ CommunityToolkit.WinUI.UI.Animations 누겟을 설치하는 방법을 보여준다. 1. Visual Studio를 실행한다. 2. [도구] / [NuGet 패키지 관리자] / [패키지 관리자 콘솔] 메뉴를 실행한다.

[C#/WINUI3/.NET6] ParallaxView 엘리먼트 : Source/VerticalShift 속성 사용하기

■ ParallaxView 엘리먼트의 Source/VerticalShift 속성을 사용하는 방법을 보여준다. ▶ 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>
        <ParallaxView Name="parallaxView"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Source="{Binding ElementName=listView}"
            VerticalShift="500">
            <Image Source="ms-appx:///IMAGE/cliff.jpg" />
        </ParallaxView>
        <ListView Name="listView"
            ItemsSource="{x:Bind ItemCollection}"
            HorizontalAlignment="Stretch"
            Background="#80000000"
            HighContrastAdjustment="Auto">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="x:String">
                    <TextBlock
                        Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                        Text="{x:Bind}" />
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.Header>
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="White"
                    FontSize="28"
                    Text="Scroll the list to see parallaxing of image" />
            </ListView.Header>
        </ListView>
    </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>

<ParallaxView Name="parallaxView"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Source="{Binding ElementName=listView}"

VerticalShift="500">

</ParallaxView>

<ListView Name="listView"

ItemsSource="{x:Bind ItemCollection}"

HorizontalAlignment="Stretch"

Background="#80000000"

HighContrastAdjustment="Auto">

<ListView.ItemTemplate>

<TextBlock

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

Text="{x:Bind}" />

</DataTemplate>

</ListView.ItemTemplate>

<ListView.Header>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="White"

FontSize="28"

Text="Scroll the list to see parallaxing of image" />

</ListView.Header>

</ListView>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Collections.ObjectModel;

using Microsoft.UI.Xaml.Controls;

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

        #region Field

        /// <summary>
        /// 항목 컬렉션
        /// </summary>
        public ObservableCollection<string> ItemCollection = new ObservableCollection<string>();

        #endregion

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

        #region 생성자 - MainPage()

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

            for(int i = 0; i < 100; i++)
            {
                ItemCollection.Add($"항목 : {i:D5}");
            }
        }

        #endregion
    }
}

using System.Collections.ObjectModel;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 항목 컬렉션

/// </summary>

public ObservableCollection<string> ItemCollection = new ObservableCollection<string>();

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

for(int i = 0; i < 100; i++)

{

ItemCollection.Add($"항목 : {i:D5}");

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] Grid 클래스 : BackgroundTransition 속성에서 BrushTransition 객체를 사용해 테마 변경에 대한 애니메이션 만들기

■ Grid 클래스의 BackgroundTransition 속성에서 BrushTransition 객체를 사용해 테마 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ 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>
        <Grid Name="grid" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="300"
            MinHeight="200"
            BorderThickness="1"
            BorderBrush="DimGray"
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
            RequestedTheme="Light">
            <StackPanel
                Margin="10"
                Spacing="10">
                <TextBlock
                    Style="{ThemeResource SubheaderTextBlockStyle}"
                    Text="Lorem Ipsum" />
                <TextBlock
                    Margin="0 10 0 0"
                    TextWrapping="WrapWholeWords"
                    Text="The background of this grid animates when the theme changes." />
                <Button
                    Margin="0 10 0 0"
                    Content="Button" />
                <CheckBox
                    Margin="0 10 0 0"
                    Content="CheckBox" />
            </StackPanel>
        </Grid>
        <Button Name="changeThemeButton" Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Padding="5"
            Content="Change Theme" />
    </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>

<Grid Name="grid" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="300"

MinHeight="200"

BorderThickness="1"

BorderBrush="DimGray"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

RequestedTheme="Light">

<StackPanel

Margin="10"

Spacing="10">

<TextBlock

Style="{ThemeResource SubheaderTextBlockStyle}"

Text="Lorem Ipsum" />

<TextBlock

Margin="0 10 0 0"

TextWrapping="WrapWholeWords"

Text="The background of this grid animates when the theme changes." />

<Button

Margin="0 10 0 0"

Content="Button" />

<CheckBox

Margin="0 10 0 0"

Content="CheckBox" />

</StackPanel>

</Grid>

<Button Name="changeThemeButton" Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="5"

Content="Change Theme" />

</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.grid.BackgroundTransition = new BrushTransition();

            this.changeThemeButton.Click += changeThemeButton_Click;
        }

        #endregion

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

        #region Change Theme 버튼 클릭시 처리하기 - changeThemeButton_Click(sender, e)

        /// <summary>
        /// Change Theme 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void changeThemeButton_Click(object sender, RoutedEventArgs e)
        {
            this.grid.RequestedTheme = this.grid.RequestedTheme == ElementTheme.Dark ? ElementTheme.Light : ElementTheme.Dark;
        }

        #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.grid.BackgroundTransition = new BrushTransition();

this.changeThemeButton.Click += changeThemeButton_Click;

}

#endregion

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

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

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

#region Change Theme 버튼 클릭시 처리하기 - changeThemeButton_Click(sender, e)

/// <summary>

/// Change Theme 버튼 클릭시 처리하기

/// </summary>

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

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

private void changeThemeButton_Click(object sender, RoutedEventArgs e)

{

this.grid.RequestedTheme = this.grid.RequestedTheme == ElementTheme.Dark ? ElementTheme.Light : ElementTheme.Dark;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ContentPresenter 클래스 : BackgroundTransition 속성에서 BrushTransition 객체를 사용해 색상 변경에 대한 애니메이션 만들기

■ ContentPresenter 클래스의 BackgroundTransition 속성에서 BrushTransition 객체를 사용해 색상 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ 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="*"    />
        </Grid.ColumnDefinitions>
        <ContentPresenter Name="contentPresenter" Grid.Column="0"
            Width="50"
            Height="50"
            Background="Blue" />
        <Button Name="backgroundColorButton" Grid.Column="1"
            Padding="5"
            Content="Change Background Color" />
    </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>

<ContentPresenter Name="contentPresenter" Grid.Column="0"

Width="50"

Height="50"

Background="Blue" />

<Button Name="backgroundColorButton" Grid.Column="1"

Padding="5"

Content="Change Background Color" />

</Grid>

</Page>

▶ MainPage.xaml.cs


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

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

        #region 생성자 - MainPage()

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

            this.contentPresenter.BackgroundTransition = new BrushTransition();

            this.backgroundColorButton.Click += backgroundColorButton_Click;
        }

        #endregion

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

        #region 배경색 버튼 클릭시 처리하기 - backgroundColorButton_Click(sender, e)

        /// <summary>
        /// 배경색 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void backgroundColorButton_Click(object sender, RoutedEventArgs e)
        {
            if((this.contentPresenter.Background as SolidColorBrush).Color == Colors.Blue)
            {
                this.contentPresenter.Background = new SolidColorBrush(Colors.Yellow);
            }
            else
            {
                this.contentPresenter.Background = new SolidColorBrush(Colors.Blue);
            }
        }

        #endregion
    }
}

using Microsoft.UI;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.contentPresenter.BackgroundTransition = new BrushTransition();

this.backgroundColorButton.Click += backgroundColorButton_Click;

}

#endregion

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

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

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

#region 배경색 버튼 클릭시 처리하기 - backgroundColorButton_Click(sender, e)

/// <summary>

/// 배경색 버튼 클릭시 처리하기

/// </summary>

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

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

private void backgroundColorButton_Click(object sender, RoutedEventArgs e)

{

if((this.contentPresenter.Background as SolidColorBrush).Color == Colors.Blue)

{

this.contentPresenter.Background = new SolidColorBrush(Colors.Yellow);

}

else

{

this.contentPresenter.Background = new SolidColorBrush(Colors.Blue);

}

#endregion

}

TestProject.zip

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

■ Rectangle 클래스의 TranslationTransition 속성에서 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"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Margin="50"
            Width="50"
            Height="50"
            Fill="{ThemeResource SystemAccentColor}" />
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Button Name="translateButton1"
                Tag="0"
                Content="Set Translation to (0, 0, 0)" />
            <Button Name="translateButton2"
                Margin="0 10 0 0"
                Tag="100"
                Content="Set Translation to (100, 100, 100)" />
            <Button Name="translateButton3"
                Margin="0 10 0 0"
                Tag="200"
                Content="Set Translation to (200, 200, 200)" />
            <TextBlock
                Margin="0 10 0 0"
                Text="Components" />
            <CheckBox Name="translateXCheckBox"
                Margin="0 10 0 0"
                Content="Animate X"
                IsChecked="True" />
            <CheckBox Name="translateYCheckBox"
                Margin="0 10 0 0"
                Content="Animate Y"
                IsChecked="True" />
            <CheckBox Name="translateZCheckBox"
                Margin="0 10 0 0"
                Content="Animate Z"
                IsChecked="True" />
            <NumberBox Name="translationNumberBox"
                Margin="0 10 0 0"
                Header="Translation (0.0 to 200.0)"
                Minimum="0"
                Maximum="200"
                Value="1" />
            <Button Name="translateButton"
                Margin="0 10 0 0"
                Content="Set custom Translation"
                Padding="5" />
        </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"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Margin="50"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}" />

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Button Name="translateButton1"

Tag="0"

Content="Set Translation to (0, 0, 0)" />

<Button Name="translateButton2"

Margin="0 10 0 0"

Tag="100"

Content="Set Translation to (100, 100, 100)" />

<Button Name="translateButton3"

Margin="0 10 0 0"

Tag="200"

Content="Set Translation to (200, 200, 200)" />

<TextBlock

Margin="0 10 0 0"

Text="Components" />

<CheckBox Name="translateXCheckBox"

Margin="0 10 0 0"

Content="Animate X"

IsChecked="True" />

<CheckBox Name="translateYCheckBox"

Margin="0 10 0 0"

Content="Animate Y"

IsChecked="True" />

<CheckBox Name="translateZCheckBox"

Margin="0 10 0 0"

Content="Animate Z"

IsChecked="True" />

<NumberBox Name="translationNumberBox"

Margin="0 10 0 0"

Header="Translation (0.0 to 200.0)"

Minimum="0"

Maximum="200"

Value="1" />

<Button Name="translateButton"

Margin="0 10 0 0"

Content="Set custom Translation"

Padding="5" />

</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.TranslationTransition = new Vector3Transition();

            this.translateButton1.Click       += translateButton_Click;
            this.translateButton2.Click       += translateButton_Click;
            this.translateButton3.Click       += translateButton_Click;
            this.translationNumberBox.KeyDown += translationNumberBox_KeyDown;
            this.translateButton.Click        += translateButton_Click;
        }

        #endregion

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

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

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

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

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

            translationTransition.Components = ((this.translateXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) |
                                               ((this.translateYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |
                                               ((this.translateZCheckBox.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(translationNumberBox);
            }

            this.rectangle.Translation = 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.TranslationTransition = new Vector3Transition();

this.translateButton1.Click += translateButton_Click;

this.translateButton2.Click += translateButton_Click;

this.translateButton3.Click += translateButton_Click;

this.translationNumberBox.KeyDown += translationNumberBox_KeyDown;

this.translateButton.Click += translateButton_Click;

}

#endregion

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

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

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

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

/// <summary>

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

/// </summary>

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

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

private void translationNumberBox_KeyDown(object sender, KeyRoutedEventArgs e)

{

if(e.Key == VirtualKey.Enter)

{

translateButton_Click(null, null);

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void translateButton_Click(object sender, RoutedEventArgs e)

{

Vector3Transition translationTransition = rectangle.TranslationTransition;

translationTransition.Components = ((this.translateXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) |

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

((this.translateZCheckBox.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(translationNumberBox);

}

this.rectangle.Translation = 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

[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

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

■ Rectangle 클래스의 RotationTransition 속성에서 ScalarTransition 객체를 사용해 회전 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ 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"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="50"
            Height="50">
            <Rectangle.Fill>
                <LinearGradientBrush
                    StartPoint="0.5 0"
                    EndPoint="0.5 1">
                    <GradientStop Offset="0.0" Color="LightGray"                         />
                    <GradientStop Offset="1.0" Color="{ThemeResource SystemAccentColor}" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <NumberBox Name="rotationNumberBox"
                Width="200"
                Header="Rotation (0.0 to 360.0)"
                Minimum="0"
                Maximum="360"
                Value="45" />
            <Button Name="rotateButton"
                Margin="0 10 0 0"
                Padding="5"
                Content="Set Rotation" />
        </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"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="50"

Height="50">

<Rectangle.Fill>

<LinearGradientBrush

StartPoint="0.5 0"

EndPoint="0.5 1">

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<NumberBox Name="rotationNumberBox"

Width="200"

Header="Rotation (0.0 to 360.0)"

Minimum="0"

Maximum="360"

Value="45" />

<Button Name="rotateButton"

Margin="0 10 0 0"

Padding="5"

Content="Set Rotation" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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.RotationTransition = new ScalarTransition();

            this.rotationNumberBox.KeyDown += rotationNumberBox_KeyDown;
            this.rotateButton.Click        += rotateButton_Click;
        }

        #endregion

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

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

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

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

        /// <summary>
        /// Rotate 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void rotateButton_Click(object sender, RoutedEventArgs e)
        {
            this.rectangle.CenterPoint = new Vector3((float)this.rectangle.ActualWidth / 2, (float)this.rectangle.ActualHeight / 2, 0f);

            this.rectangle.Rotation = NormalizeValue(this.rotationNumberBox);
        }

        #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
    }
}

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.RotationTransition = new ScalarTransition();

this.rotationNumberBox.KeyDown += rotationNumberBox_KeyDown;

this.rotateButton.Click += rotateButton_Click;

}

#endregion

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

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

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

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

/// <summary>

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

/// </summary>

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

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

private void rotationNumberBox_KeyDown(object sender, KeyRoutedEventArgs e)

{

if(e.Key == VirtualKey.Enter)

{

rotateButton_Click(null, null);

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void rotateButton_Click(object sender, RoutedEventArgs e)

{

this.rectangle.CenterPoint = new Vector3((float)this.rectangle.ActualWidth / 2, (float)this.rectangle.ActualHeight / 2, 0f);

this.rectangle.Rotation = NormalizeValue(this.rotationNumberBox);

}

#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

[C#/WINUI3/.NET6] Rectangle 클래스 : OpacityTransition 속성에서 ScalarTransition 객체를 사용해 불투명도 변경에 대한 애니메이션 만들기

■ Rectangle 클래스의 OpacityTransition 속성에서 ScalarTransition 객체를 사용해 불투명도 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ 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"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="50"
            Height="50"
            Fill="{ThemeResource SystemAccentColor}"
            Opacity="0.5" />
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <NumberBox Name="opacityNumberBox"
                Width="200"
                Header="Opacity (0.0 to 1.0)"
                Minimum="0"
                Maximum="1"
                Value="0.5" />
            <Button Name="opacityButton"
                Margin="0 10 0 0"
                Content="Set Opacity" />
        </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"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}"

Opacity="0.5" />

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<NumberBox Name="opacityNumberBox"

Width="200"

Header="Opacity (0.0 to 1.0)"

Minimum="0"

Maximum="1"

Value="0.5" />

<Button Name="opacityButton"

Margin="0 10 0 0"

Content="Set Opacity" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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

using Windows.Foundation.Metadata;

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

        #region Field

        /// <summary>
        /// 합성자
        /// </summary>
        private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

        #endregion

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

        #region 생성자 - MainPage()

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

            this.rectangle.OpacityTransition = new ScalarTransition();

            this.opacityNumberBox.KeyDown += opacityNumberBox_KeyDown;
            this.opacityButton.Click      += opacityButton_Click;
        }

        #endregion

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

        #region 불투명도 넘버 박스 키 다운시 처리하기 - opacityNumberBox_KeyDown(sender, e)

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

        #endregion
        #region 불투명도 버튼 클릭시 처리하기 - opacityButton_Click(sender, e)

        /// <summary>
        /// 불투명도 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void opacityButton_Click(object sender, RoutedEventArgs e)
        {
            if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                return;
            }

            float opacity = NormalizeValue(this.opacityNumberBox);

            this.rectangle.Opacity = opacity;
        }

        #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

using Microsoft.UI.Composition;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Input;

using Microsoft.UI.Xaml.Media;

using Windows.Foundation.Metadata;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 합성자

/// </summary>

private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.rectangle.OpacityTransition = new ScalarTransition();

this.opacityNumberBox.KeyDown += opacityNumberBox_KeyDown;

this.opacityButton.Click += opacityButton_Click;

}

#endregion

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

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

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

#region 불투명도 넘버 박스 키 다운시 처리하기 - opacityNumberBox_KeyDown(sender, e)

/// <summary>

/// 불투명도 넘버 박스 키 다운시 처리하기

/// </summary>

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

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

private void opacityNumberBox_KeyDown(object sender, KeyRoutedEventArgs e)

{

if(e.Key == Windows.System.VirtualKey.Enter)

{

opacityButton_Click(null, null);

}

#endregion

#region 불투명도 버튼 클릭시 처리하기 - opacityButton_Click(sender, e)

/// <summary>

/// 불투명도 버튼 클릭시 처리하기

/// </summary>

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

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

private void opacityButton_Click(object sender, RoutedEventArgs e)

{

if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

return;

}

float opacity = NormalizeValue(this.opacityNumberBox);

this.rectangle.Opacity = opacity;

}

#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

[C#/WINUI3/.NET6] ExpressionAnimation 클래스 : 서로 상대적인 엘리먼트 위치 설정하기

■ ExpressionAnimation 클래스를 사용해 서로 상대적인 엘리먼트 위치를 설정하는 방법을 보여준다. ▶ DoubleToThicknessConverter.cs


using System;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Data;

namespace TestProject
{
    /// <summary>
    /// 실수→두께 변환자
    /// </summary>
    public class DoubleToThicknessConverter : IValueConverter
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 변환하기 - Convert(sourceValue, targetType, parameter, language)

        /// <summary>
        /// 변환하기
        /// </summary>
        /// <param name="sourceValue">소스 값</param>
        /// <param name="targetType">타겟 타입</param>
        /// <param name="parameter">매개 변수</param>
        /// <param name="language">언어</param>
        /// <returns>변환 값</returns>
        public object Convert(object sourceValue, Type targetType, object parameter, string language)
        {
            if(sourceValue is double?)
            {
                return new Thickness((double)sourceValue);
            }

            return false;
        }

        #endregion
        #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

        /// <summary>
        /// 역변환하기
        /// </summary>
        /// <param name="sourceValue">소스 값</param>
        /// <param name="targetType">타겟 타입</param>
        /// <param name="parameter">매개 변수</param>
        /// <param name="language">언어</param>
        /// <returns>역변환 값</returns>
        public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
}

using System;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Data;

namespace TestProject

{

/// <summary>

/// 실수→두께 변환자

/// </summary>

public class DoubleToThicknessConverter : IValueConverter

{

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

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

#region 변환하기 - Convert(sourceValue, targetType, parameter, language)

/// <summary>

/// 변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>변환 값</returns>

public object Convert(object sourceValue, Type targetType, object parameter, string language)

{

if(sourceValue is double?)

{

return new Thickness((double)sourceValue);

}

return false;

}

#endregion

#region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

/// <summary>

/// 역변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>역변환 값</returns>

public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)

{

throw new NotImplementedException();

}

#endregion

}

▶ 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"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <local:DoubleToThicknessConverter x:Key="DoubleToThicknessConverterKey" />
    </Page.Resources>
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0"
            HorizontalAlignment="Left">
            <TextBlock Name="targetTextBlock"
                Margin="{x:Bind marginSlider.Value, Converter={StaticResource DoubleToThicknessConverterKey}, Mode=OneWay}"
                Width="300"
                TextWrapping="WrapWholeWords"
                FontSize="{x:Bind fontSizeSlider.Value, Mode=OneWay}"
                Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
            <Popup Name="popup"
                Margin="5">
                <Grid
                    MinWidth="50"
                    MaxWidth="200"
                    MinHeight="50"
                    BorderBrush="{ThemeResource SystemControlForegroundChromeGrayBrush}"
                    BorderThickness="2"
                    Background="{ThemeResource FlyoutBackgroundThemeBrush}">
                    <TextBlock
                        Style="{ThemeResource CaptionTextBlockStyle}"
                        VerticalAlignment="Center"
                        Margin="5"
                        TextWrapping="WrapWholeWords"
                        Text="I am always right aligned center to the target." />
                </Grid>
            </Popup>
        </Grid>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Slider Name="fontSizeSlider"
                Header="Change font size"
                Minimum="12"
                Maximum="24" />
            <Slider Name="marginSlider"
                Margin="0 10 0 0"
                Header="Change text margin"
                Minimum="0"
                Maximum="100" />
        </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"

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

<local:DoubleToThicknessConverter x:Key="DoubleToThicknessConverterKey" />

</Page.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid Grid.Column="0"

HorizontalAlignment="Left">

<TextBlock Name="targetTextBlock"

Margin="{x:Bind marginSlider.Value, Converter={StaticResource DoubleToThicknessConverterKey}, Mode=OneWay}"

Width="300"

TextWrapping="WrapWholeWords"

FontSize="{x:Bind fontSizeSlider.Value, Mode=OneWay}"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

<Popup Name="popup"

Margin="5">

<Grid

MinWidth="50"

MaxWidth="200"

MinHeight="50"

BorderBrush="{ThemeResource SystemControlForegroundChromeGrayBrush}"

BorderThickness="2"

Background="{ThemeResource FlyoutBackgroundThemeBrush}">

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

VerticalAlignment="Center"

Margin="5"

TextWrapping="WrapWholeWords"

Text="I am always right aligned center to the target." />

</Grid>

</Popup>

</Grid>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Slider Name="fontSizeSlider"

Header="Change font size"

Minimum="12"

Maximum="24" />

<Slider Name="marginSlider"

Margin="0 10 0 0"

Header="Change text margin"

Minimum="0"

Maximum="100" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Composition;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;

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

        #region Field

        /// <summary>
        /// 합성자
        /// </summary>
        private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

        #endregion

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

        #region 생성자 - MainPage()

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

            Loaded += Page_Loaded;
        }

        #endregion

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

        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

            animation.Expression = "Vector3(source.ActualOffset.X + source.ActualSize.X, source.ActualOffset.Y + source.ActualSize.Y / 2 - 25, 0)";
            animation.Target     = "Translation";

            animation.SetExpressionReferenceParameter("source", this.targetTextBlock);

            this.popup.StartAnimation(animation);

            this.popup.IsOpen = true;
        }

        #endregion
    }
}

using Microsoft.UI.Composition;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 합성자

/// </summary>

private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

Loaded += Page_Loaded;

}

#endregion

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

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

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

#region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

/// <summary>

/// 페이지 로드시 처리하기

/// </summary>

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

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

private void Page_Loaded(object sender, RoutedEventArgs e)

{

ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

animation.Expression = "Vector3(source.ActualOffset.X + source.ActualSize.X, source.ActualOffset.Y + source.ActualSize.Y / 2 - 25, 0)";

animation.Target = "Translation";

animation.SetExpressionReferenceParameter("source", this.targetTextBlock);

this.popup.StartAnimation(animation);

this.popup.IsOpen = true;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ExpressionAnimation 클래스 : 크기에 따라 새로운 레이아웃 만들기

■ ExpressionAnimation 클래스를 사용해 크기에 따라 새로운 레이아웃을 만드는 방법을 보여준다. ▶ 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>
        <Grid Name="layoutGrid" Grid.Column="0"
            Width="200"
            Height="200" />
        <Slider Name="radiusSlider" Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Header="Change radius"
            Width="150"
            Minimum="200"
            Maximum="400" />
    </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>

<Grid Name="layoutGrid" Grid.Column="0"

Width="200"

Height="200" />

<Slider Name="radiusSlider" Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Header="Change radius"

Width="150"

Minimum="200"

Maximum="400" />

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Composition;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Automation;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Media;

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

        #region Field

        /// <summary>
        /// 합성자
        /// </summary>
        private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

        #endregion

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

        #region 생성자 - MainPage()

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

            Loaded                         += Page_Loaded;
            this.radiusSlider.ValueChanged += radiusSlider_ValueChanged;
        }

        #endregion

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

        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            string radius     = "(layoutGrid.ActualSize.X / 2)";
            string theta      = ".02 * " + radius + " + ((2 * Pi) / buttonCount) * index";
            string xOffset    = radius;
            string yOffset    = "0";
            string expression = string.Format("Vector3({0} * cos({1}) + {2}, {0} * sin({1}) + {3}, 0)", radius, theta, xOffset, yOffset);

            int buttonCount = 8;

            for(int i = 0; i < buttonCount; i++)
            {
                Button button = new Button() { Content = "Button" };

                AutomationProperties.SetName(button, "Button " + i);

                this.layoutGrid.Children.Add(button);

                ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

                animation.Expression = expression;

                animation.SetScalarParameter("index", i + 1);
                animation.SetScalarParameter("buttonCount", buttonCount);

                animation.Target = "Translation";

                animation.SetExpressionReferenceParameter("layoutGrid", this.layoutGrid);

                button.StartAnimation(animation);
            }
        }

        #endregion
        #region 반경 슬라이더 값 변경시 처리하기 - radiusSlider_ValueChanged(sender, e)

        /// <summary>
        /// 반경 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void radiusSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            if(this.layoutGrid == null)
            {
                return;
            }

            this.layoutGrid.Width = this.layoutGrid.Height = e.NewValue;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

using Microsoft.UI.Composition;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Automation;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Controls.Primitives;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 합성자

/// </summary>

private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

Loaded += Page_Loaded;

this.radiusSlider.ValueChanged += radiusSlider_ValueChanged;

}

#endregion

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

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

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

#region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

/// <summary>

/// 페이지 로드시 처리하기

/// </summary>

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

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

private void Page_Loaded(object sender, RoutedEventArgs e)

{

string radius = "(layoutGrid.ActualSize.X / 2)";

string theta = ".02 * " + radius + " + ((2 * Pi) / buttonCount) * index";

string xOffset = radius;

string yOffset = "0";

string expression = string.Format("Vector3({0} * cos({1}) + {2}, {0} * sin({1}) + {3}, 0)", radius, theta, xOffset, yOffset);

int buttonCount = 8;

for(int i = 0; i < buttonCount; i++)

{

Button button = new Button() { Content = "Button" };

AutomationProperties.SetName(button, "Button " + i);

this.layoutGrid.Children.Add(button);

ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

animation.Expression = expression;

animation.SetScalarParameter("index", i + 1);

animation.SetScalarParameter("buttonCount", buttonCount);

animation.Target = "Translation";

animation.SetExpressionReferenceParameter("layoutGrid", this.layoutGrid);

button.StartAnimation(animation);

}

#endregion

#region 반경 슬라이더 값 변경시 처리하기 - radiusSlider_ValueChanged(sender, e)

/// <summary>

/// 반경 슬라이더 값 변경시 처리하기

/// </summary>

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

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

private void radiusSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

{

if(this.layoutGrid == null)

{

return;

}

this.layoutGrid.Width = this.layoutGrid.Height = e.NewValue;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ExpressionAnimation 클래스 : 관련된 복수 애니메이션을 함께 움직이기

■ ExpressionAnimation 클래스를 사용해 관련된 복수 애니메이션을 함께 움직이는 방법을 보여준다. ▶ 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>
        <StackPanel Grid.Column="0">
            <Button Name="button1"
                Margin="5"
                Width="100"
                Height="50"
                Content="Item 1" />
            <Button Name="button2"
                Margin="5"
                Width="100"
                Height="50"
                Content="Item 2" />
            <Button Name="button3"
                Margin="5"
                Width="100"
                Height="50"
                Content="Item 3" />
            <Button Name="button4"
                Margin="5"
                Width="100"
                Height="50"
                Content="Item 4" />
        </StackPanel>
        <StackPanel Grid.Column="2"
            VerticalAlignment="Center">
            <RadioButtons Name="dampingRadioButtons"
                Header="Damping Ratio">
                <RadioButton Content="0.2" />
                <RadioButton Content="0.4" />
                <RadioButton Content="0.6" IsChecked="True" />
                <RadioButton Content="0.8" />
            </RadioButtons>
            <Slider Name="periodSlider"
                Header="Period (in ms)"
                Minimum="25"
                Maximum="200"
                TickFrequency="25"
                StepFrequency="25"
                Value="50" />
        </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>

<Button Name="button1"

Margin="5"

Width="100"

Height="50"

Content="Item 1" />

<Button Name="button2"

Margin="5"

Width="100"

Height="50"

Content="Item 2" />

<Button Name="button3"

Margin="5"

Width="100"

Height="50"

Content="Item 3" />

<Button Name="button4"

Margin="5"

Width="100"

Height="50"

Content="Item 4" />

</StackPanel>

<StackPanel Grid.Column="2"

VerticalAlignment="Center">

<RadioButtons Name="dampingRadioButtons"

Header="Damping Ratio">

</RadioButtons>

<Slider Name="periodSlider"

Header="Period (in ms)"

Minimum="25"

Maximum="200"

TickFrequency="25"

StepFrequency="25"

Value="50" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Numerics;

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

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

        #region Field

        /// <summary>
        /// 합성자
        /// </summary>
        private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

        /// <summary>
        /// 스프링 벡터3 자연 동작 애니메이션
        /// </summary>
        private SpringVector3NaturalMotionAnimation springAnimation;

        #endregion

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

        #region 생성자 - MainPage()

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

            Loaded                      += Page_Loaded;
            this.button1.PointerEntered += button_PointerEntered;
            this.button1.PointerExited  += button_PointerExited;
            this.button2.PointerEntered += button_PointerEntered;
            this.button2.PointerExited  += button_PointerExited;
            this.button3.PointerEntered += button_PointerEntered;
            this.button3.PointerExited  += button_PointerExited;
            this.button4.PointerEntered += button_PointerEntered;
            this.button4.PointerExited  += button_PointerExited;
        }

        #endregion

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

        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            UpdateSpringAnimation(1.0f);

            ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

            animation.Expression = "(above.Scale.Y - 1) * 50 + above.Translation.Y % (50 * index)";
            animation.Target     = "Translation.Y";

            animation.SetExpressionReferenceParameter("above", this.button1);
            animation.SetScalarParameter("index", 1);

            this.button2.StartAnimation(animation);

            animation.SetExpressionReferenceParameter("above", this.button2);
            animation.SetScalarParameter("index", 2);

            this.button3.StartAnimation(animation);

            animation.SetExpressionReferenceParameter("above", this.button3);
            animation.SetScalarParameter("index", 3);

            this.button4.StartAnimation(animation);
        }

        #endregion
        #region 버튼 포인터 진입시 처리하기 - button_PointerEntered(sender, e)

        /// <summary>
        /// 버튼 포인터 진입시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void button_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            UpdateSpringAnimation(1.5f);

            (sender as UIElement).StartAnimation(this.springAnimation);
        }

        #endregion
        #region 버튼 포인터 이탈시 처리하기 - button_PointerExited(sender, e)

        /// <summary>
        /// 버튼 포인터 이탈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void button_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            UpdateSpringAnimation(1f);

            (sender as UIElement).StartAnimation(this.springAnimation);
        }

        #endregion

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

        #region 댐핑 비율 구하기 - GetDampingRatio()

        /// <summary>
        /// 댐핑 비율 구하기
        /// </summary>
        /// <returns>댐핑 비율</returns>
        private float GetDampingRatio()
        {
            if(this.dampingRadioButtons.SelectedItem != null)
            {
                return (float)Convert.ToDouble((this.dampingRadioButtons.SelectedItem as RadioButton).Content);
            }

            return 0.6f;
        }

        #endregion
        #region 기간 구하기 - GetPeriod()

        /// <summary>
        /// 기간 구하기
        /// </summary>
        /// <returns>기간</returns>
        private TimeSpan GetPeriod()
        {
            return TimeSpan.FromMilliseconds(this.periodSlider.Value);
        }

        #endregion
        #region 스프링 애니메이션 업데이트하기 - UpdateSpringAnimation(finalValue)

        /// <summary>
        /// 스프링 애니메이션 업데이트하기
        /// </summary>
        /// <param name="finalValue">최종 값</param>
        private void UpdateSpringAnimation(float finalValue)
        {
            if(this.springAnimation == null)
            {
                this.springAnimation = this.compositor.CreateSpringVector3Animation();

                this.springAnimation.Target = "Scale";
            }

            this.springAnimation.FinalValue   = new Vector3(finalValue);
            this.springAnimation.DampingRatio = GetDampingRatio();
            this.springAnimation.Period       = GetPeriod();
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

using System;

using System.Numerics;

using Microsoft.UI.Composition;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Input;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 합성자

/// </summary>

private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

/// <summary>

/// 스프링 벡터3 자연 동작 애니메이션

/// </summary>

private SpringVector3NaturalMotionAnimation springAnimation;

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

Loaded += Page_Loaded;

this.button1.PointerEntered += button_PointerEntered;

this.button1.PointerExited += button_PointerExited;

this.button2.PointerEntered += button_PointerEntered;

this.button2.PointerExited += button_PointerExited;

this.button3.PointerEntered += button_PointerEntered;

this.button3.PointerExited += button_PointerExited;

this.button4.PointerEntered += button_PointerEntered;

this.button4.PointerExited += button_PointerExited;

}

#endregion

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

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

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

#region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

/// <summary>

/// 페이지 로드시 처리하기

/// </summary>

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

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

private void Page_Loaded(object sender, RoutedEventArgs e)

{

UpdateSpringAnimation(1.0f);

ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

animation.Expression = "(above.Scale.Y - 1) * 50 + above.Translation.Y % (50 * index)";

animation.Target = "Translation.Y";

animation.SetExpressionReferenceParameter("above", this.button1);

animation.SetScalarParameter("index", 1);

this.button2.StartAnimation(animation);

animation.SetExpressionReferenceParameter("above", this.button2);

animation.SetScalarParameter("index", 2);

this.button3.StartAnimation(animation);

animation.SetExpressionReferenceParameter("above", this.button3);

animation.SetScalarParameter("index", 3);

this.button4.StartAnimation(animation);

}

#endregion

#region 버튼 포인터 진입시 처리하기 - button_PointerEntered(sender, e)

/// <summary>

/// 버튼 포인터 진입시 처리하기

/// </summary>

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

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

private void button_PointerEntered(object sender, PointerRoutedEventArgs e)

{

UpdateSpringAnimation(1.5f);

(sender as UIElement).StartAnimation(this.springAnimation);

}

#endregion

#region 버튼 포인터 이탈시 처리하기 - button_PointerExited(sender, e)

/// <summary>

/// 버튼 포인터 이탈시 처리하기

/// </summary>

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

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

private void button_PointerExited(object sender, PointerRoutedEventArgs e)

{

UpdateSpringAnimation(1f);

(sender as UIElement).StartAnimation(this.springAnimation);

}

#endregion

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

#region 댐핑 비율 구하기 - GetDampingRatio()

/// <summary>

/// 댐핑 비율 구하기

/// </summary>

/// <returns>댐핑 비율</returns>

private float GetDampingRatio()

{

if(this.dampingRadioButtons.SelectedItem != null)

{

return (float)Convert.ToDouble((this.dampingRadioButtons.SelectedItem as RadioButton).Content);

}

return 0.6f;

}

#endregion

#region 기간 구하기 - GetPeriod()

/// <summary>

/// 기간 구하기

/// </summary>

/// <returns>기간</returns>

private TimeSpan GetPeriod()

{

return TimeSpan.FromMilliseconds(this.periodSlider.Value);

}

#endregion

#region 스프링 애니메이션 업데이트하기 - UpdateSpringAnimation(finalValue)

/// <summary>

/// 스프링 애니메이션 업데이트하기

/// </summary>

/// <param name="finalValue">최종 값</param>

private void UpdateSpringAnimation(float finalValue)

{

if(this.springAnimation == null)

{

this.springAnimation = this.compositor.CreateSpringVector3Animation();

this.springAnimation.Target = "Scale";

}

this.springAnimation.FinalValue = new Vector3(finalValue);

this.springAnimation.DampingRatio = GetDampingRatio();

this.springAnimation.Period = GetPeriod();

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ExpressionAnimation 클래스 : Expression/Target 속성을 사용해 애니메이션 만들기

■ ExpressionAnimation 클래스의 Expression/Target 속성을 사용해 애니메이션을 만드는 방법을 보여준다. ▶ 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>
        <Grid Grid.Column="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Rectangle Name="rectangle"
                Width="50"
                Height="50"
                Fill="{ThemeResource SystemAccentColor}" />
            <Ellipse Name="ellipse" Grid.Column="1"
                Width="50"
                Height="50"
                Fill="{ThemeResource SystemAccentColor}" />
        </Grid>
        <StackPanel Grid.Column="2"
            VerticalAlignment="Center">
            <RadioButtons Name="dampingRadioButtons"
                Header="Damping Ratio">
                <RadioButton Content="0.2" />
                <RadioButton Content="0.4" />
                <RadioButton Content="0.6" IsChecked="True" />
                <RadioButton Content="0.8" />
            </RadioButtons>
            <Slider Name="periodSlider"
                Header="Period (in ms)"
                Minimum="25"
                Maximum="200"
                TickFrequency="25"
                StepFrequency="25"
                Value="50" />
        </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>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Name="rectangle"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}" />

<Ellipse Name="ellipse" Grid.Column="1"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}" />

</Grid>

<StackPanel Grid.Column="2"

VerticalAlignment="Center">

<RadioButtons Name="dampingRadioButtons"

Header="Damping Ratio">

</RadioButtons>

<Slider Name="periodSlider"

Header="Period (in ms)"

Minimum="25"

Maximum="200"

TickFrequency="25"

StepFrequency="25"

Value="50" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Numerics;

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

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

        #region Field

        /// <summary>
        /// 합성자
        /// </summary>
        private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

        /// <summary>
        /// 스프링 벡터3 자연 동작 애니메이션
        /// </summary>
        private SpringVector3NaturalMotionAnimation springAnimation;

        #endregion

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

        #region 생성자 - MainPage()

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

            Loaded                        += Page_Loaded;
            this.rectangle.PointerEntered += rectangle_PointerEntered;
            this.rectangle.PointerExited  += rectangle_PointerExited;
        }

        #endregion

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

        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            UpdateSpringAnimation(1.0f);

            ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

            animation.Expression = "Vector3(1 / rectangle.Scale.X, 1 / rectangle.Scale.Y, 1)";
            animation.Target     = "Scale";

            animation.SetExpressionReferenceParameter("rectangle", rectangle);

            this.ellipse.StartAnimation(animation);
        }

        #endregion
        #region 사각형 포인터 진입시 처리하기 - rectangle_PointerEntered(sender, e)

        /// <summary>
        /// 사각형 포인터 진입시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void rectangle_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            UpdateSpringAnimation(1.5f);

            (sender as UIElement).StartAnimation(this.springAnimation);
        }

        #endregion
        #region 사각형 포인터 이탈시 처리하기 - rectangle_PointerExited(sender, e)

        /// <summary>
        /// 사각형 포인터 이탈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void rectangle_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            UpdateSpringAnimation(1f);

            (sender as UIElement).StartAnimation(this.springAnimation);
        }

        #endregion

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

        #region 댐핑 비율 구하기 - GetDampingRatio()

        /// <summary>
        /// 댐핑 비율 구하기
        /// </summary>
        /// <returns>댐핑 비율</returns>
        private float GetDampingRatio()
        {
            if(this.dampingRadioButtons.SelectedItem != null)
            {
                return (float)Convert.ToDouble((this.dampingRadioButtons.SelectedItem as RadioButton).Content);
            }

            return 0.6f;
        }

        #endregion
        #region 기간 구하기 - GetPeriod()

        /// <summary>
        /// 기간 구하기
        /// </summary>
        /// <returns>기간</returns>
        private TimeSpan GetPeriod()
        {
            return TimeSpan.FromMilliseconds(this.periodSlider.Value);
        }

        #endregion
        #region 스프링 애니메이션 업데이트하기 - UpdateSpringAnimation(finalValue)

        /// <summary>
        /// 스프링 애니메이션 업데이트하기
        /// </summary>
        /// <param name="finalValue">최종 값</param>
        private void UpdateSpringAnimation(float finalValue)
        {
            if(this.springAnimation == null)
            {
                this.springAnimation = this.compositor.CreateSpringVector3Animation();

                this.springAnimation.Target = "Scale";
            }

            this.springAnimation.FinalValue   = new Vector3(finalValue);
            this.springAnimation.DampingRatio = GetDampingRatio();
            this.springAnimation.Period       = GetPeriod();
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

using System;

using System.Numerics;

using Microsoft.UI.Composition;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Input;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 합성자

/// </summary>

private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

/// <summary>

/// 스프링 벡터3 자연 동작 애니메이션

/// </summary>

private SpringVector3NaturalMotionAnimation springAnimation;

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

Loaded += Page_Loaded;

this.rectangle.PointerEntered += rectangle_PointerEntered;

this.rectangle.PointerExited += rectangle_PointerExited;

}

#endregion

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

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

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

#region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

/// <summary>

/// 페이지 로드시 처리하기

/// </summary>

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

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

private void Page_Loaded(object sender, RoutedEventArgs e)

{

UpdateSpringAnimation(1.0f);

ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

animation.Expression = "Vector3(1 / rectangle.Scale.X, 1 / rectangle.Scale.Y, 1)";

animation.Target = "Scale";

animation.SetExpressionReferenceParameter("rectangle", rectangle);

this.ellipse.StartAnimation(animation);

}

#endregion

#region 사각형 포인터 진입시 처리하기 - rectangle_PointerEntered(sender, e)

/// <summary>

/// 사각형 포인터 진입시 처리하기

/// </summary>

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

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

private void rectangle_PointerEntered(object sender, PointerRoutedEventArgs e)

{

UpdateSpringAnimation(1.5f);

(sender as UIElement).StartAnimation(this.springAnimation);

}

#endregion

#region 사각형 포인터 이탈시 처리하기 - rectangle_PointerExited(sender, e)

/// <summary>

/// 사각형 포인터 이탈시 처리하기

/// </summary>

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

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

private void rectangle_PointerExited(object sender, PointerRoutedEventArgs e)

{

UpdateSpringAnimation(1f);

(sender as UIElement).StartAnimation(this.springAnimation);

}

#endregion

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

#region 댐핑 비율 구하기 - GetDampingRatio()

/// <summary>

/// 댐핑 비율 구하기

/// </summary>

/// <returns>댐핑 비율</returns>

private float GetDampingRatio()

{

if(this.dampingRadioButtons.SelectedItem != null)

{

return (float)Convert.ToDouble((this.dampingRadioButtons.SelectedItem as RadioButton).Content);

}

return 0.6f;

}

#endregion

#region 기간 구하기 - GetPeriod()

/// <summary>

/// 기간 구하기

/// </summary>

/// <returns>기간</returns>

private TimeSpan GetPeriod()

{

return TimeSpan.FromMilliseconds(this.periodSlider.Value);

}

#endregion

#region 스프링 애니메이션 업데이트하기 - UpdateSpringAnimation(finalValue)

/// <summary>

/// 스프링 애니메이션 업데이트하기

/// </summary>

/// <param name="finalValue">최종 값</param>

private void UpdateSpringAnimation(float finalValue)

{

if(this.springAnimation == null)

{

this.springAnimation = this.compositor.CreateSpringVector3Animation();

this.springAnimation.Target = "Scale";

}

this.springAnimation.FinalValue = new Vector3(finalValue);

this.springAnimation.DampingRatio = GetDampingRatio();

this.springAnimation.Period = GetPeriod();

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] Compositor 클래스 : CreateSpringVector3Animation 메소드를 사용해 자연스러운 모션 컴포지션 애니메이션 만들기

■ Compositor 클래스의 CreateSpringVector3Animation 메소드를 사용해 자연스러운 모션 컴포지션 애니메이션을 만드는 방법을 보여준다. ▶ 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>
        <StackPanel Grid.Column="0"
            VerticalAlignment="Stretch">
            <TextBlock
                Text="Hover over the button to animate its scale."
                Style="{ThemeResource BodyTextBlockStyle}" />
            <Button Name="itemButton"
                Margin="0 10 0 0"
                Width="100"
                Height="50"
                Content="Item" />
        </StackPanel>
        <StackPanel Grid.Column="2"
            VerticalAlignment="Center">
            <RadioButtons Name="dampingRadioButtons"
                Header="Damping Ratio">
                <RadioButton Content="0.2" />
                <RadioButton Content="0.4" />
                <RadioButton Content="0.6" IsChecked="True" />
                <RadioButton Content="0.8" />
            </RadioButtons>
            <Slider Name="periodSlider"
                Header="Period (in ms)"
                Minimum="25"
                Maximum="200"
                TickFrequency="25"
                StepFrequency="25"
                Value="50" />
        </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>

<StackPanel Grid.Column="0"

VerticalAlignment="Stretch">

<TextBlock

Text="Hover over the button to animate its scale."

Style="{ThemeResource BodyTextBlockStyle}" />

<Button Name="itemButton"

Margin="0 10 0 0"

Width="100"

Height="50"

Content="Item" />

</StackPanel>

<StackPanel Grid.Column="2"

VerticalAlignment="Center">

<RadioButtons Name="dampingRadioButtons"

Header="Damping Ratio">

</RadioButtons>

<Slider Name="periodSlider"

Header="Period (in ms)"

Minimum="25"

Maximum="200"

TickFrequency="25"

StepFrequency="25"

Value="50" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Numerics;

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

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

        #region Field

        /// <summary>
        /// 합성자
        /// </summary>
        private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

        /// <summary>
        /// 스프링 벡터3 자연 동작 애니메이션
        /// </summary>
        private SpringVector3NaturalMotionAnimation springAnimation;

        #endregion

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

        #region 생성자 - MainPage()

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

            Loaded                         += Page_Loaded;
            this.itemButton.PointerEntered += itemButton_PointerEntered;
            this.itemButton.PointerExited  += itemButton_PointerExited;
        }

        #endregion

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

        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            UpdateSpringAnimation(1.0f);
        }

        #endregion
        #region 항목 버튼 포인터 진입시 처리하기 - itemButton_PointerEntered(sender, e)

        /// <summary>
        /// 항목 버튼 포인터 진입시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void itemButton_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            UpdateSpringAnimation(1.5f);

            (sender as UIElement).StartAnimation(this.springAnimation);
        }

        #endregion
        #region 항목 버튼 포인터 이탈시 처리하기 - itemButton_PointerExited(sender, e)

        /// <summary>
        /// 항목 버튼 포인터 이탈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void itemButton_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            UpdateSpringAnimation(1f);

            (sender as UIElement).StartAnimation(this.springAnimation);
        }

        #endregion

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

        #region 댐핑 비율 구하기 - GetDampingRatio()

        /// <summary>
        /// 댐핑 비율 구하기
        /// </summary>
        /// <returns>댐핑 비율</returns>
        private float GetDampingRatio()
        {
            if(this.dampingRadioButtons.SelectedItem != null)
            {
                return (float)Convert.ToDouble((this.dampingRadioButtons.SelectedItem as RadioButton).Content);
            }

            return 0.6f;
        }

        #endregion
        #region 기간 구하기 - GetPeriod()

        /// <summary>
        /// 기간 구하기
        /// </summary>
        /// <returns>기간</returns>
        private TimeSpan GetPeriod()
        {
            return TimeSpan.FromMilliseconds(this.periodSlider.Value);
        }

        #endregion
        #region 스프링 애니메이션 업데이트하기 - UpdateSpringAnimation(finalValue)

        /// <summary>
        /// 스프링 애니메이션 업데이트하기
        /// </summary>
        /// <param name="finalValue">최종 값</param>
        private void UpdateSpringAnimation(float finalValue)
        {
            if(this.springAnimation == null)
            {
                this.springAnimation = this.compositor.CreateSpringVector3Animation();

                this.springAnimation.Target = "Scale";
            }

            this.springAnimation.FinalValue   = new Vector3(finalValue);
            this.springAnimation.DampingRatio = GetDampingRatio();
            this.springAnimation.Period       = GetPeriod();
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

using System;

using System.Numerics;

using Microsoft.UI.Composition;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Input;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 합성자

/// </summary>

private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

/// <summary>

/// 스프링 벡터3 자연 동작 애니메이션

/// </summary>

private SpringVector3NaturalMotionAnimation springAnimation;

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

Loaded += Page_Loaded;

this.itemButton.PointerEntered += itemButton_PointerEntered;

this.itemButton.PointerExited += itemButton_PointerExited;

}

#endregion

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

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

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

#region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

/// <summary>

/// 페이지 로드시 처리하기

/// </summary>

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

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

private void Page_Loaded(object sender, RoutedEventArgs e)

{

UpdateSpringAnimation(1.0f);

}

#endregion

#region 항목 버튼 포인터 진입시 처리하기 - itemButton_PointerEntered(sender, e)

/// <summary>

/// 항목 버튼 포인터 진입시 처리하기

/// </summary>

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

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

private void itemButton_PointerEntered(object sender, PointerRoutedEventArgs e)

{

UpdateSpringAnimation(1.5f);

(sender as UIElement).StartAnimation(this.springAnimation);

}

#endregion

#region 항목 버튼 포인터 이탈시 처리하기 - itemButton_PointerExited(sender, e)

/// <summary>

/// 항목 버튼 포인터 이탈시 처리하기

/// </summary>

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

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

private void itemButton_PointerExited(object sender, PointerRoutedEventArgs e)

{

UpdateSpringAnimation(1f);

(sender as UIElement).StartAnimation(this.springAnimation);

}

#endregion

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

#region 댐핑 비율 구하기 - GetDampingRatio()

/// <summary>

/// 댐핑 비율 구하기

/// </summary>

/// <returns>댐핑 비율</returns>

private float GetDampingRatio()

{

if(this.dampingRadioButtons.SelectedItem != null)

{

return (float)Convert.ToDouble((this.dampingRadioButtons.SelectedItem as RadioButton).Content);

}

return 0.6f;

}

#endregion

#region 기간 구하기 - GetPeriod()

/// <summary>

/// 기간 구하기

/// </summary>

/// <returns>기간</returns>

private TimeSpan GetPeriod()

{

return TimeSpan.FromMilliseconds(this.periodSlider.Value);

}

#endregion

#region 스프링 애니메이션 업데이트하기 - UpdateSpringAnimation(finalValue)

/// <summary>

/// 스프링 애니메이션 업데이트하기

/// </summary>

/// <param name="finalValue">최종 값</param>

private void UpdateSpringAnimation(float finalValue)

{

if(this.springAnimation == null)

{

this.springAnimation = this.compositor.CreateSpringVector3Animation();

this.springAnimation.Target = "Scale";

}

this.springAnimation.FinalValue = new Vector3(finalValue);

this.springAnimation.DampingRatio = GetDampingRatio();

this.springAnimation.Period = GetPeriod();

}

#endregion

}

TestProject.zip