Animation: Tạo Anomation Hiệu ứng săp xếp với Rectangle trên Windows Store Apps (C #)

BlankPage3.xaml

Windows Store 2017

<Page
    x:Class="Theory1.BlankPage3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Theory1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="btnAddRectangle" Content="Add Rectangle" HorizontalAlignment="Left" Margin="430,78,0,0" VerticalAlignment="Top" Click="btnAddRectangle_Click"/>
        <Button x:Name="btnRemoveRectangle" Content="Remove Rectangle" HorizontalAlignment="Left" Margin="630,78,0,0" VerticalAlignment="Top" Click="btnRemoveRectangle_Click"/>
        <ItemsControl x:Name="MyItems" HorizontalAlignment="Left" Height="442" Margin="118,160,0,0" VerticalAlignment="Top" Width="702">
            <ItemsControl.ItemContainerTransitions>
                <TransitionCollection>
                    <!--<AddDeleteThemeTransition></AddDeleteThemeTransition>-->
                    <RepositionThemeTransition/>
                </TransitionCollection>
            </ItemsControl.ItemContainerTransitions>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Height="400"></WrapGrid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

    </Grid>
</Page>

BlankPage3.xaml.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Shapes;

namespace Theory1
{
    public sealed partial class BlankPage3 : Page
    {
        public BlankPage3()
        {
            this.InitializeComponent();
        }

        private void btnAddRectangle_Click(object sender, RoutedEventArgs e)
        {
            Rectangle rect = new Rectangle();
            rect.Fill = new SolidColorBrush(Colors.DarkCyan);
            rect.Height = 100;
            rect.Width = 100;
            rect.Margin = new Thickness(10);
            MyItems.Items.Add(rect);
        }

        private void btnRemoveRectangle_Click(object sender, RoutedEventArgs e)
        {
            if (MyItems.Items.Count > 0) {
                MyItems.Items.RemoveAt(0);
            }
        }
    }
}

RUN DEMO