ANIMATION Archives - 17 중 4 번째 페이지

[C#/WINUI3/.NET6] PopupThemeTransition 엘리먼트 : 팝업 테마 변환 만들기

■ PopupThemeTransition 엘리먼트를 사용해 팝업 테마 변환을 만드는 방법을 보여준다. ▶ 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">
        <Button Name="showPopupButton"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Padding="10"
            Content="Show Popup" />
        <Popup Name="popup"
            Width="200"
            Height="200">
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <PopupThemeTransition />
                </TransitionCollection>
            </Popup.ChildTransitions>
            <Grid>
                <Ellipse
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Width="200"
                    Height="200"
                    StrokeThickness="2"
                    Stroke="{ThemeResource SystemControlForegroundChromeGrayBrush}"
                    Fill="{ThemeResource FlyoutBackgroundThemeBrush}" />
                <StackPanel
                    VerticalAlignment="Center"
                    Margin="25"
                    Width="200">
                    <TextBlock
                        HorizontalAlignment="Center"
                        Margin="10"
                        TextAlignment="Center"
                        TextWrapping="WrapWholeWords"
                        FontFamily="Segoe UI"
                        Text="This is a popup using PopupThemeTransition" />
                    <Button Name="closePopupButton"
                        HorizontalAlignment="Center"
                        Padding="5"
                        Content="Close Popup" />
                </StackPanel>
            </Grid>
        </Popup>
    </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">

<Button Name="showPopupButton"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10"

Content="Show Popup" />

<Popup Name="popup"

Width="200"

Height="200">

<Popup.ChildTransitions>

</TransitionCollection>

</Popup.ChildTransitions>

<Grid>

<Ellipse

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Width="200"

Height="200"

StrokeThickness="2"

Stroke="{ThemeResource SystemControlForegroundChromeGrayBrush}"

Fill="{ThemeResource FlyoutBackgroundThemeBrush}" />

<StackPanel

VerticalAlignment="Center"

Margin="25"

Width="200">

<TextBlock

HorizontalAlignment="Center"

Margin="10"

TextAlignment="Center"

TextWrapping="WrapWholeWords"

FontFamily="Segoe UI"

Text="This is a popup using PopupThemeTransition" />

<Button Name="closePopupButton"

HorizontalAlignment="Center"

Padding="5"

Content="Close Popup" />

</StackPanel>

</Grid>

</Popup>

</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.showPopupButton.Click  += showPopupButton_Click;
            this.closePopupButton.Click += closePopupButton_Click;
        }

        #endregion

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

        #region Show Popup 버튼 클릭시 처리하기 - showPopupButton_Click(sender, e)

        /// <summary>
        /// Show Popup 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void showPopupButton_Click(object sender, RoutedEventArgs e)
        {
            this.popup.IsOpen = true;

            this.closePopupButton.Focus(FocusState.Programmatic);
        }

        #endregion
        #region Close Popup 버튼 클릭시 처리하기 - closePopupButton_Click(sender, e)

        /// <summary>
        /// Close Popup 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void closePopupButton_Click(object sender, RoutedEventArgs e)
        {
            this.popup.IsOpen = false;

            this.showPopupButton.Focus(FocusState.Programmatic);
        }

        #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.showPopupButton.Click += showPopupButton_Click;

this.closePopupButton.Click += closePopupButton_Click;

}

#endregion

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

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

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

#region Show Popup 버튼 클릭시 처리하기 - showPopupButton_Click(sender, e)

/// <summary>

/// Show Popup 버튼 클릭시 처리하기

/// </summary>

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

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

private void showPopupButton_Click(object sender, RoutedEventArgs e)

{

this.popup.IsOpen = true;

this.closePopupButton.Focus(FocusState.Programmatic);

}

#endregion

#region Close Popup 버튼 클릭시 처리하기 - closePopupButton_Click(sender, e)

/// <summary>

/// Close Popup 버튼 클릭시 처리하기

/// </summary>

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

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

private void closePopupButton_Click(object sender, RoutedEventArgs e)

{

this.popup.IsOpen = false;

this.showPopupButton.Focus(FocusState.Programmatic);

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] AddDeleteThemeTransition 엘리먼트 : 추가/삭제 테마 변환 만들기

■ AddDeleteThemeTransition 엘리먼트를 사용해 추가/삭제 테마 변환을 만드는 방법을 보여준다. ▶ 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>
        <ListView Name="listView" Grid.Column="0">
            <ListView.ItemContainerTransitions>
                <TransitionCollection>
                    <AddDeleteThemeTransition />
                </TransitionCollection>
            </ListView.ItemContainerTransitions>
        </ListView>
        <StackPanel Grid.Column="2"
            VerticalAlignment="Center">
            <Button Name="addButton"
                Content="Add" />
            <Button Name="deleteButton"
                Margin="0 10 0 0"
                Content="Delete" />
            <Button Name="addAndDeleteButton"
                Margin="0 10 0 0"
                Content="Add and Delete" />
        </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>

<ListView.ItemContainerTransitions>

</TransitionCollection>

</ListView.ItemContainerTransitions>

</ListView>

<StackPanel Grid.Column="2"

VerticalAlignment="Center">

<Button Name="addButton"

Content="Add" />

<Button Name="deleteButton"

Margin="0 10 0 0"

Content="Delete" />

<Button Name="addAndDeleteButton"

Margin="0 10 0 0"

Content="Add and Delete" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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

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

        #region Field

        /// <summary>
        /// 항목 카운트
        /// </summary>
        private int itemCount = 10;

        #endregion

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

        #region 생성자 - MainPage()

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

            for(int i = 0; i < this.itemCount; i++)
            {
                this.listView.Items.Add(new ListViewItem() { Content = "Item " + i });
            }

            this.addButton.Click          += addButton_Click;
            this.deleteButton.Click       += deleteButton_Click;
            this.addAndDeleteButton.Click += addAndDeleteButton_Click;
        }

        #endregion

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

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

        /// <summary>
        /// Add 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void addButton_Click(object sender, RoutedEventArgs e)
        {
            this.listView.Items.Add(new ListViewItem() { Content = "New Item " +  this.itemCount.ToString()});

            this.itemCount++;
        }

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

        /// <summary>
        /// Delete 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void deleteButton_Click(object sender, RoutedEventArgs e)
        {
            if(this.listView.Items.Count > 0)
            {
                this.listView.Items.RemoveAt(0);
            }
        }

        #endregion
        #region Add and Delete 버튼 클릭시 처리하기 - addAndDeleteButton_Click(sender, e)

        /// <summary>
        /// Add and Delete 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void addAndDeleteButton_Click(object sender, RoutedEventArgs e)
        {
            addButton_Click(sender, e);
            deleteButton_Click(sender, e);
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 항목 카운트

/// </summary>

private int itemCount = 10;

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

for(int i = 0; i < this.itemCount; i++)

{

this.listView.Items.Add(new ListViewItem() { Content = "Item " + i });

}

this.addButton.Click += addButton_Click;

this.deleteButton.Click += deleteButton_Click;

this.addAndDeleteButton.Click += addAndDeleteButton_Click;

}

#endregion

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

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

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

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

/// <summary>

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

/// </summary>

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

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

private void addButton_Click(object sender, RoutedEventArgs e)

{

this.listView.Items.Add(new ListViewItem() { Content = "New Item " + this.itemCount.ToString()});

this.itemCount++;

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void deleteButton_Click(object sender, RoutedEventArgs e)

{

if(this.listView.Items.Count > 0)

{

this.listView.Items.RemoveAt(0);

}

#endregion

#region Add and Delete 버튼 클릭시 처리하기 - addAndDeleteButton_Click(sender, e)

/// <summary>

/// Add and Delete 버튼 클릭시 처리하기

/// </summary>

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

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

private void addAndDeleteButton_Click(object sender, RoutedEventArgs e)

{

addButton_Click(sender, e);

deleteButton_Click(sender, e);

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ContentThemeTransition 엘리먼트 : 컨텐트 테마 변환 만들기

■ ContentThemeTransition 엘리먼트를 사용해 컨텐트 테마 변환을 만드는 방법을 보여준다. ▶ 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>
        <ListView x:Name="ContentList" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="300"
            Height="300"
            BorderThickness="1"
            BorderBrush="Black">
            <ListView.ItemContainerTransitions>
                <TransitionCollection>
                    <ContentThemeTransition />
                </TransitionCollection>
            </ListView.ItemContainerTransitions>
        </ListView>
        <Button Name="refreshDataButton" Grid.Column="2"
            VerticalAlignment="Center"
            Content="Refresh data" />
    </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>

<ListView x:Name="ContentList" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="300"

Height="300"

BorderThickness="1"

BorderBrush="Black">

<ListView.ItemContainerTransitions>

</TransitionCollection>

</ListView.ItemContainerTransitions>

</ListView>

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

VerticalAlignment="Center"

Content="Refresh data" />

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Collections.Generic;

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();

            SetListViewData();

            this.refreshDataButton.Click += refreshDataButton_Click;
        }

        #endregion

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

        #region Refresh data 버튼 클릭시 처리하기 - refreshDataButton_Click(sender, e)

        /// <summary>
        /// Refresh data 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void refreshDataButton_Click(object sender, RoutedEventArgs e)
        {
            SetListViewData(true);
        }

        #endregion

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

        #region 리스트 뷰 데이터 설정하기 - SetListViewData(updated)

        /// <summary>
        /// 리스트 뷰 데이터 설정하기
        /// </summary>
        /// <param name="updated">업데이트 여부</param>
        private void SetListViewData(bool updated = false)
        {
            List<string> list = new List<string>();

            for(int i = 0; i < 5; i++)
            {
                list.Add(updated ? "Updated content " + i : "Item " + i);
            }

            this.listView.ItemsSource = list;
        }

        #endregion
    }
}

using System.Collections.Generic;

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();

SetListViewData();

this.refreshDataButton.Click += refreshDataButton_Click;

}

#endregion

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

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

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

#region Refresh data 버튼 클릭시 처리하기 - refreshDataButton_Click(sender, e)

/// <summary>

/// Refresh data 버튼 클릭시 처리하기

/// </summary>

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

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

private void refreshDataButton_Click(object sender, RoutedEventArgs e)

{

SetListViewData(true);

}

#endregion

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

#region 리스트 뷰 데이터 설정하기 - SetListViewData(updated)

/// <summary>

/// 리스트 뷰 데이터 설정하기

/// </summary>

/// <param name="updated">업데이트 여부</param>

private void SetListViewData(bool updated = false)

{

List<string> list = new List<string>();

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

{

list.Add(updated ? "Updated content " + i : "Item " + i);

}

this.listView.ItemsSource = list;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] RepositionThemeTransition 엘리먼트 : 위치 변경 테마 변환 만들기

■ RepositionThemeTransition 엘리먼트를 사용해 위치 변경 테마 변환을 만드는 방법을 보여준다. ▶ 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"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Rectangle Grid.Column="0"
                Margin="5"
                Width="75"
                Height="75"
                Fill="Red" />
            <Rectangle Name="rectangle2" Grid.Column="1"
                Margin="5"
                Width="75"
                Height="75"
                Fill="Green" />
            <Rectangle  Grid.Column="2"
                Margin="5"
                Width="75"
                Height="75"
                Fill="Blue">
                <Rectangle.Transitions>
                    <TransitionCollection>
                        <RepositionThemeTransition />
                    </TransitionCollection>
                </Rectangle.Transitions>
            </Rectangle>
        </Grid>
        <Button Name="repositionButton" Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Padding="10"
            Content="Reposition" />
    </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 Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Grid.Column="0"

Margin="5"

Width="75"

Height="75"

Fill="Red" />

<Rectangle Name="rectangle2" Grid.Column="1"

Margin="5"

Width="75"

Height="75"

Fill="Green" />

<Rectangle Grid.Column="2"

Margin="5"

Width="75"

Height="75"

Fill="Blue">

<Rectangle.Transitions>

</TransitionCollection>

</Rectangle.Transitions>

</Rectangle>

</Grid>

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

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10"

Content="Reposition" />

</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.repositionButton.Click += repositionButton_Click;
        }

        #endregion

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

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

        /// <summary>
        /// Reposition 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void repositionButton_Click(object sender, RoutedEventArgs e)
        {
            this.rectangle2.Visibility = this.rectangle2.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
        }

        #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.repositionButton.Click += repositionButton_Click;

}

#endregion

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

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

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

/// <summary>

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

/// </summary>

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

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

private void repositionButton_Click(object sender, RoutedEventArgs e)

{

this.rectangle2.Visibility = this.rectangle2.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] EntranceThemeTransition 엘리먼트 : IsStaggeringEnabled 속성을 사용해 진입 테마 변환 만들기

■ EntranceThemeTransition 엘리먼트의 IsStaggeringEnabled 속성을 사용해 진입 테마 변환을 만드는 방법을 보여준다. ▶ 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 Name="rectangleStackPanel" Grid.Column="0"
            Orientation="Horizontal">
            <StackPanel.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition IsStaggeringEnabled="True" />
                </TransitionCollection>
            </StackPanel.ChildrenTransitions>
            <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" />
            <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" />
            <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" />
            <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" />
            <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" />
        </StackPanel>
        <StackPanel Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Button Name="addOneButton"
                Tag="1"
                Content="Add one" />
            <Button Name="addFiveButton"
                Margin="0 10 0 0"
                Tag="5"
                Content="Add five" />
            <Button Name="clearAllButton"
                Margin="0 10 0 0"
                Content="Clear all" />
        </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 Name="rectangleStackPanel" Grid.Column="0"

