[C#/UWP] ItemsReorderAnimation 클래스 : SetDuration 정적 메소드를 사용해 GridView 항목 애니메이션 사용하기

TestProject.zip

0.02MB

▶ Person.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;
using Windows.UI.Xaml.Media;

namespace TestProject
{
    /// <summary>
    /// 사람
    /// </summary>
    public class Person : INotifyPropertyChanged
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 속성 변경시 이벤트 - PropertyChanged

        /// <summary>
        /// 속성 변경시 이벤트
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// ID
        /// </summary>
        public int id;

        /// <summary>
        /// 성명
        /// </summary>
        public string name;

        /// <summary>
        /// 나이
        /// </summary>
        public int age;

        /// <summary>
        /// 브러시
        /// </summary>
        public Brush brush;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region ID - ID

        /// <summary>
        /// ID
        /// </summary>
        public int ID
        {
            get => this.id;
            set
            {
                if(this.id != value)
                {
                    this.id = value;

                    FirePropertyChangedEvent();
                }
            }
        }

        #endregion
        #region 성명 - Name

        /// <summary>
        /// 성명
        /// </summary>
        public string Name
        {
            get => this.name;
            set
            {
                if(this.name != value)
                {
                    this.name = value;

                    FirePropertyChangedEvent();
                }
            }
        }

        #endregion
        #region 나이 - Age

        /// <summary>
        /// 나이
        /// </summary>
        public int Age
        {
            get => this.age;
            set
            {
                if(this.age != value)
                {
                    this.age = value;

                    FirePropertyChangedEvent();
                }
            }
        }

        #endregion
        #region 브러시 - Brush

        /// <summary>
        /// 브러시
        /// </summary>
        public Brush Brush
        {
            get => this.brush;
            set
            {
                if(this.brush != value)
                {
                    this.brush = value;

                    FirePropertyChangedEvent();
                }
            }
        }

        #endregion

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

        #region 생성자 - Person(id, name, age, brush)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="id">ID</param>
        /// <param name="name">성명</param>
        /// <param name="age">나이</param>
        /// <param name="brush">브러시</param>
        public Person(int id, string name, int age, Brush brush)
        {
            this.id    = id;
            this.name  = name;
            this.age   = age;
            this.brush = brush;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName)

        /// <summary>
        /// 속성 변경시 이벤트 발생시키기
        /// </summary>
        /// <param name="propertyName">속성명</param>
        protected void FirePropertyChangedEvent([CallerMemberName] string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        #endregion
    }
}

 

728x90

 

▶ 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"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <ItemsPanelTemplate x:Key="GridViewItemsPanelTemplateKey">
            <ItemsWrapGrid
                HorizontalAlignment="Center"
                Orientation="Horizontal" />
        </ItemsPanelTemplate>
        <DataTemplate x:Key="GridViewDataTemplateKey" x:DataType="local:Person">
            <Grid
                Margin="10"
                Height="100"
                Width="100"
                Background="{x:Bind Brush}">
                <StackPanel
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center">
                    <TextBlock
                        HorizontalAlignment="Center"
                        Text="{x:Bind ID}" />
                    <TextBlock
                        HorizontalAlignment="Center"
                        Text="{x:Bind Name}" />
                    <TextBlock
                        HorizontalAlignment="Center"
                        Text="{x:Bind Age}"  />
                </StackPanel>
            </Grid>
        </DataTemplate>
        <Style x:Key="GridViewDefaultItemContainerStyleKey" TargetType="GridViewItem">
            <Setter Property="Margin"     Value="10"        />
            <Setter Property="Background" Value="LightGray" />
        </Style>
    </Page.Resources>
    <Grid>
        <GridView Name="gridView"
            ItemsPanel="{StaticResource GridViewItemsPanelTemplateKey}"
            ItemTemplate="{StaticResource GridViewDataTemplateKey}"
            ItemContainerStyle="{StaticResource GridViewDefaultItemContainerStyleKey}"
            ItemsSource="{x:Bind PersonCollection}" />
    </Grid>
</Page>

 

300x250

 

▶ MainPage.xaml.cs

using Microsoft.Toolkit.Uwp.UI.Animations;
using System;
using System.Collections.ObjectModel;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

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

        #region 사람 컬렉션 - PersonCollection

        /// <summary>
        /// 사람 컬렉션
        /// </summary>
        public ObservableCollection<Person> PersonCollection { get; } = new ObservableCollection<Person>();

        #endregion

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

        #region 생성자 - MainPage()

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

            ItemsReorderAnimation.SetDuration(this.gridView, TimeSpan.FromMilliseconds(400));
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

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

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

            base.OnNavigatedTo(e);
        }

        #endregion

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

        #region 사람 추가하기 - AddPersion(count)

        /// <summary>
        /// 사람 추가하기
        /// </summary>
        /// <param name="count">카운트</param>
        private void AddPersion(int count)
        {
            Random random = new Random();

            for(int i = 0; i < count; i++)
            {
                Color color = Color.FromArgb
                (
                    128,
                    (byte)random.Next(0, 255),
                    (byte)random.Next(0, 255),
                    (byte)random.Next(0, 255)
                );

                Person person = new Person
                (
                    i + 1,
                    $"사람 {i + 1}",
                    random.Next(0, 100),
                    new SolidColorBrush(color)
                );

                PersonCollection.Add(person);
            }
        }

        #endregion
    }
}