[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


using Microsoft.UI.Xaml;

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

        #region 생성자 - MainWindow()

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

            this.frame.Navigate(typeof(CardPage));
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.frame.Navigate(typeof(CardPage));

}

#endregion

}

TestProject.zip