Orientation="Horizontal">

<StackPanel.ChildrenTransitions>

</TransitionCollection>

</StackPanel.ChildrenTransitions>

</StackPanel>

<StackPanel Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Button Name="addOneButton"

Tag="1"

Content="Add one" />

<Button Name="addFiveButton"

Margin="0 10 0 0"

Tag="5"

Content="Add five" />

<Button Name="clearAllButton"

Margin="0 10 0 0"

Content="Clear all" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;

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

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

        #region 생성자 - MainPage()

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

            this.addOneButton.Click   += addButton_Click;
            this.addFiveButton.Click  += addButton_Click;
            this.clearAllButton.Click += clearAllButton_Click;
        }

        #endregion

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

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

        /// <summary>
        /// Add 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void addButton_Click(object sender, RoutedEventArgs e)
        {
            int value = Convert.ToInt32((sender as Button).Tag);

            for(int i = 0; i < value; i++)
            {
                Thickness thickness = new Thickness(5.0);

                this.rectangleStackPanel.Children.Add
                (
                    new Rectangle()
                    {
                        Width  = 50,
                        Height = 50,
                        Margin = thickness,
                        Fill   = new SolidColorBrush(Colors.LightBlue)
                    }
                );
            }
        }

        #endregion
        #region Clear All 버튼 클릭시 처리하기 - clearAllButton_Click(sender, e)

        /// <summary>
        /// Clear All 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void clearAllButton_Click(object sender, RoutedEventArgs e)
        {
            this.rectangleStackPanel.Children.Clear();
        }

        #endregion
    }
}

using System;

using Microsoft.UI;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

using Microsoft.UI.Xaml.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.addOneButton.Click += addButton_Click;

this.addFiveButton.Click += addButton_Click;

this.clearAllButton.Click += clearAllButton_Click;

}

#endregion

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

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

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

/// <summary>

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

/// </summary>

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

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

private void addButton_Click(object sender, RoutedEventArgs e)

