[C#/UWP] ConnectedAnimation 클래스 : 동일 페이지 내에서 연결 애니메이션 사용하기

TestProject.zip

0.02MB

▶ 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"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <GridView Name="gridView"
            HorizontalAlignment="Center"
            IsItemClickEnabled="True"
            ItemClick="gridView_ItemClick">
            <GridView.ItemContainerStyle>
                <Style BasedOn="{StaticResource GridViewItemRevealStyle}" TargetType="GridViewItem">
                    <Style.Setters>
                        <Setter Property="Margin" Value="10" />
                    </Style.Setters>
                </Style>
            </GridView.ItemContainerStyle>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Name="sourceGrid"
                        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="헤더" />
                        </Grid>
                        <Grid Grid.Row="1"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">
                            <TextBlock
                                Margin="10"
                                Text="내용" />
                        </Grid>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
        <Grid 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="헤더" />
                    <Button
                        HorizontalAlignment="Right"
                        VerticalAlignment="Top"
                        Margin="5" 
                        Width="40"
                        Height="40"
                        ToolTipService.ToolTip="Close"
                        Click="closeButton_Click">
                        <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="내용" />
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</Page>

 

728x90

 

▶ CardPage.xaml.cs

using System;
using System.Collections.Generic;
using Windows.Foundation.Metadata;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;

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

        #region Field

        /// <summary>
        /// 현재 항목
        /// </summary>
        private int currentItem;

        #endregion

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

        #region 생성자 - CardPage()

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

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

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

            this.gridView.ItemsSource = list;
        }

        #endregion

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

        #region 그리드 뷰 항목 클릭시 처리하기 - iew_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.currentItem = Convert.ToInt32(gridViewitem.Content);

                animation = gridView.PrepareConnectedAnimation("ForwardAnimation", this.currentItem, "sourceGrid");
            }

            this.smokeGrid.Visibility = Visibility.Visible;

            animation.TryStart(targetGrid);
        }

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

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

            animation.Completed += animation_Completed;

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

            this.gridView.UpdateLayout();

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

            await this.gridView.TryStartConnectedAnimationAsync(animation, this.currentItem, "sourceGrid");
        }

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

        #endregion
    }
}

 

300x250

 

▶ MainPage.xaml

<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>
        <Frame Name="frame"
            Margin="10" />
    </Grid>
</Page>

 

▶ MainPage.xaml.cs

using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

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

        #region 생성자 - MainPage()

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

            #region 윈도우 크기를 설정한다.

            double width  = 800d;
            double height = 600d;

            double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

            Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

            ApplicationView.PreferredLaunchViewSize = windowSize;

            Window.Current.Activate();

            ApplicationView.GetForCurrentView().TryResizeView(windowSize);

            #endregion
            #region 윈도우 제목을 설정한다.

            ApplicationView.GetForCurrentView().Title = "ConnectedAnimation 클래스 : 동일 페이지 내에서 연결 애니메이션 사용하기";

            #endregion

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

        #endregion
    }
}