{

int value = Convert.ToInt32((sender as Button).Tag);

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

{

Thickness thickness = new Thickness(5.0);

this.rectangleStackPanel.Children.Add

(

new Rectangle()

{

Width = 50,

Height = 50,

Margin = thickness,

Fill = new SolidColorBrush(Colors.LightBlue)

}

);

}

#endregion

#region Clear All 버튼 클릭시 처리하기 - clearAllButton_Click(sender, e)

/// <summary>

/// Clear All 버튼 클릭시 처리하기

/// </summary>

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

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

private void clearAllButton_Click(object sender, RoutedEventArgs e)

{

this.rectangleStackPanel.Children.Clear();

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] NavigationTransitionInfo 클래스 : 페이지간 시각적 피드백을 제공하는 페이지 전환 만들기

■ NavigationTransitionInfo 클래스의 파생 클래스들을 사용해 페이지간 시각적 피드백을 제공하는 페이지 전환을 만드는 방법을 보여준다. ▶ SimplePage1.xaml


<Page x:Class="TestProject.SamplePage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
            <Grid Grid.Row="1" Grid.Column="1"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="DarkGray" />
            <Grid Grid.Row="1" Grid.Column="2"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="1"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="2"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="DarkGray" />
            <Grid Name="sourceGrid" Grid.Row="1" Grid.RowSpan="2" Grid.Column="0"
                Margin="5"
                MinWidth="250"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <Grid Grid.Row="3" Grid.ColumnSpan="3"
                Margin="5 10">
                <TextBlock
                    Style="{ThemeResource BodyTextBlockStyle}"
                    TextWrapping="WrapWholeWords"
                    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." />
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage1"

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

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

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Grid.Row="1" Grid.Column="1"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="DarkGray" />

<Grid Grid.Row="1" Grid.Column="2"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="LightGray" />

<Grid Grid.Row="2" Grid.Column="1"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="LightGray" />

<Grid Grid.Row="2" Grid.Column="2"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="DarkGray" />

<Grid Name="sourceGrid" Grid.Row="1" Grid.RowSpan="2" Grid.Column="0"

Margin="5"

MinWidth="250"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<Grid Grid.Row="3" Grid.ColumnSpan="3"

Margin="5 10">

<TextBlock

Style="{ThemeResource BodyTextBlockStyle}"

TextWrapping="WrapWholeWords"

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." />

</Grid>

</ScrollViewer>

</Page>

▶ SimplePage1.xaml.cs


using Windows.Foundation.Metadata;

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

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 1
    /// </summary>
    public sealed partial class SamplePage1 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage1()

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

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

        /// <summary>
        /// 탐색되는 경우 처리하기
        /// </summary>
        /// <param name="e">이벤트 인자</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardConnectedAnimation");

            if(animation != null)
            {
                animation.TryStart(this.sourceGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media.Animation;

using Microsoft.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 1

/// </summary>

public sealed partial class SamplePage1 : Page

{

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

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

#region 생성자 - SamplePage1()

/// <summary>

/// 생성자

/// </summary>

public SamplePage1()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

/// <summary>

/// 탐색되는 경우 처리하기

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardConnectedAnimation");

if(animation != null)

{

animation.TryStart(this.sourceGrid);

}

#endregion

}

▶

[C#/WINUI3/.NET6] EasingFunctionBase 클래스 : 애니메이션 효과 만들기

■ EasingFunctionBase 클래스를 사용해 애니메이션 효과를 만드는 방법을 보여준다. ▶ NamedEasingFunction.cs


using Microsoft.UI.Xaml.Media.Animation;

namespace TestProject
{
    /// <summary>
    /// 명칭을 갖는 이징 함수
    /// </summary>
    public class NamedEasingFunction
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 명칭 - Name

        /// <summary>
        /// 명칭
        /// </summary>
        public string Name { get; private set; }

        #endregion
        #region 이징 함수 베이스 - EasingFunctionBase

        /// <summary>
        /// 이징 함수 베이스
        /// </summary>
        public EasingFunctionBase EasingFunctionBase { get; private set; }

        #endregion

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

        #region 생성자 - NamedEasingFunction(name, easingFunctionBase)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="name">명칭</param>
        /// <param name="easingFunctionBase">이징 함수 베이스</param>
        public NamedEasingFunction(string name, EasingFunctionBase easingFunctionBase)
        {
            Name               = name;
            EasingFunctionBase = easingFunctionBase;
        }

        #endregion
    }
}

using Microsoft.UI.Xaml.Media.Animation;

namespace TestProject

{

/// <summary>

/// 명칭을 갖는 이징 함수

/// </summary>

public class NamedEasingFunction

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name { get; private set; }

#endregion

#region 이징 함수 베이스 - EasingFunctionBase

/// <summary>

/// 이징 함수 베이스

/// </summary>

public EasingFunctionBase EasingFunctionBase { get; private set; }

#endregion

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

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

#region 생성자 - NamedEasingFunction(name, easingFunctionBase)

/// <summary>

/// 생성자

/// </summary>

/// <param name="name">명칭</param>

/// <param name="easingFunctionBase">이징 함수 베이스</param>

public NamedEasingFunction(string name, EasingFunctionBase easingFunctionBase)

{

Name = name;

EasingFunctionBase = easingFunctionBase;

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <StackPanel Margin="10">
        <Grid>
            <Grid.Resources>
                <Storyboard x:Name="storyboard1">
                    <DoubleAnimation
                        Storyboard.TargetName="translationTransform1"
                        Storyboard.TargetProperty="X"
                        Duration="00:00:00.5">
                        <DoubleAnimation.EasingFunction>
                            <CircleEase EasingMode="EaseInOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Button Name="animateButton1"
                Content="Animate" />
            <Rectangle Grid.Column="1"
                HorizontalAlignment="Left"
                Margin="10 0 0 0"
                Width="50"
                Height="50"
                Fill="{ThemeResource SystemAccentColor}">
                <Rectangle.RenderTransform>
                    <TranslateTransform x:Name="translationTransform1" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>
        <Grid Margin="0 30 0 0">
            <Grid.Resources>
                <Storyboard x:Name="storyboard2">
                    <DoubleAnimation
                        Storyboard.TargetName="translateTransform2"
                        Storyboard.TargetProperty="X"
                        Duration="00:00:00.15">
                        <DoubleAnimation.EasingFunction>
                            <ExponentialEase
                                Exponent="4.5"
                                EasingMode="EaseIn" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Button Name="animateButton2"
                Content="Animate" />
            <Rectangle Grid.Column="1"
                HorizontalAlignment="Left"
                Margin="10 0 0 0"
                Width="50"
                Height="50"
                Fill="{ThemeResource SystemAccentColor}">
                <Rectangle.RenderTransform>
                    <TranslateTransform x:Name="translateTransform2" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>
        <Grid Margin="0 30 0 0">
            <Grid.Resources>
                <Storyboard x:Name="storyboard3">
                    <DoubleAnimation
                        Storyboard.TargetName="translateTransform3"
                        Storyboard.TargetProperty="X"
                        Duration="00:00:00.3">
                        <DoubleAnimation.EasingFunction>
                            <ExponentialEase
                                Exponent="7"
                                EasingMode="EaseOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Button Name="animateButton3"
                Content="Animate" />
            <Rectangle Grid.Column="1"
                HorizontalAlignment="Left"
                Margin="10 0 0 0"
                Width="50"
                Height="50"
                Fill="{ThemeResource SystemAccentColor}">
                <Rectangle.RenderTransform>
                    <TranslateTransform x:Name="translateTransform3" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>
        <Grid>
            <Grid.Resources>
                <Storyboard x:Name="storyboard4">
                    <DoubleAnimation
                        Storyboard.TargetName="translateTransform4"
                        Storyboard.TargetProperty="X"
                        Duration="00:00:00.5" />
                </Storyboard>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Name="animateButton4" Grid.Column="0"
                Content="Animate" />
            <Rectangle Grid.Column="1"
                HorizontalAlignment="Left"
                Margin="10 0 0 0"
                Width="50"
                Height="50"
                Fill="{ThemeResource SystemAccentColor}">
                <Rectangle.RenderTransform>
                    <TranslateTransform x:Name="translateTransform4" />
                </Rectangle.RenderTransform>
            </Rectangle>
            <StackPanel Grid.Column="2">
                <ComboBox Name="easingComboBox"
                    DisplayMemberPath="Name"
                    SelectedValuePath="EasingFunctionBase"
                    ItemsSource="{x:Bind NamedEasingFunctionList}" />
                <RadioButtons>
                    <RadioButton Name="easeOutRadioButton"
                        Content="EaseOut"
                        IsChecked="True" />
                    <RadioButton Name="easeInRadioButton"
                        Content="EaseIn" />
                    <RadioButton Name="easeInOutRadioButton"
                        Content="EaseInOut" />
                </RadioButtons>
            </StackPanel>
        </Grid>
    </StackPanel>
</Window>

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

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<Grid>

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="translationTransform1"

Storyboard.TargetProperty="X"

Duration="00:00:00.5">

<DoubleAnimation.EasingFunction>

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button Name="animateButton1"

Content="Animate" />

<Rectangle Grid.Column="1"

HorizontalAlignment="Left"

Margin="10 0 0 0"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

</Grid>

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="translateTransform2"

Storyboard.TargetProperty="X"

Duration="00:00:00.15">

<DoubleAnimation.EasingFunction>

<ExponentialEase

Exponent="4.5"

EasingMode="EaseIn" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button Name="animateButton2"

Content="Animate" />

<Rectangle Grid.Column="1"

HorizontalAlignment="Left"

Margin="10 0 0 0"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

</Grid>

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="translateTransform3"

Storyboard.TargetProperty="X"

Duration="00:00:00.3">

<DoubleAnimation.EasingFunction>

<ExponentialEase

Exponent="7"

EasingMode="EaseOut" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button Name="animateButton3"

Content="Animate" />

<Rectangle Grid.Column="1"

HorizontalAlignment="Left"

Margin="10 0 0 0"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

</Grid>

<Grid>

<Grid.Resources>

<DoubleAnimation

Storyboard.TargetName="translateTransform4"

Storyboard.TargetProperty="X"

Duration="00:00:00.5" />

</Storyboard>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button Name="animateButton4" Grid.Column="0"

Content="Animate" />

<Rectangle Grid.Column="1"

HorizontalAlignment="Left"

Margin="10 0 0 0"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

<ComboBox Name="easingComboBox"

DisplayMemberPath="Name"

SelectedValuePath="EasingFunctionBase"

ItemsSource="{x:Bind NamedEasingFunctionList}" />

<RadioButton Name="easeOutRadioButton"

Content="EaseOut"

IsChecked="True" />

<RadioButton Name="easeInRadioButton"

Content="EaseIn" />

<RadioButton Name="easeInOutRadioButton"

Content="EaseInOut" />

</RadioButtons>

</StackPanel>

</Grid>

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System.Collections.Generic;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Media.Animation;

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

        #region Field

        /// <summary>
        /// 명칭을 갖는 이징 함수 리스트
        /// </summary>
        public List<NamedEasingFunction> NamedEasingFunctionList { get; } = new List<NamedEasingFunction>()
        {
            new NamedEasingFunction("BackEase"       , new BackEase()       ),
            new NamedEasingFunction("BounceEase"     , new BounceEase()     ),
            new NamedEasingFunction("CircleEase"     , new CircleEase()     ),
            new NamedEasingFunction("CubicEase"      , new CubicEase()      ),
            new NamedEasingFunction("ElasticEase"    , new ElasticEase()    ),
            new NamedEasingFunction("ExponentialEase", new ExponentialEase()),
            new NamedEasingFunction("PowerEase"      , new PowerEase()      ),
            new NamedEasingFunction("QuadraticEase"  , new QuadraticEase()  ),
            new NamedEasingFunction("QuarticEase"    , new QuarticEase()    ),
            new NamedEasingFunction("QuinticEase"    , new QuinticEase()    ),
            new NamedEasingFunction("SineEase"       , new SineEase()       )
        };

        #endregion

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

        #region 생성자 - MainWindow()

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

            this.animateButton1.Click  += animateButton1_Click;
            this.animateButton2.Click  += animateButton2_Click;
            this.animateButton3.Click  += animateButton3_Click;
            this.animateButton4.Click  += animateButton4_Click;
            this.easingComboBox.Loaded += easingComboBox_Loaded;
        }

        #endregion

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

        #region Animate 버튼 1 클릭시 처리하기 - animateButton1_Click(sender, e)

        /// <summary>
        /// Animate 버튼 1 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void animateButton1_Click(object sender, RoutedEventArgs e)
        {
            this.storyboard1.Children[0].SetValue(DoubleAnimation.FromProperty, this.translationTransform1.X              );
            this.storyboard1.Children[0].SetValue(DoubleAnimation.ToProperty  , this.translationTransform1.X > 0 ? 0 : 200);

            this.storyboard1.Begin();
        }

        #endregion
        #region Animate 버튼 2 클릭시 처리하기 - animateButton2_Click(sender, e)

        /// <summary>
        /// Animate 버튼 2 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void animateButton2_Click(object sender, RoutedEventArgs e)
        {
            this.storyboard2.Children[0].SetValue(DoubleAnimation.FromProperty, this.translateTransform2.X              );
            this.storyboard2.Children[0].SetValue(DoubleAnimation.ToProperty  , this.translateTransform2.X > 0 ? 0 : 200);

            this.storyboard2.Begin();
        }

        #endregion
        #region Animate 버튼 3 클릭시 처리하기 - animateButton3_Click(sender, e)

        /// <summary>
        /// Animate 버튼 3 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void animateButton3_Click(object sender, RoutedEventArgs e)
        {
            this.storyboard3.Children[0].SetValue(DoubleAnimation.FromProperty, this.translateTransform3.X              );
            this.storyboard3.Children[0].SetValue(DoubleAnimation.ToProperty  , this.translateTransform3.X > 0 ? 0 : 200);

            this.storyboard3.Begin();
        }

        #endregion
        #region Animate 버튼 4 클릭시 처리하기 - animateButton4_Click(sender, e)

        /// <summary>
        /// Animate 버튼 4 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void animateButton4_Click(object sender, RoutedEventArgs e)
        {
            EasingFunctionBase easingFunctionBase = this.easingComboBox.SelectedValue as EasingFunctionBase;

            easingFunctionBase.EasingMode = GetEasingMode();

            (this.storyboard4.Children[0] as DoubleAnimation).EasingFunction = easingFunctionBase;

            this.storyboard4.Children[0].SetValue(DoubleAnimation.FromProperty, this.translateTransform4.X              );
            this.storyboard4.Children[0].SetValue(DoubleAnimation.ToProperty  , this.translateTransform4.X > 0 ? 0 : 200);

            this.storyboard4.Begin();
        }

        #endregion
        #region 이징 콤보 박스 로드시 처리하기 - easingComboBox_Loaded(sender, e)

        /// <summary>
        /// 이징 콤보 박스 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void easingComboBox_Loaded(object sender, RoutedEventArgs e)
        {
            this.easingComboBox.SelectedIndex = 0;
        }

        #endregion

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

        #region 이징 모드 구하기 - GetEasingMode()

        /// <summary>
        /// 이징 모드 구하기
        /// </summary>
        /// <returns>이징 모드</returns>
        private EasingMode GetEasingMode()
        {
            if(this.easeOutRadioButton.IsChecked == true)
            {
                return EasingMode.EaseOut;
            }
            else if(this.easeInRadioButton.IsChecked == true)
            {
                return EasingMode.EaseIn;
            }
            else
            {
                return EasingMode.EaseInOut;
            }
        }

        #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

using System.Collections.Generic;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Media.Animation;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region Field

/// <summary>

/// 명칭을 갖는 이징 함수 리스트

/// </summary>

public List<NamedEasingFunction> NamedEasingFunctionList { get; } = new List<NamedEasingFunction>()

{

new NamedEasingFunction("BackEase" , new BackEase() ),

new NamedEasingFunction("BounceEase" , new BounceEase() ),

new NamedEasingFunction("CircleEase" , new CircleEase() ),

new NamedEasingFunction("CubicEase" , new CubicEase() ),

new NamedEasingFunction("ElasticEase" , new ElasticEase() ),

new NamedEasingFunction("ExponentialEase", new ExponentialEase()),

new NamedEasingFunction("PowerEase" , new PowerEase() ),

new NamedEasingFunction("QuadraticEase" , new QuadraticEase() ),

new NamedEasingFunction("QuarticEase" , new QuarticEase() ),

new NamedEasingFunction("QuinticEase" , new QuinticEase() ),

new NamedEasingFunction("SineEase" , new SineEase() )

};

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.animateButton1.Click += animateButton1_Click;

this.animateButton2.Click += animateButton2_Click;

this.animateButton3.Click += animateButton3_Click;

this.animateButton4.Click += animateButton4_Click;

this.easingComboBox.Loaded += easingComboBox_Loaded;

}

#endregion

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

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

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

#region Animate 버튼 1 클릭시 처리하기 - animateButton1_Click(sender, e)

/// <summary>

/// Animate 버튼 1 클릭시 처리하기

/// </summary>

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

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

private void animateButton1_Click(object sender, RoutedEventArgs e)

{

this.storyboard1.Children[0].SetValue(DoubleAnimation.FromProperty, this.translationTransform1.X );

this.storyboard1.Children[0].SetValue(DoubleAnimation.ToProperty , this.translationTransform1.X > 0 ? 0 : 200);

this.storyboard1.Begin();

}

#endregion

#region Animate 버튼 2 클릭시 처리하기 - animateButton2_Click(sender, e)

/// <summary>

/// Animate 버튼 2 클릭시 처리하기

/// </summary>

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

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

private void animateButton2_Click(object sender, RoutedEventArgs e)

{

this.storyboard2.Children[0].SetValue(DoubleAnimation.FromProperty, this.translateTransform2.X );

this.storyboard2.Children[0].SetValue(DoubleAnimation.ToProperty , this.translateTransform2.X > 0 ? 0 : 200);

this.storyboard2.Begin();

}

#endregion

#region Animate 버튼 3 클릭시 처리하기 - animateButton3_Click(sender, e)

/// <summary>

/// Animate 버튼 3 클릭시 처리하기

/// </summary>

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

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

private void animateButton3_Click(object sender, RoutedEventArgs e)

{

this.storyboard3.Children[0].SetValue(DoubleAnimation.FromProperty, this.translateTransform3.X );

this.storyboard3.Children[0].SetValue(DoubleAnimation.ToProperty , this.translateTransform3.X > 0 ? 0 : 200);

this.storyboard3.Begin();

}

#endregion

#region Animate 버튼 4 클릭시 처리하기 - animateButton4_Click(sender, e)

/// <summary>

/// Animate 버튼 4 클릭시 처리하기

/// </summary>

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

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

private void animateButton4_Click(object sender, RoutedEventArgs e)

{

EasingFunctionBase easingFunctionBase = this.easingComboBox.SelectedValue as EasingFunctionBase;

easingFunctionBase.EasingMode = GetEasingMode();

(this.storyboard4.Children[0] as DoubleAnimation).EasingFunction = easingFunctionBase;

this.storyboard4.Children[0].SetValue(DoubleAnimation.FromProperty, this.translateTransform4.X );

this.storyboard4.Children[0].SetValue(DoubleAnimation.ToProperty , this.translateTransform4.X > 0 ? 0 : 200);

this.storyboard4.Begin();

}

#endregion

#region 이징 콤보 박스 로드시 처리하기 - easingComboBox_Loaded(sender, e)

/// <summary>

/// 이징 콤보 박스 로드시 처리하기

/// </summary>

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

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

private void easingComboBox_Loaded(object sender, RoutedEventArgs e)

{

this.easingComboBox.SelectedIndex = 0;

}

#endregion

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

#region 이징 모드 구하기 - GetEasingMode()

/// <summary>

/// 이징 모드 구하기

/// </summary>

/// <returns>이징 모드</returns>

private EasingMode GetEasingMode()

{

if(this.easeOutRadioButton.IsChecked == true)

{

return EasingMode.EaseOut;

}

else if(this.easeInRadioButton.IsChecked == true)

{

return EasingMode.EaseIn;

}

else

{

return EasingMode.EaseInOut;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] ConnectedAnimation 클래스 : 연결 애니메이션 구성 사용하기

■ ConnectedAnimation 클래스에서 연결 애니메이션 구성을 사용하는 방법을 보여준다. ▶ SimplePage1.xaml


<Page x:Class="TestProject.SamplePage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
            <Grid Grid.Row="1" Grid.Column="1"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="DarkGray" />
            <Grid Grid.Row="1" Grid.Column="2"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="1"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="2"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="DarkGray" />
            <Grid Name="sourceGrid" Grid.Row="1" Grid.RowSpan="2" Grid.Column="0"
                Margin="5"
                MinWidth="250"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <Grid Grid.Row="3" Grid.ColumnSpan="3"
                Margin="5 10">
                <TextBlock
                    Style="{ThemeResource BodyTextBlockStyle}"
                    TextWrapping="WrapWholeWords"
                    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." />
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage1"

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

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

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Grid.Row="1" Grid.Column="1"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="DarkGray" />

<Grid Grid.Row="1" Grid.Column="2"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="LightGray" />

<Grid Grid.Row="2" Grid.Column="1"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="LightGray" />

<Grid Grid.Row="2" Grid.Column="2"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="DarkGray" />

<Grid Name="sourceGrid" Grid.Row="1" Grid.RowSpan="2" Grid.Column="0"

Margin="5"

MinWidth="250"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<Grid Grid.Row="3" Grid.ColumnSpan="3"

Margin="5 10">

<TextBlock

Style="{ThemeResource BodyTextBlockStyle}"

TextWrapping="WrapWholeWords"

</Grid>

</ScrollViewer>

</Page>

▶ SimplePage1.xaml.cs


using Windows.Foundation.Metadata;

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

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 1
    /// </summary>
    public sealed partial class SamplePage1 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage1()

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

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

        /// <summary>
        /// 탐색되는 경우 처리하기
        /// </summary>
        /// <param name="e">이벤트 인자</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardConnectedAnimation");

            if(animation != null)
            {
                animation.TryStart(this.sourceGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media.Animation;

using Microsoft.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 1

/// </summary>

public sealed partial class SamplePage1 : Page

{

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

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

#region 생성자 - SamplePage1()

/// <summary>

/// 생성자

/// </summary>

public SamplePage1()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

/// <summary>

/// 탐색되는 경우 처리하기

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardConnectedAnimation");

if(animation != null)

{

animation.TryStart(this.sourceGrid);

}

#endregion

}

▶ SimplePage2.xaml


<Page x:Class="TestProject.SamplePage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"
                VerticalAlignment="Top"
                Margin="10"
                Width="150"
                Height="200"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"
                Margin="10"
                MinHeight="200">
                <TextBlock
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Margin="0 0 0 10"
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
                <TextBlock
                    TextWrapping="WrapWholeWords"
                    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." />
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage2"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"

VerticalAlignment="Top"

Margin="10"

Width="150"

Height="200"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"

Margin="10"

MinHeight="200">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

Margin="0 0 0 10"

TextWrapping="WrapWholeWords"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

<TextBlock

TextWrapping="WrapWholeWords"

</StackPanel>

</Grid>

</ScrollViewer>

</Page>

▶ SimplePage2.xaml.cs


using Windows.Foundation.Metadata;

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

namespace TestProject
{
    /// <summary>
    /// 생성자
    /// </summary>
    public sealed partial class SamplePage2 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage2()

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

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardConnectedAnimation", this.targetGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

        /// <summary>
        /// 탐색되는 경우 처리하기
        /// </summary>
        /// <param name="e">이벤트 인자</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardConnectedAnimation");

            if(animation != null)
            {
                this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };

                animation.TryStart(this.targetGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media.Animation;

using Microsoft.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 생성자

/// </summary>

public sealed partial class SamplePage2 : Page

{

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

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

#region 생성자 - SamplePage2()

/// <summary>

/// 생성자

/// </summary>

public SamplePage2()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardConnectedAnimation", this.targetGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

/// <summary>

/// 탐색되는 경우 처리하기

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardConnectedAnimation");

if(animation != null)

{

this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };

animation.TryStart(this.targetGrid);

}

#endregion

}

▶

[C#/WINUI3/.NET6] ConnectedAnimation 클래스 : 동일 페이지에서 연결 애니메이션 만들기

■ ConnectedAnimation 클래스를 사용해 동일 페이지에서 연결 애니메이션을 만드는 방법을 보여준다. ▶ CardPage.xaml


<Page x:Class="TestProject.CardPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Margin="10"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <GridView Name="gridView"
            IsItemClickEnabled="True">
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem" BasedOn="{StaticResource GridViewItemRevealStyle}">
                    <Style.Setters>
                        <Setter Property="Margin" Value="10" />
                    </Style.Setters>
                </Style>
            </GridView.ItemContainerStyle>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Name="itemGrid"
                        Width="190"
                        Height="250">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*"    />
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Height="100"
                            Background="{ThemeResource SystemAccentColor}">
                            <TextBlock
                                Style="{ThemeResource TitleTextBlockStyle}"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="Item" />
                        </Grid>
                        <Grid Grid.Row="1"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">
                            <TextBlock
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Margin="10"
                                Text="{Binding}" />
                        </Grid>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
        <Grid x:Name="smokeGrid"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Visibility="Collapsed">
            <Grid.Background>
                <SolidColorBrush
                    Color="{ThemeResource SystemChromeAltHighColor}"
                    Opacity="0.8" />
            </Grid.Background>
            <Grid Name="targetGrid"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="320"
                Height="400"
                BorderThickness="1"
                BorderBrush="{ThemeResource SystemAccentColor}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*"    />
                </Grid.RowDefinitions>
                <Grid Grid.Row="0"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Height="170"
                    Background="{ThemeResource SystemAccentColor}">
                    <TextBlock
                        Style="{ThemeResource HeaderTextBlockStyle}"
                        VerticalAlignment="Center"
                        Margin="10"
                        Text="Header" />
                    <Button Name="backButton"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Top"
                        Margin="5"
                        Width="40"
                        Height="40"
                        ToolTipService.ToolTip="Close">
                        <Button.Content>
                            <SymbolIcon Symbol="Clear" />
                        </Button.Content>
                    </Button>
                </Grid>
                <Grid Grid.Row="1"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">
                    <TextBlock
                        Style="{ThemeResource BaseTextBlockStyle}"
                        Margin="10"
                        Text="Content" />
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</Page>

100

101

102

103

104

105

<Page x:Class="TestProject.CardPage"

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

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

<Grid Margin="10"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<GridView Name="gridView"

IsItemClickEnabled="True">

<GridView.ItemContainerStyle>

<Style.Setters>

</Style.Setters>

</Style>

</GridView.ItemContainerStyle>

<GridView.ItemTemplate>

<Grid Name="itemGrid"

Width="190"

Height="250">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Grid.Row="0"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Height="100"

Background="{ThemeResource SystemAccentColor}">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Text="Item" />

</Grid>

<Grid Grid.Row="1"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="10"

Text="{Binding}" />

</Grid>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

<Grid x:Name="smokeGrid"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Visibility="Collapsed">

<Grid.Background>

<SolidColorBrush

Color="{ThemeResource SystemChromeAltHighColor}"

Opacity="0.8" />

</Grid.Background>

<Grid Name="targetGrid"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="320"

Height="400"

BorderThickness="1"

BorderBrush="{ThemeResource SystemAccentColor}">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Grid.Row="0"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Height="170"

Background="{ThemeResource SystemAccentColor}">

<TextBlock

Style="{ThemeResource HeaderTextBlockStyle}"

VerticalAlignment="Center"

Margin="10"

Text="Header" />

<Button Name="backButton"

HorizontalAlignment="Right"

VerticalAlignment="Top"

Margin="5"

Width="40"

Height="40"

ToolTipService.ToolTip="Close">

<Button.Content>

</Button.Content>

</Button>

</Grid>

<Grid Grid.Row="1"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">

<TextBlock

Style="{ThemeResource BaseTextBlockStyle}"

Margin="10"

Text="Content" />

</Grid>

</Page>

▶ CardPage.xaml.cs


using System;
using System.Collections.Generic;

using Windows.Foundation.Metadata;

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

namespace TestProject
{
    /// <summary>
    /// 카드 페이지
    /// </summary>
    public sealed partial class CardPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 저장 항목
        /// </summary>
        private int storedItem;

        #endregion

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

        #region 생성자 - CardPage()

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

            List<int> itemList = new List<int>();

            for(int i = 0; i < 30; i++)
            {
                itemList.Add(i);
            }

            this.gridView.ItemsSource = itemList;

            this.gridView.ItemClick += gridView_ItemClick;
            this.backButton.Click   += backButton_Click;
        }

        #endregion

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

        #region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

        /// <summary>
        /// 그리드 뷰 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void gridView_ItemClick(object sender, ItemClickEventArgs e)
        {
            ConnectedAnimation animation = null;

            if(this.gridView.ContainerFromItem(e.ClickedItem) is GridViewItem gridViewItem)
            {
                this.storedItem = Convert.ToInt32(gridViewItem.Content);

                animation = this.gridView.PrepareConnectedAnimation("forwardAnimation", this.storedItem, "itemGrid");
            }

            this.smokeGrid.Visibility = Visibility.Visible;

            animation.TryStart(this.targetGrid);
        }

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

        /// <summary>
        /// Back 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private async void backButton_Click(object sender, RoutedEventArgs e)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("backwardsAnimation", this.targetGrid);

            this.smokeGrid.Children.Remove(targetGrid);

            animation.Completed += animation_Completed;

            this.gridView.ScrollIntoView(this.storedItem, ScrollIntoViewAlignment.Default);

            this.gridView.UpdateLayout();

            if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = new DirectConnectedAnimationConfiguration();
            }

            await this.gridView.TryStartConnectedAnimationAsync(animation, this.storedItem, "itemGrid");
        }

        #endregion
        #region 애니메이션 완료시 처리하기 - animation_Completed(sender, e)

        /// <summary>
        /// 애니메이션 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void animation_Completed(ConnectedAnimation sender, object e)
        {
            this.smokeGrid.Visibility = Visibility.Collapsed;

            this.smokeGrid.Children.Add(this.targetGrid);
        }

        #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

using System;

using System.Collections.Generic;

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media.Animation;

namespace TestProject

{

/// <summary>

/// 카드 페이지

/// </summary>

public sealed partial class CardPage : Page

{

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

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

#region Field

/// <summary>

/// 저장 항목

/// </summary>

private int storedItem;

#endregion

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

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

#region 생성자 - CardPage()

/// <summary>

/// 생성자

/// </summary>

public CardPage()

{

InitializeComponent();

List<int> itemList = new List<int>();

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

{

itemList.Add(i);

}

this.gridView.ItemsSource = itemList;

this.gridView.ItemClick += gridView_ItemClick;

this.backButton.Click += backButton_Click;

}

#endregion

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

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

#region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

/// <summary>

/// 그리드 뷰 항목 클릭시 처리하기

/// </summary>

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

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

private void gridView_ItemClick(object sender, ItemClickEventArgs e)

{

ConnectedAnimation animation = null;

if(this.gridView.ContainerFromItem(e.ClickedItem) is GridViewItem gridViewItem)

{

this.storedItem = Convert.ToInt32(gridViewItem.Content);

animation = this.gridView.PrepareConnectedAnimation("forwardAnimation", this.storedItem, "itemGrid");

}

this.smokeGrid.Visibility = Visibility.Visible;

animation.TryStart(this.targetGrid);

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private async void backButton_Click(object sender, RoutedEventArgs e)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("backwardsAnimation", this.targetGrid);

this.smokeGrid.Children.Remove(targetGrid);

animation.Completed += animation_Completed;

this.gridView.ScrollIntoView(this.storedItem, ScrollIntoViewAlignment.Default);

this.gridView.UpdateLayout();

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

{

animation.Configuration = new DirectConnectedAnimationConfiguration();

}

await this.gridView.TryStartConnectedAnimationAsync(animation, this.storedItem, "itemGrid");

}

#endregion

#region 애니메이션 완료시 처리하기 - animation_Completed(sender, e)

/// <summary>

/// 애니메이션 완료시 처리하기

/// </summary>

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

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

private void animation_Completed(ConnectedAnimation sender, object e)

{

this.smokeGrid.Visibility = Visibility.Collapsed;

this.smokeGrid.Children.Add(this.targetGrid);

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <Frame Name="frame" />
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

</Window>

▶ MainWindow.xaml.cs

[C#/WINUI3/.NET6] ConnectedAnimation 클래스 : 연결 애니메이션 만들기

■ ConnectedAnimation 클래스를 사용해 연결 애니메이션을 만드는 방법을 보여준다. ▶ CustomDataObject.cs


using System;
using System.Collections.Generic;

namespace TestProject
{
    /// <summary>
    /// 커스텀 데이터 객체
    /// </summary>
    public class CustomDataObject
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 제목 - Title

        /// <summary>
        /// 제목
        /// </summary>
        public string Title { get; set; }

        #endregion
        #region 이미지 위치 - ImageLocation

        /// <summary>
        /// 이미지 위치
        /// </summary>
        public string ImageLocation { get; set; }

        #endregion
        #region 조회 수 - Views

        /// <summary>
        /// 조회 수
        /// </summary>
        public string Views { get; set; }

        #endregion
        #region 좋아요 수 - Likes

        /// <summary>
        /// 좋아요 수
        /// </summary>
        public string Likes { get; set; }

        #endregion
        #region 설명 - Description

        /// <summary>
        /// 설명
        /// </summary>
        public string Description { get; set; }

        #endregion

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

        #region 생성자 - CustomDataObject()

        /// <summary>
        /// 생성자
        /// </summary>
        public CustomDataObject()
        {
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 커스텀 데이터 객체 리스트 구하기 - GetCustomDataObjectList(includeAllItems)

        /// <summary>
        /// 커스텀 데이터 객체 리스트 구하기
        /// </summary>
        /// <param name="includeAllItems">모든 항목 포함 여부</param>
        /// <returns>커스텀 데이터 객체 리스트</returns>
        public static List<CustomDataObject> GetCustomDataObjectList(bool includeAllItems = false)
        {
            string[] descriptionArray = new string[]
            {
                @"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus. Integer dictum accumsan pulvinar. Pellentesque eget enim sodales sapien vestibulum consequat.",
                @"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",
                @"Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris. Pellentesque quis turpis non nunc pretium sagittis. Nulla facilisi. Maecenas eu lectus ante. Proin eleifend vel lectus non tincidunt. Fusce condimentum luctus nisi, in elementum ante tincidunt nec.",
                @"Aenean in nisl at elit venenatis blandit ut vitae lectus. Praesent in sollicitudin nunc. Pellentesque justo augue, pretium at sem lacinia, scelerisque semper erat. Ut cursus tortor at metus lacinia dapibus.",
                @"Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.",
                @"Proin malesuada, libero vitae aliquam venenatis, diam est faucibus felis, vitae efficitur erat nunc non mauris. Suspendisse at sodales erat.",
                @"Aenean vulputate, turpis non tincidunt ornare, metus est sagittis erat, id lobortis orci odio eget quam. Suspendisse ex purus, lobortis quis suscipit a, volutpat vitae turpis.",
                @"Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc. Donec vitae risus ut ante pretium semper. Phasellus consectetur volutpat orci, eu dapibus turpis. Fusce varius sapien eu mattis pharetra.",
            };

            Random random = new Random();

            int imageLocationCount = includeAllItems ? 13 : 8;

            List<CustomDataObject> customDataObjectList = new List<CustomDataObject>();

            for(int i = 0; i < imageLocationCount; i++)
            {
                customDataObjectList.Add
                (
                    new CustomDataObject()
                    {
                        Title         = $"Item {i + 1:D2}",
                        ImageLocation = $"/IMAGE/LandscapeImage{i + 1:D2}.jpg",
                        Views         = random.Next(100, 999).ToString(),
                        Likes         = random.Next(10, 99).ToString(),
                        Description   = descriptionArray[i % descriptionArray.Length],
                    }
                );
            }

            return customDataObjectList;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

using System;

using System.Collections.Generic;

namespace TestProject

{

/// <summary>

/// 커스텀 데이터 객체

/// </summary>

public class CustomDataObject

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; set; }

#endregion

#region 이미지 위치 - ImageLocation

/// <summary>

/// 이미지 위치

/// </summary>

public string ImageLocation { get; set; }

#endregion

#region 조회 수 - Views

/// <summary>

/// 조회 수

/// </summary>

public string Views { get; set; }

#endregion

#region 좋아요 수 - Likes

/// <summary>

/// 좋아요 수

/// </summary>

public string Likes { get; set; }

#endregion

#region 설명 - Description

/// <summary>

/// 설명

/// </summary>

public string Description { get; set; }

#endregion

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

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

#region 생성자 - CustomDataObject()

/// <summary>

/// 생성자

/// </summary>

public CustomDataObject()

{

}

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 커스텀 데이터 객체 리스트 구하기 - GetCustomDataObjectList(includeAllItems)

/// <summary>

/// 커스텀 데이터 객체 리스트 구하기

/// </summary>

/// <param name="includeAllItems">모든 항목 포함 여부</param>

/// <returns>커스텀 데이터 객체 리스트</returns>

public static List<CustomDataObject> GetCustomDataObjectList(bool includeAllItems = false)

{

string[] descriptionArray = new string[]

{

@"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus. Integer dictum accumsan pulvinar. Pellentesque eget enim sodales sapien vestibulum consequat.",

@"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",

@"Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris. Pellentesque quis turpis non nunc pretium sagittis. Nulla facilisi. Maecenas eu lectus ante. Proin eleifend vel lectus non tincidunt. Fusce condimentum luctus nisi, in elementum ante tincidunt nec.",

@"Aenean in nisl at elit venenatis blandit ut vitae lectus. Praesent in sollicitudin nunc. Pellentesque justo augue, pretium at sem lacinia, scelerisque semper erat. Ut cursus tortor at metus lacinia dapibus.",

@"Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.",

@"Proin malesuada, libero vitae aliquam venenatis, diam est faucibus felis, vitae efficitur erat nunc non mauris. Suspendisse at sodales erat.",

@"Aenean vulputate, turpis non tincidunt ornare, metus est sagittis erat, id lobortis orci odio eget quam. Suspendisse ex purus, lobortis quis suscipit a, volutpat vitae turpis.",

@"Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc. Donec vitae risus ut ante pretium semper. Phasellus consectetur volutpat orci, eu dapibus turpis. Fusce varius sapien eu mattis pharetra.",

};

Random random = new Random();

int imageLocationCount = includeAllItems ? 13 : 8;

List<CustomDataObject> customDataObjectList = new List<CustomDataObject>();

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

{

customDataObjectList.Add

(

new CustomDataObject()

{

Title = $"Item {i + 1:D2}",

ImageLocation = $"/IMAGE/LandscapeImage{i + 1:D2}.jpg",

Views = random.Next(100, 999).ToString(),

Likes = random.Next(10, 99).ToString(),

Description = descriptionArray[i % descriptionArray.Length],

}

);

}

return customDataObjectList;

}

#endregion

}

▶ CollectionPage.xaml


<Page x:Class="TestProject.CollectionPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        Margin="10"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView Name="listView"
            IsItemClickEnabled="True"
            SelectionMode="None">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:CustomDataObject">
                    <Grid Margin="0 10 0 10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" MinWidth="150" />
                            <ColumnDefinition Width="*"                   />
                        </Grid.ColumnDefinitions>
                        <Image Name="image" Grid.Column="0"
                            MaxHeight="100"
                            Stretch="Fill"
                            Source="{x:Bind ImageLocation}" />
                        <StackPanel Grid.Column="1"
                            Margin="10 0 0 0">
                            <TextBlock
                                Style="{ThemeResource SubtitleTextBlockStyle}"
                                HorizontalAlignment="Left"
                                Margin="0 0 0 5"
                                Text="{x:Bind Title}" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    FontWeight="Bold"
                                    Text="Views : " />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="5 0 0 0"
                                    Text="{x:Bind Views}" />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="10 0 0 0"
                                    FontWeight="Bold"
                                    Text="Likes : " />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="5 0 0 0"
                                    Text="{x:Bind Likes}" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Text="{x:Bind Description}"
                                    Style="{ThemeResource BodyTextBlockStyle}"
                                    FontStyle="Italic"
                                    Margin="0 10 0 0"
                                    TextTrimming="CharacterEllipsis"
                                    TextWrapping="Wrap"
                                    MaxWidth="500"
                                    MaxHeight="40"
                                    IsTextTrimmedChanged="descriptionTextBlock_IsTextTrimmedChanged" />
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

<Page x:Class="TestProject.CollectionPage"

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

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

xmlns:local="using:TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

Margin="10"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<ListView Name="listView"

IsItemClickEnabled="True"

SelectionMode="None">

<ListView.ItemTemplate>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Name="image" Grid.Column="0"

MaxHeight="100"

Stretch="Fill"

Source="{x:Bind ImageLocation}" />

<StackPanel Grid.Column="1"

Margin="10 0 0 0">

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

HorizontalAlignment="Left"

Margin="0 0 0 5"

Text="{x:Bind Title}" />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

FontWeight="Bold"

Text="Views : " />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Margin="5 0 0 0"

Text="{x:Bind Views}" />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Margin="10 0 0 0"

FontWeight="Bold"

Text="Likes : " />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Margin="5 0 0 0"

Text="{x:Bind Likes}" />

</StackPanel>

<TextBlock

Text="{x:Bind Description}"

Style="{ThemeResource BodyTextBlockStyle}"

FontStyle="Italic"

Margin="0 10 0 0"

TextTrimming="CharacterEllipsis"

TextWrapping="Wrap"

MaxWidth="500"

MaxHeight="40"

IsTextTrimmedChanged="descriptionTextBlock_IsTextTrimmedChanged" />

</StackPanel>

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</Grid>

</Page>

▶ CollectionPage.xaml.cs


using System;

using Windows.Foundation.Metadata;

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

namespace TestProject
{
    /// <summary>
    /// 컬렉션 페이지
    /// </summary>
    public sealed partial class CollectionPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 커스텀 데이터 객체
        /// </summary>
        private CustomDataObject customDataObject;

        #endregion

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

        #region 생성자 - CollectonPage()

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

            NavigationCacheMode = NavigationCacheMode.Enabled;

            this.listView.ItemsSource = CustomDataObject.GetCustomDataObjectList();

            this.listView.Loaded    += listView_Loaded;
            this.listView.ItemClick += listView_ItemClick;
        }

        #endregion

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

        #region 리스트 뷰 로드시 처리하기 - listView_Loaded(sender, e)

        /// <summary>
        /// 리스트 뷰 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private async void listView_Loaded(object sender, RoutedEventArgs e)
        {
            if(customDataObject != null)
            {
                this.listView.ScrollIntoView(this.customDataObject, ScrollIntoViewAlignment.Default);

                this.listView.UpdateLayout();

                ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackConnectedAnimation");

                if(animation != null)
                {
                    if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
                    {
                        animation.Configuration = new DirectConnectedAnimationConfiguration();
                    }

                    await this.listView.TryStartConnectedAnimationAsync(animation, customDataObject, "image");
                }

                this.listView.Focus(FocusState.Programmatic);
            }
        }

        #endregion
        #region 리스트 뷰 항목 클릭시 처리하기 - listView_ItemClick(sender, e)

        /// <summary>
        /// 리스트 뷰 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listView_ItemClick(object sender, ItemClickEventArgs e)
        {
            if(this.listView.ContainerFromItem(e.ClickedItem) is ListViewItem container)
            {
                this.customDataObject = container.Content as CustomDataObject;

                this.listView.PrepareConnectedAnimation("ForwardConnectedAnimation", this.customDataObject, "image");
            }

            Frame.Navigate(typeof(DetailPage), this.customDataObject, new SuppressNavigationTransitionInfo());
        }

        #endregion
        #region 설명 텍스트 블럭 텍스트 트리밍 변경시 처리하기 - descriptionTextBlock_IsTextTrimmedChanged(sender, e)

        /// <summary>
        /// 설명 텍스트 블럭 텍스트 트리밍 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void descriptionTextBlock_IsTextTrimmedChanged(TextBlock sender, IsTextTrimmedChangedEventArgs e)
        {
            TextBlock textBlock = sender as TextBlock;

            string text = textBlock.IsTextTrimmed ? textBlock.Text : string.Empty;

            ToolTipService.SetToolTip(textBlock, text);
        }

        #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

using System;

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media.Animation;

using Microsoft.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 컬렉션 페이지

/// </summary>

public sealed partial class CollectionPage : Page

{

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

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

#region Field

/// <summary>

/// 커스텀 데이터 객체

/// </summary>

private CustomDataObject customDataObject;

#endregion

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

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

#region 생성자 - CollectonPage()

/// <summary>

/// 생성자

/// </summary>

public CollectionPage()

{

InitializeComponent();

NavigationCacheMode = NavigationCacheMode.Enabled;

this.listView.ItemsSource = CustomDataObject.GetCustomDataObjectList();

this.listView.Loaded += listView_Loaded;

this.listView.ItemClick += listView_ItemClick;

}

#endregion

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

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

#region 리스트 뷰 로드시 처리하기 - listView_Loaded(sender, e)

/// <summary>

/// 리스트 뷰 로드시 처리하기

/// </summary>

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

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

private async void listView_Loaded(object sender, RoutedEventArgs e)

{

if(customDataObject != null)

{

this.listView.ScrollIntoView(this.customDataObject, ScrollIntoViewAlignment.Default);

this.listView.UpdateLayout();

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackConnectedAnimation");

if(animation != null)

{

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

{

animation.Configuration = new DirectConnectedAnimationConfiguration();

}

await this.listView.TryStartConnectedAnimationAsync(animation, customDataObject, "image");

}

this.listView.Focus(FocusState.Programmatic);

}

#endregion

#region 리스트 뷰 항목 클릭시 처리하기 - listView_ItemClick(sender, e)

/// <summary>

/// 리스트 뷰 항목 클릭시 처리하기

/// </summary>

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

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

private void listView_ItemClick(object sender, ItemClickEventArgs e)

{

if(this.listView.ContainerFromItem(e.ClickedItem) is ListViewItem container)

{

this.customDataObject = container.Content as CustomDataObject;

this.listView.PrepareConnectedAnimation("ForwardConnectedAnimation", this.customDataObject, "image");

}

Frame.Navigate(typeof(DetailPage), this.customDataObject, new SuppressNavigationTransitionInfo());

}

#endregion

#region 설명 텍스트 블럭 텍스트 트리밍 변경시 처리하기 - descriptionTextBlock_IsTextTrimmedChanged(sender, e)

/// <summary>

/// 설명 텍스트 블럭 텍스트 트리밍 변경시 처리하기

/// </summary>

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

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

private void descriptionTextBlock_IsTextTrimmedChanged(TextBlock sender, IsTextTrimmedChangedEventArgs e)

{

TextBlock textBlock = sender as TextBlock;

string text = textBlock.IsTextTrimmed ? textBlock.Text : string.Empty;

ToolTipService.SetToolTip(textBlock, text);

}

#endregion

}

▶ DatailPage.xaml


<Page x:Class="TestProject.DetailPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Background="{ThemeResource SystemControlAcrylicElementBrush}">
            <Button Name="goBackButton"
                Content="Go Back"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Background="{ThemeResource SystemAccentColor}" />
        </Grid>
        <Grid Grid.Row="0"
            Margin="20 50 20 20">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Image Name="detailImage"
                VerticalAlignment="Top"
                MaxHeight="350"
                Stretch="Uniform"
                Source="{x:Bind CurrentCustomDataObject.ImageLocation}" />
            <StackPanel Name="detailStackPanel" Grid.Column="1"
                VerticalAlignment="Top"
                Margin="20 0">
                <TextBlock
                    Style="{ThemeResource SubheaderTextBlockStyle}"
                    Margin="0 0 0 10"
                    Text="{x:Bind CurrentCustomDataObject.Title}" />
                <StackPanel Orientation="Horizontal">
                    <TextBlock
                        Style="{ThemeResource SubtitleTextBlockStyle}"
                        FontWeight="Bold"
                        Text="Views : " />
                    <TextBlock
                        Style="{ThemeResource SubtitleTextBlockStyle}"
                        Margin="5 0 0 0"
                        Text="{x:Bind CurrentCustomDataObject.Views}" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock
                        Style="{ThemeResource SubtitleTextBlockStyle}"
                        FontWeight="Bold"
                        Text="Likes : " />
                    <TextBlock
                        Style="{ThemeResource SubtitleTextBlockStyle}"
                        Margin="5 0 0 0"
                        Text="{x:Bind CurrentCustomDataObject.Likes}" />
                </StackPanel>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="1"
            Margin="10">
            <TextBlock
                Style="{ThemeResource SubtitleTextBlockStyle}"
                Text="{x:Bind CurrentCustomDataObject.Description}" />
        </Grid>
    </Grid>
</Page>

<Page x:Class="TestProject.DetailPage"

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

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

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Grid.Row="0"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Background="{ThemeResource SystemControlAcrylicElementBrush}">

<Button Name="goBackButton"

Content="Go Back"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Background="{ThemeResource SystemAccentColor}" />

</Grid>

<Grid Grid.Row="0"

Margin="20 50 20 20">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Name="detailImage"

VerticalAlignment="Top"

MaxHeight="350"

Stretch="Uniform"

Source="{x:Bind CurrentCustomDataObject.ImageLocation}" />

<StackPanel Name="detailStackPanel" Grid.Column="1"

VerticalAlignment="Top"

Margin="20 0">

<TextBlock

Style="{ThemeResource SubheaderTextBlockStyle}"

Margin="0 0 0 10"

Text="{x:Bind CurrentCustomDataObject.Title}" />

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

FontWeight="Bold"

Text="Views : " />

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

Margin="5 0 0 0"

Text="{x:Bind CurrentCustomDataObject.Views}" />

</StackPanel>

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

FontWeight="Bold"

Text="Likes : " />

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

Margin="5 0 0 0"

Text="{x:Bind CurrentCustomDataObject.Likes}" />

</StackPanel>

</Grid>

<Grid Grid.Row="1"

Margin="10">

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

Text="{x:Bind CurrentCustomDataObject.Description}" />

</Grid>

</Page>

▶

[C#/WINUI3/.NET6] AnimatedVisualPlayer 엘리먼트 : 로띠 애니메이션 만들기

■ AnimatedVisualPlayer 엘리먼트를 사용해 로띠 애니메이션을 만드는 방법을 보여준다. AnimatedVisualPlayer는 Adobe AfterEffects를 사용하여 생성되고 Lottie-Windows를 사용하여 Microsoft.UI.Composition 개체로 변환된 애니메이션을 사용한다. 여기에

[HTML/HTML5] canvas 엘리먼트 : setInterval 함수를 사용해 애니메이션 만들기

■ canvas 엘리먼트에서 setInterval 함수를 사용해 애니메이션을 만드는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var canvas;
            var context;
            var rainArray;
            var count = 100;

            function rain()
            {
                var xPosition;
                var yPosition;
                var speed;
                var color;
            }

            function run()
            {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

                for(var i = 0; i < this.count; i++)
                {
                    this.context.fillStyle = this.rainArray[i].color;

                    this.context.fillRect(this.rainArray[i].xPosition, this.rainArray[i].yPosition, 10, 10);

                    this.rainArray[i].yPosition += this.rainArray[i].speed;

                    if(this.rainArray[i].yPosition > this.canvas.height)
                    {
                        this.rainArray[i].yPosition = 0;
                    }
                }
            }

            function onLoad()
            {
                this.canvas  = document.getElementById('canvas');
                this.context = this.canvas.getContext('2d');

                this.rainArray = [];

                for(var i = 0; i < this.count; i++)
                {
                    var xPosition = Math.floor(Math.random() * this.canvas.width);
                    var yPosition = 0;
                    var speed = Math.random() * 2;

                    this.rainArray[i] = new rain();

                    this.rainArray[i].xPosition = xPosition;
                    this.rainArray[i].yPosition = yPosition;
                    this.rainArray[i].speed     = speed;
                    this.rainArray[i].color     = 'rgb(' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ')';
                }

                setInterval(run, 10);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

var canvas;

var context;

var rainArray;

var count = 100;

function rain()

{

var xPosition;

var yPosition;

var speed;

var color;

}

function run()

{

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

for(var i = 0; i < this.count; i++)

{

this.context.fillStyle = this.rainArray[i].color;

this.context.fillRect(this.rainArray[i].xPosition, this.rainArray[i].yPosition, 10, 10);

this.rainArray[i].yPosition += this.rainArray[i].speed;

if(this.rainArray[i].yPosition > this.canvas.height)

{

this.rainArray[i].yPosition = 0;

}

function onLoad()

{

this.canvas = document.getElementById('canvas');

this.context = this.canvas.getContext('2d');

this.rainArray = [];

for(var i = 0; i < this.count; i++)

{

var xPosition = Math.floor(Math.random() * this.canvas.width);

var yPosition = 0;

var speed = Math.random() * 2;

this.rainArray[i] = new rain();

this.rainArray[i].xPosition = xPosition;

this.rainArray[i].yPosition = yPosition;

this.rainArray[i].speed = speed;

this.rainArray[i].color = 'rgb(' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ')';

}

setInterval(run, 10);

}

</script>

</head>

</body>

</html>

[C#/WPF] CompositionTarget 클래스 : Rendering 정적 이벤트를 사용해 프레임당 간격으로 렌더링하기

■ CompositionTarget 클래스의 Rendering 정적 이벤트를 사용해 프레임당 간격으로 렌더링하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    Background="FloralWhite"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style TargetType="{x:Type Label}">
            <Setter Property="HorizontalAlignment" Value="Right"  />
            <Setter Property="Foreground"          Value="Maroon" />
        </Style>
    </Window.Resources>
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0"
            TextWrapping="Wrap">
아래 캔버스 객체 위로 마우스를 이동해 주시기 바랍니다.<LineBreak />
MouseMoveEvent 핸들러는 CompositionTarget.Rendering 핸들러에서 사용되는 좌표 값을 업데이트합니다.
캔버스의 배경색을 결정합니다. 아래 숫자는 경과 시간(초), 렌더링된 프레임 수 및 평균 프레임 속도를 보여줍니다.
        </TextBlock>
        <Grid Grid.Row="1"
            Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Label Grid.Row="0" Grid.Column="0"
                Content="경과 시간 (HH:mm:ss) :" />
            <Label Grid.Row="1" Grid.Column="0"
                Content="프레임 수 :" />
            <Label Grid.Row="2" Grid.Column="0"
                Content="평균 FPS :" />
            <Label Name="stopwatchLabel" Grid.Row="0" Grid.Column="1" />
            <Label Name="frameCounterLabel" Grid.Row="1" Grid.Column="1" />
            <Label Name="frameRateLabel" Grid.Row="2" Grid.Column="1" />
        </Grid>
        <Canvas Name="canvas" Grid.Row="2"
            Margin="0 10 0 0"/>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

Background="FloralWhite"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

</Style>

</Window.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Row="0"

TextWrapping="Wrap">

아래 캔버스 객체 위로 마우스를 이동해 주시기 바랍니다.<LineBreak />

MouseMoveEvent 핸들러는 CompositionTarget.Rendering 핸들러에서 사용되는 좌표 값을 업데이트합니다.

캔버스의 배경색을 결정합니다. 아래 숫자는 경과 시간(초), 렌더링된 프레임 수 및 평균 프레임 속도를 보여줍니다.

</TextBlock>

<Grid Grid.Row="1"

Margin="10">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Label Grid.Row="0" Grid.Column="0"

Content="경과 시간 (HH:mm:ss) :" />

<Label Grid.Row="1" Grid.Column="0"

Content="프레임 수 :" />

<Label Grid.Row="2" Grid.Column="0"

Content="평균 FPS :" />

</Grid>

<Canvas Name="canvas" Grid.Row="2"

Margin="0 10 0 0"/>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Diagnostics;
using System.Globalization;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;

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

        #region Field

        /// <summary>
        /// 스톱워치
        /// </summary>
        private readonly Stopwatch stopwatch = new Stopwatch();

        /// <summary>
        /// 프레임 카운터
        /// </summary>
        private double frameCounter;

        /// <summary>
        /// 마우스 포인트
        /// </summary>
        private Point mousePoint;

        #endregion

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

        #region 생성자 - MainWindow()

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

            CompositionTarget.Rendering += CompositionTarget_Rendering;
            canvas.MouseMove            += canvas_MouseMove;
        }

        #endregion

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

        #region 컴포지션 타켓 렌더링시 처리하기 - CompositionTarget_Rendering(sender, e)

        /// <summary>
        /// 컴포지션 타켓 렌더링시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            if(this.frameCounter++ == 0)
            {
                this.stopwatch.Start();
            }

            long frameRate = (long)(this.frameCounter / this.stopwatch.Elapsed.TotalSeconds);

            if(frameRate > 0)
            {
                this.stopwatchLabel.Content = this.stopwatch.Elapsed.ToString();

                this.frameCounterLabel.Content = this.frameCounter.ToString(CultureInfo.InvariantCulture);

                this.frameRateLabel.Content = frameRate.ToString();
            }

            byte red  = (byte)(this.mousePoint.X / 3.0);
            byte blue = (byte)(this.mousePoint.Y / 2.0);

            this.canvas.Background = new SolidColorBrush(Color.FromRgb(red, 0, blue));
        }

        #endregion
        #region 캔버스 마우스 이동시 처리하기 - canvas_MouseMove(sender, e)

        /// <summary>
        /// 캔버스 마우스 이동시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void canvas_MouseMove(object sender, MouseEventArgs e)
        {
            this.mousePoint = e.GetPosition(sender as UIElement);
        }

        #endregion
    }
}

100

101

102

103

104

105

106

using System;

using System.Diagnostics;

using System.Globalization;

using System.Windows;

using System.Windows.Input;

using System.Windows.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region Field

/// <summary>

/// 스톱워치

/// </summary>

private readonly Stopwatch stopwatch = new Stopwatch();

/// <summary>

/// 프레임 카운터

/// </summary>

private double frameCounter;

/// <summary>

/// 마우스 포인트

/// </summary>

private Point mousePoint;

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

CompositionTarget.Rendering += CompositionTarget_Rendering;

canvas.MouseMove += canvas_MouseMove;

}

#endregion

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

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

#region 컴포지션 타켓 렌더링시 처리하기 - CompositionTarget_Rendering(sender, e)

/// <summary>

/// 컴포지션 타켓 렌더링시 처리하기

/// </summary>

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

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

private void CompositionTarget_Rendering(object sender, EventArgs e)

{

if(this.frameCounter++ == 0)

{

this.stopwatch.Start();

}

long frameRate = (long)(this.frameCounter / this.stopwatch.Elapsed.TotalSeconds);

if(frameRate > 0)

{

this.stopwatchLabel.Content = this.stopwatch.Elapsed.ToString();

this.frameCounterLabel.Content = this.frameCounter.ToString(CultureInfo.InvariantCulture);

this.frameRateLabel.Content = frameRate.ToString();

}

byte red = (byte)(this.mousePoint.X / 3.0);

byte blue = (byte)(this.mousePoint.Y / 2.0);

this.canvas.Background = new SolidColorBrush(Color.FromRgb(red, 0, blue));

}

#endregion

#region 캔버스 마우스 이동시 처리하기 - canvas_MouseMove(sender, e)

/// <summary>

/// 캔버스 마우스 이동시 처리하기

/// </summary>

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

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

private void canvas_MouseMove(object sender, MouseEventArgs e)

{

this.mousePoint = e.GetPosition(sender as UIElement);

}

#endregion

}

TestProject.zip

[C#/WPF] DoubleAnimationUsingPath 클래스 : PathGeometry/Source 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기

■ DoubleAnimationUsingPath 클래스의 PathGeometry/Source 속성을 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

</Window>

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            #region 회전 변환을 생성한다.

            RotateTransform rotateTransform = new RotateTransform();

            RegisterName("rotateTransform", rotateTransform);

            #endregion
            #region 이동 변환을 생성한다.

            TranslateTransform translateTransform = new TranslateTransform();

            RegisterName("translateTransform", translateTransform);

            #endregion
            #region 변환 그룹을 생성한다.

            TransformGroup transformGroup = new TransformGroup();

            transformGroup.Children.Add(rotateTransform);
            transformGroup.Children.Add(translateTransform);

            #endregion
            #region 사각형을 생성한다.

            Rectangle rectangle = new Rectangle();

            rectangle.Width           = 30;
            rectangle.Height          = 30;
            rectangle.Fill            = Brushes.Blue;
            rectangle.RenderTransform = transformGroup;

            #endregion
            #region 캔버스를 생성한다.

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(rectangle);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

            #endregion
            #region 패스 피겨를 생성한다.

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

            #endregion
            #region 회전 애니메이션을 생성한다.

            DoubleAnimationUsingPath rotateAnimation = new DoubleAnimationUsingPath();

            rotateAnimation.PathGeometry = pathGeometry;
            rotateAnimation.Source       = PathAnimationSource.Angle;
            rotateAnimation.Duration     = TimeSpan.FromSeconds(5);

            Storyboard.SetTargetName(rotateAnimation, "rotateTransform");
            Storyboard.SetTargetProperty(rotateAnimation, new PropertyPath(RotateTransform.AngleProperty));

            #endregion
            #region 이동 X 애니메이션을 생성한다.

            DoubleAnimationUsingPath translateXAnimation = new DoubleAnimationUsingPath();

            translateXAnimation.PathGeometry = pathGeometry;
            translateXAnimation.Source       = PathAnimationSource.X;
            translateXAnimation.Duration     = TimeSpan.FromSeconds(5);

            Storyboard.SetTargetName(translateXAnimation, "translateTransform");
            Storyboard.SetTargetProperty(translateXAnimation, new PropertyPath(TranslateTransform.XProperty));

            #endregion
            #region 이동 Y 애니메이션을 생성한다.

            DoubleAnimationUsingPath translateYAnimation = new DoubleAnimationUsingPath();

            translateYAnimation.PathGeometry = pathGeometry;
            translateYAnimation.Source       = PathAnimationSource.Y;
            translateYAnimation.Duration     = TimeSpan.FromSeconds(5);

            Storyboard.SetTargetName(translateYAnimation, "translateTransform");
            Storyboard.SetTargetProperty(translateYAnimation, new PropertyPath(TranslateTransform.YProperty));

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard storyboard = new Storyboard();

            storyboard.RepeatBehavior = RepeatBehavior.Forever;
            storyboard.AutoReverse    = true;

            storyboard.Children.Add(rotateAnimation);
            storyboard.Children.Add(translateXAnimation);
            storyboard.Children.Add(translateYAnimation);

            #endregion

            Content = canvas;

            rectangle.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };
        }

        #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

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

#region 회전 변환을 생성한다.

RotateTransform rotateTransform = new RotateTransform();

RegisterName("rotateTransform", rotateTransform);

#endregion

#region 이동 변환을 생성한다.

TranslateTransform translateTransform = new TranslateTransform();

RegisterName("translateTransform", translateTransform);

#endregion

#region 변환 그룹을 생성한다.

TransformGroup transformGroup = new TransformGroup();

transformGroup.Children.Add(rotateTransform);

transformGroup.Children.Add(translateTransform);

#endregion

#region 사각형을 생성한다.

Rectangle rectangle = new Rectangle();

rectangle.Width = 30;

rectangle.Height = 30;

rectangle.Fill = Brushes.Blue;

rectangle.RenderTransform = transformGroup;

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(rectangle);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

#region 회전 애니메이션을 생성한다.

DoubleAnimationUsingPath rotateAnimation = new DoubleAnimationUsingPath();

rotateAnimation.PathGeometry = pathGeometry;

rotateAnimation.Source = PathAnimationSource.Angle;

rotateAnimation.Duration = TimeSpan.FromSeconds(5);

Storyboard.SetTargetName(rotateAnimation, "rotateTransform");

Storyboard.SetTargetProperty(rotateAnimation, new PropertyPath(RotateTransform.AngleProperty));

#endregion

#region 이동 X 애니메이션을 생성한다.

DoubleAnimationUsingPath translateXAnimation = new DoubleAnimationUsingPath();

translateXAnimation.PathGeometry = pathGeometry;

translateXAnimation.Source = PathAnimationSource.X;

translateXAnimation.Duration = TimeSpan.FromSeconds(5);

Storyboard.SetTargetName(translateXAnimation, "translateTransform");

Storyboard.SetTargetProperty(translateXAnimation, new PropertyPath(TranslateTransform.XProperty));

#endregion

#region 이동 Y 애니메이션을 생성한다.

DoubleAnimationUsingPath translateYAnimation = new DoubleAnimationUsingPath();

translateYAnimation.PathGeometry = pathGeometry;

translateYAnimation.Source = PathAnimationSource.Y;

translateYAnimation.Duration = TimeSpan.FromSeconds(5);

Storyboard.SetTargetName(translateYAnimation, "translateTransform");

Storyboard.SetTargetProperty(translateYAnimation, new PropertyPath(TranslateTransform.YProperty));

#endregion

#region 스토리보드를 생성한다.

Storyboard storyboard = new Storyboard();

storyboard.RepeatBehavior = RepeatBehavior.Forever;

storyboard.AutoReverse = true;

storyboard.Children.Add(rotateAnimation);

storyboard.Children.Add(translateXAnimation);

storyboard.Children.Add(translateYAnimation);

#endregion

Content = canvas;

rectangle.Loaded += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

}

#endregion

}

TestProject.zip

[C#/WPF] DoubleAnimationUsingPath 엘리먼트 : PathGeometry/Source 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기

■ DoubleAnimationUsingPath 엘리먼트의 PathGeometry/Source 속성을 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <PathGeometry x:Key="PathGeometryKey"
            Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
            options:Freeze="True" />
    </Window.Resources>
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Rectangle
            Width="30"
            Height="30"
            Fill="Blue">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotateTransform" />
                    <TranslateTransform x:Name="translateTransform" />
                </TransformGroup>
            </Rectangle.RenderTransform>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard
                            RepeatBehavior="Forever"
                            AutoReverse="True">
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="rotateTransform"
                                Storyboard.TargetProperty="Angle"
                                PathGeometry="{StaticResource PathGeometryKey}"
                                Source="Angle"
                                Duration="00:00:05" />
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="translateTransform"
                                Storyboard.TargetProperty="X"
                                PathGeometry="{StaticResource PathGeometryKey}"
                                Source="X"
                                Duration="00:00:05" />
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="translateTransform"
                                Storyboard.TargetProperty="Y"
                                PathGeometry="{StaticResource PathGeometryKey}"
                                Source="Y"
                                Duration="00:00:05" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Canvas>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<PathGeometry x:Key="PathGeometryKey"

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</Window.Resources>

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Rectangle

Width="30"

Height="30"

Fill="Blue">

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

<Rectangle.Triggers>

<Storyboard

RepeatBehavior="Forever"

AutoReverse="True">

<DoubleAnimationUsingPath

Storyboard.TargetName="rotateTransform"

Storyboard.TargetProperty="Angle"

PathGeometry="{StaticResource PathGeometryKey}"

Source="Angle"

Duration="00:00:05" />

<DoubleAnimationUsingPath

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

PathGeometry="{StaticResource PathGeometryKey}"

Source="X"

Duration="00:00:05" />

<DoubleAnimationUsingPath

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="Y"

PathGeometry="{StaticResource PathGeometryKey}"

Source="Y"

Duration="00:00:05" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] MatrixAnimationUsingPath 클래스 : DoesRotateWithTangent 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기 (객체 회전)

■ MatrixAnimationUsingPath 클래스의 DoesRotateWithTangent 속성을 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. (객체 회전) ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

</Window>

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            #region 매트릭스 변환을 생성한다.

            MatrixTransform matrixTransform = new MatrixTransform();

            RegisterName("matrixTransform", matrixTransform);

            #endregion
            #region 버튼을 생성한다.

            Button button = new Button();

            button.Width           = 100;
            button.Height          = 30;
            button.RenderTransform = matrixTransform;
            button.Content         = "테스트";

            #endregion
            #region 캔버스를 생성한다.

            Canvas canvas = new Canvas();

            canvas.Width  = 400;
            canvas.Height = 400;

            canvas.Children.Add(button);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

            #endregion
            #region 패스 피겨를 생성한다.

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

            #endregion
            #region 매트릭스 애니메이션을 생성한다.

            MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

            matrixAnimation.PathGeometry          = pathGeometry;
            matrixAnimation.DoesRotateWithTangent = true;
            matrixAnimation.Duration              = TimeSpan.FromSeconds(5);
            matrixAnimation.RepeatBehavior        = RepeatBehavior.Forever;
            matrixAnimation.AutoReverse           = true;

            Storyboard.SetTargetName(matrixAnimation, "matrixTransform");
            Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(matrixAnimation);

            #endregion

            Content = canvas;

            button.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

#region 매트릭스 변환을 생성한다.

MatrixTransform matrixTransform = new MatrixTransform();

RegisterName("matrixTransform", matrixTransform);

#endregion

#region 버튼을 생성한다.

Button button = new Button();

button.Width = 100;

button.Height = 30;

button.RenderTransform = matrixTransform;

button.Content = "테스트";

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Children.Add(button);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

#region 매트릭스 애니메이션을 생성한다.

MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

matrixAnimation.PathGeometry = pathGeometry;

matrixAnimation.DoesRotateWithTangent = true;

matrixAnimation.Duration = TimeSpan.FromSeconds(5);

matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;

matrixAnimation.AutoReverse = true;

Storyboard.SetTargetName(matrixAnimation, "matrixTransform");

Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

#endregion

#region 스토리보드를 생성한다.

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(matrixAnimation);

#endregion

Content = canvas;

button.Loaded += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

}

#endregion

}

[C#/WPF] MatrixAnimationUsingPath 엘리먼트 : DoesRotateWithTangent 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기 (객체 회전)

■ MatrixAnimationUsingPath 엘리먼트의 DoesRotateWithTangent 속성을 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. (객체 회전) ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Button
            Width="100"
            Height="30"
            Content="테스트">
            <Button.RenderTransform>
                <MatrixTransform x:Name="matrixTransform">
                    <MatrixTransform.Matrix >
                        <Matrix />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath
                                Storyboard.TargetName="matrixTransform"
                                Storyboard.TargetProperty="Matrix"
                                DoesRotateWithTangent="True"
                                Duration="00:00:05"
                                RepeatBehavior="Forever"
                                AutoReverse="True">
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
                                        options:Freeze="True" />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Canvas>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Button

Width="100"

Height="30"

Content="테스트">

<Button.RenderTransform>

<MatrixTransform.Matrix >

</MatrixTransform.Matrix>

</MatrixTransform>

</Button.RenderTransform>

<Button.Triggers>

<MatrixAnimationUsingPath

Storyboard.TargetName="matrixTransform"

Storyboard.TargetProperty="Matrix"

DoesRotateWithTangent="True"

Duration="00:00:05"

RepeatBehavior="Forever"

AutoReverse="True">

<MatrixAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</MatrixAnimationUsingPath.PathGeometry>

</MatrixAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] MatrixAnimationUsingPath 클래스 : IsOffsetCumulative 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기 (오프셋 누적)

■ MatrixAnimationUsingPath 클래스의 IsOffsetCumulative 속성을 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. (오프셋 누적) ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

</Window>

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            #region 매트릭스 변환을 생성한다.

            MatrixTransform matrixTransform = new MatrixTransform();

            RegisterName("matrixTransform", matrixTransform);

            #endregion
            #region 버튼을 생성한다.

            Button button = new Button();

            button.Width           = 100;
            button.Height          = 30;
            button.RenderTransform = matrixTransform;
            button.Content         = "테스트";

            #endregion
            #region 캔버스를 생성한다.

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(button);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

            #endregion
            #region 패스 피겨를 생성한다.

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

            #endregion
            #region 매트릭스 애니메이션을 생성한다.

            MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

            matrixAnimation.PathGeometry       = pathGeometry;
            matrixAnimation.IsOffsetCumulative = true;
            matrixAnimation.Duration           = TimeSpan.FromSeconds(5);
            matrixAnimation.RepeatBehavior     = new RepeatBehavior(2);

            Storyboard.SetTargetName(matrixAnimation, "matrixTransform");
            Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(matrixAnimation);

            #endregion

            Content = canvas;

            button.Click += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

#region 매트릭스 변환을 생성한다.

MatrixTransform matrixTransform = new MatrixTransform();

RegisterName("matrixTransform", matrixTransform);

#endregion

#region 버튼을 생성한다.

Button button = new Button();

button.Width = 100;

button.Height = 30;

button.RenderTransform = matrixTransform;

button.Content = "테스트";

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(button);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

#region 매트릭스 애니메이션을 생성한다.

MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

matrixAnimation.PathGeometry = pathGeometry;

matrixAnimation.IsOffsetCumulative = true;

matrixAnimation.Duration = TimeSpan.FromSeconds(5);

matrixAnimation.RepeatBehavior = new RepeatBehavior(2);

Storyboard.SetTargetName(matrixAnimation, "matrixTransform");

Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

#endregion

#region 스토리보드를 생성한다.

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(matrixAnimation);

#endregion

Content = canvas;

button.Click += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

}

#endregion

}

[C#/WPF] MatrixAnimationUsingPath 엘리먼트 : IsOffsetCumulative 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기 (오프셋 누적)

■ MatrixAnimationUsingPath 엘리먼트의 IsOffsetCumulative 속성을 사용해 경로를 따라 객체에 애니메이션 효과을 주는 방법을 보여준다. (오프셋 누적) ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Button
            Width="100"
            Height="30"
            Content="테스트">
            <Button.RenderTransform>
                <MatrixTransform x:Name="matrixTransform">
                    <MatrixTransform.Matrix>
                        <Matrix />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath
                                Storyboard.TargetName="matrixTransform"
                                Storyboard.TargetProperty="Matrix"
                                IsOffsetCumulative="True"
                                Duration="00:00:05"
                                RepeatBehavior="2x">
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
                                        options:Freeze="True" />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Canvas>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Button

Width="100"

Height="30"

Content="테스트">

<Button.RenderTransform>

<MatrixTransform.Matrix>

</MatrixTransform.Matrix>

</MatrixTransform>

</Button.RenderTransform>

<Button.Triggers>

<MatrixAnimationUsingPath

Storyboard.TargetName="matrixTransform"

Storyboard.TargetProperty="Matrix"

IsOffsetCumulative="True"

Duration="00:00:05"

RepeatBehavior="2x">

<MatrixAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</MatrixAnimationUsingPath.PathGeometry>

</MatrixAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Canvas>

</Window>

※ IsOffsetCumulative 속성으로

[C#/WPF] MatrixAnimationUsingPath 클래스 : 경로를 따라 객체에 애니메이션 효과 주기

■ MatrixAnimationUsingPath 클래스를 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

</Window>

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            #region 매트릭스 변환을 생성한다.

            MatrixTransform matrixTransform = new MatrixTransform();

            RegisterName("matrixTransform", matrixTransform);

            #endregion
            #region 버튼을 생성한다.

            Button button = new Button();

            button.Width           = 100;
            button.Height          = 30;
            button.RenderTransform = matrixTransform;
            button.Content         = "테스트";

            #endregion
            #region 캔버스를 생성한다.

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(button);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

            #endregion
            #region 패스 피겨를 생성한다.

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

            #endregion
            #region 매트릭스 애니메이션을 생성한다.

            MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

            matrixAnimation.PathGeometry   = pathGeometry;
            matrixAnimation.Duration       = TimeSpan.FromSeconds(5);
            matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;
            matrixAnimation.AutoReverse    = true;

            Storyboard.SetTargetName(matrixAnimation, "matrixTransform");
            Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard pathAnimationStoryboard = new Storyboard();

            pathAnimationStoryboard.Children.Add(matrixAnimation);

            #endregion

            Content = canvas;

            button.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                pathAnimationStoryboard.Begin(this);
            };
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

#region 매트릭스 변환을 생성한다.

MatrixTransform matrixTransform = new MatrixTransform();

RegisterName("matrixTransform", matrixTransform);

#endregion

#region 버튼을 생성한다.

Button button = new Button();

button.Width = 100;

button.Height = 30;

button.RenderTransform = matrixTransform;

button.Content = "테스트";

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(button);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

#region 매트릭스 애니메이션을 생성한다.

MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

matrixAnimation.PathGeometry = pathGeometry;

matrixAnimation.Duration = TimeSpan.FromSeconds(5);

matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;

matrixAnimation.AutoReverse = true;

Storyboard.SetTargetName(matrixAnimation, "matrixTransform");

Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

#endregion

#region 스토리보드를 생성한다.

Storyboard pathAnimationStoryboard = new Storyboard();

pathAnimationStoryboard.Children.Add(matrixAnimation);

#endregion

Content = canvas;

button.Loaded += delegate(object sender, RoutedEventArgs e)

{

pathAnimationStoryboard.Begin(this);

};

}

#endregion

}

TestProject.zip

[C#/WPF] MatrixAnimationUsingPath 엘리먼트 : 경로를 따라 객체에 애니메이션 효과 주기

■ MatrixAnimationUsingPath 엘리먼트를 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Button
            Width="100"
            Height="30"
            Content="테스트">
            <Button.RenderTransform>
                <MatrixTransform x:Name="matrixTransform" />
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath
                                Storyboard.TargetName="matrixTransform"
                                Storyboard.TargetProperty="Matrix"
                                Duration="00:00:05"
                                RepeatBehavior="Forever"
                                AutoReverse="True">
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
                                        options:Freeze="True" />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Canvas>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Button

Width="100"

Height="30"

Content="테스트">

<Button.RenderTransform>

</Button.RenderTransform>

<Button.Triggers>

<MatrixAnimationUsingPath

Storyboard.TargetName="matrixTransform"

Storyboard.TargetProperty="Matrix"

Duration="00:00:05"

RepeatBehavior="Forever"

AutoReverse="True">

<MatrixAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</MatrixAnimationUsingPath.PathGeometry>

</MatrixAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] PointAnimationUsingPath 클래스 : 경로를 따라 객체에 애니메이션 효과 주기

■ PointAnimationUsingPath 클래스를 사용해 경로를 따라 객체에 애니메이션 효과을 주는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

</Window>

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            #region 타원 지오메트리를 생성한다.

            EllipseGeometry ellipseGeometry = new EllipseGeometry(new Point(10, 100), 15, 15);

            RegisterName("ellipseGeometry", ellipseGeometry);

            #endregion
            #region 패스를 생성한다.

            Path path = new Path();

            path.Margin = new Thickness(15);
            path.Fill   = Brushes.Blue;
            path.Data   = ellipseGeometry;

            #endregion
            #region 캔버스를 생성한다.

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(path);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

            #endregion
            #region 패스 피겨를 생성한다.

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

            #endregion
            #region 포인트 애니메이션을 생성한다.

            PointAnimationUsingPath pointAnimation = new PointAnimationUsingPath();

            pointAnimation.PathGeometry   = pathGeometry;
            pointAnimation.Duration       = TimeSpan.FromSeconds(5);
            pointAnimation.RepeatBehavior = RepeatBehavior.Forever;
            pointAnimation.AutoReverse    = true;

            Storyboard.SetTargetName(pointAnimation, "ellipseGeometry");
            Storyboard.SetTargetProperty(pointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(pointAnimation);

            #endregion

            Content = canvas;

            path.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

#region 타원 지오메트리를 생성한다.

EllipseGeometry ellipseGeometry = new EllipseGeometry(new Point(10, 100), 15, 15);

RegisterName("ellipseGeometry", ellipseGeometry);

#endregion

#region 패스를 생성한다.

Path path = new Path();

path.Margin = new Thickness(15);

path.Fill = Brushes.Blue;

path.Data = ellipseGeometry;

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(path);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

#region 포인트 애니메이션을 생성한다.

PointAnimationUsingPath pointAnimation = new PointAnimationUsingPath();

pointAnimation.PathGeometry = pathGeometry;

pointAnimation.Duration = TimeSpan.FromSeconds(5);

pointAnimation.RepeatBehavior = RepeatBehavior.Forever;

pointAnimation.AutoReverse = true;

Storyboard.SetTargetName(pointAnimation, "ellipseGeometry");

Storyboard.SetTargetProperty(pointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));

#endregion

#region 스토리보드를 생성한다.

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(pointAnimation);

#endregion

Content = canvas;

path.Loaded += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

}

#endregion

}

TestProject.zip

[C#/WPF] PointAnimationUsingPath 엘리먼트 : 경로를 따라 객체에 애니메이션 효과 주기

■ PointAnimationUsingPath 엘리먼트를 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Path
            Margin="15 15 15 15"
            Fill="Blue">
            <Path.Data>
                <EllipseGeometry x:Name="ellipseGeometry"
                    Center="10 100"
                    RadiusX="15"
                    RadiusY="15" />
            </Path.Data>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <PointAnimationUsingPath
                                Storyboard.TargetName="ellipseGeometry"
                                Storyboard.TargetProperty="Center"
                                Duration="00:00:05"
                                RepeatBehavior="Forever"
                                AutoReverse="True">
                                <PointAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
                                        options:Freeze="True" />
                                </PointAnimationUsingPath.PathGeometry>
                            </PointAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </Canvas>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Path

Margin="15 15 15 15"

Fill="Blue">

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

Center="10 100"

RadiusX="15"

RadiusY="15" />

</Path.Data>

<Path.Triggers>

<PointAnimationUsingPath

Storyboard.TargetName="ellipseGeometry"

Storyboard.TargetProperty="Center"

Duration="00:00:05"

RepeatBehavior="Forever"

AutoReverse="True">

<PointAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</PointAnimationUsingPath.PathGeometry>

</PointAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Path.Triggers>

</Path>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] DoubleAnimationUsingPath 클래스 : 경로를 따라 객체에 애니메이션 효과 주기

■ DoubleAnimationUsingPath 클래스를 사용해 경로를 따라 객체에 애니메이션 효과을 주는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

</Window>

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            NameScope.SetNameScope(this, new NameScope());

            #region 이동 변환을 생성한다.

            TranslateTransform translateTransform = new TranslateTransform();

            RegisterName("translateTransform", translateTransform);

            #endregion
            #region 사각형을 생성한다.

            Rectangle rectangle = new Rectangle();

            rectangle.Width           = 30;
            rectangle.Height          = 30;
            rectangle.Fill            = Brushes.Blue;
            rectangle.RenderTransform = translateTransform;

            #endregion
            #region 캔버스를 생성한다.

            Canvas canvas = new Canvas();

            canvas.Width      = 400;
            canvas.Height     = 400;
            canvas.Background = Brushes.LightGray;

            canvas.Children.Add(rectangle);

            #endregion

            #region 폴리 베지어 세그먼트를 생성한다.

            PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

            polyBezierSegment.Points.Add(new Point(35 , 0  ));
            polyBezierSegment.Points.Add(new Point(135, 0  ));
            polyBezierSegment.Points.Add(new Point(160, 100));
            polyBezierSegment.Points.Add(new Point(180, 190));
            polyBezierSegment.Points.Add(new Point(285, 200));
            polyBezierSegment.Points.Add(new Point(310, 100));

            #endregion
            #region 패스 피겨를 생성한다.

            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(10, 100);

            pathFigure.Segments.Add(polyBezierSegment);

            #endregion
            #region 패스 지오메트리를 생성한다.

            PathGeometry pathGeometry = new PathGeometry();

            pathGeometry.Figures.Add(pathFigure);

            pathGeometry.Freeze();

            #endregion
            #region 이동 X 애니메이션을 생성한다.

            DoubleAnimationUsingPath translateXAnimation = new DoubleAnimationUsingPath();

            translateXAnimation.PathGeometry = pathGeometry;
            translateXAnimation.Duration     = TimeSpan.FromSeconds(5);
            translateXAnimation.Source       = PathAnimationSource.X;

            Storyboard.SetTargetName(translateXAnimation, "translateTransform");
            Storyboard.SetTargetProperty(translateXAnimation, new PropertyPath(TranslateTransform.XProperty));

            #endregion
            #region 이동 Y 애니메이션을 생성한다.

            DoubleAnimationUsingPath translateYAnimation = new DoubleAnimationUsingPath();

            translateYAnimation.PathGeometry = pathGeometry;
            translateYAnimation.Duration     = TimeSpan.FromSeconds(5);
            translateYAnimation.Source       = PathAnimationSource.Y;

            Storyboard.SetTargetName(translateYAnimation, "translateTransform");
            Storyboard.SetTargetProperty(translateYAnimation, new PropertyPath(TranslateTransform.YProperty));

            #endregion
            #region 스토리보드를 생성한다.

            Storyboard storyboard = new Storyboard();

            storyboard.RepeatBehavior = RepeatBehavior.Forever;
            storyboard.AutoReverse    = true;

            storyboard.Children.Add(translateXAnimation);
            storyboard.Children.Add(translateYAnimation);

            #endregion

            Content = canvas;

            rectangle.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                storyboard.Begin(this);
            };
        }

        #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

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

NameScope.SetNameScope(this, new NameScope());

#region 이동 변환을 생성한다.

TranslateTransform translateTransform = new TranslateTransform();

RegisterName("translateTransform", translateTransform);

#endregion

#region 사각형을 생성한다.

Rectangle rectangle = new Rectangle();

rectangle.Width = 30;

rectangle.Height = 30;

rectangle.Fill = Brushes.Blue;

rectangle.RenderTransform = translateTransform;

#endregion

#region 캔버스를 생성한다.

Canvas canvas = new Canvas();

canvas.Width = 400;

canvas.Height = 400;

canvas.Background = Brushes.LightGray;

canvas.Children.Add(rectangle);

#endregion

#region 폴리 베지어 세그먼트를 생성한다.

PolyBezierSegment polyBezierSegment = new PolyBezierSegment();

polyBezierSegment.Points.Add(new Point(35 , 0 ));

polyBezierSegment.Points.Add(new Point(135, 0 ));

polyBezierSegment.Points.Add(new Point(160, 100));

polyBezierSegment.Points.Add(new Point(180, 190));

polyBezierSegment.Points.Add(new Point(285, 200));

polyBezierSegment.Points.Add(new Point(310, 100));

#endregion

#region 패스 피겨를 생성한다.

PathFigure pathFigure = new PathFigure();

pathFigure.StartPoint = new Point(10, 100);

pathFigure.Segments.Add(polyBezierSegment);

#endregion

#region 패스 지오메트리를 생성한다.

PathGeometry pathGeometry = new PathGeometry();

pathGeometry.Figures.Add(pathFigure);

pathGeometry.Freeze();

#endregion

#region 이동 X 애니메이션을 생성한다.

DoubleAnimationUsingPath translateXAnimation = new DoubleAnimationUsingPath();

translateXAnimation.PathGeometry = pathGeometry;

translateXAnimation.Duration = TimeSpan.FromSeconds(5);

translateXAnimation.Source = PathAnimationSource.X;

Storyboard.SetTargetName(translateXAnimation, "translateTransform");

Storyboard.SetTargetProperty(translateXAnimation, new PropertyPath(TranslateTransform.XProperty));

#endregion

#region 이동 Y 애니메이션을 생성한다.

DoubleAnimationUsingPath translateYAnimation = new DoubleAnimationUsingPath();

translateYAnimation.PathGeometry = pathGeometry;

translateYAnimation.Duration = TimeSpan.FromSeconds(5);

translateYAnimation.Source = PathAnimationSource.Y;

Storyboard.SetTargetName(translateYAnimation, "translateTransform");

Storyboard.SetTargetProperty(translateYAnimation, new PropertyPath(TranslateTransform.YProperty));

#endregion

#region 스토리보드를 생성한다.

Storyboard storyboard = new Storyboard();

storyboard.RepeatBehavior = RepeatBehavior.Forever;

storyboard.AutoReverse = true;

storyboard.Children.Add(translateXAnimation);

storyboard.Children.Add(translateYAnimation);

#endregion

Content = canvas;

rectangle.Loaded += delegate(object sender, RoutedEventArgs e)

{

storyboard.Begin(this);

};

}

#endregion

}

TestProject.zip

[C#/WPF] DoubleAnimationUsingPath 엘리먼트 : 경로를 따라 객체에 애니메이션 효과 주기

■ DoubleAnimationUsingPath 엘리먼트를 사용해 경로를 따라 객체에 애니메이션 효과를 주는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <PathGeometry x:Key="PathGeometryKey"
            Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
            options:Freeze="True" />
    </Window.Resources>
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Rectangle
            Width="30"
            Height="30"
            Fill="Blue">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="translateTransform" />
            </Rectangle.RenderTransform>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard>
                        <Storyboard
                            RepeatBehavior="Forever"
                            AutoReverse="True">
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="translateTransform"
                                Storyboard.TargetProperty="X"
                                PathGeometry="{StaticResource PathGeometryKey}"
                                Source="X"
                                Duration="00:00:05" />
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="translateTransform"
                                Storyboard.TargetProperty="Y"
                                PathGeometry="{StaticResource PathGeometryKey}"
                                Source="Y"
                                Duration="00:00:05" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Canvas>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<PathGeometry x:Key="PathGeometryKey"

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</Window.Resources>

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Rectangle

Width="30"

Height="30"

Fill="Blue">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

<Rectangle.Triggers>

<Storyboard

RepeatBehavior="Forever"

AutoReverse="True">

<DoubleAnimationUsingPath

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

PathGeometry="{StaticResource PathGeometryKey}"

Source="X"

Duration="00:00:05" />

<DoubleAnimationUsingPath

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="Y"

PathGeometry="{StaticResource PathGeometryKey}"

Source="Y"

Duration="00:00:05" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Canvas>

</Window>

TestProject.zip