WP 8.1的ThemeTransition(RepositionThemeTransition和AddDelteThemeTransition)

回顾下动画过渡效果ThemeTransition有哪些：

EntranceThemeTransition - 页面间跳转时的过渡效果(已介绍，不再重复了)

ContentThemeTransition - 内容改变时的过渡效果(已介绍，不再重复了)

RepositionThemeTransition - 位置改变时的过渡效果(本篇介绍)

PopupThemeTransition - 弹出时的过渡效果(在Popup那一篇博客中出现过，不再重复了)

AddDeleteThemeTransition - 添加项或删除项时的过渡效果(本篇介绍)

ReorderThemeTransition - 对集合中的元素重新排序时的过渡效果

PaneThemeTransition - 基于边缘的较大 UI 滑入和滑出时的过渡效果

EdgeUIThemeTransition - 基于边缘的较小 UI 滑入和滑出时的过渡效果

这次着重在RepositionThemeTransition和AddDeleteThemeTransition这两个过渡效果上

先是RepositionThemeTransition-----位置改变时的过渡效果，直接贴代码，注意这次过渡效果还是很明显的

XAML：

<Page
    x:Class="TestUnion.ThemeTransitionUnion2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestUnion"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel>
            <Button x:Name="btnMove" Content="移动Rectangle" Click="btnMove_Click" />
            <Rectangle x:Name="rectangle" Width="100" Height="100" Fill="Orange" HorizontalAlignment="Left">
                <Rectangle.Transitions>
                    <TransitionCollection>
                        <RepositionThemeTransition />
                    </TransitionCollection>
                </Rectangle.Transitions>
            </Rectangle>
        </StackPanel>
    </Grid>
</Page>

.cs：

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.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;

// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍

namespace TestUnion
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class ThemeTransitionUnion2 : Page
    {
        public ThemeTransitionUnion2()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此页将要在 Frame 中显示时进行调用。
        /// </summary>
        /// <param name="e">描述如何访问此页的事件数据。
        /// 此参数通常用于配置页。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private void btnMove_Click(object sender, RoutedEventArgs e)
        {
            if(rectangle.Margin == new Thickness(0))
            {
                rectangle.Margin = new Thickness(100);
            }
            else
            {
                rectangle.Margin = new Thickness(0);
            }
        }
    }
}

运行截图：(这边只能截图了，如果要看到移动的平滑的效果，建议大家自己写一个尝试下)

(强烈建议大家把那个效果删掉之后再运行一下，作一个对比，这样更能加深印象了)

              

再来AddDeleteThemeTransition-----添加项或删除项时的过渡效果

XAML：

<Page
    x:Class="TestUnion.AddDeleteThemeTransitionDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestUnion"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel>
            <Button x:Name="btnAdd" Content="添加" Click="btnAdd_Click"/>
            <Button x:Name="btnDelete" Content="删除" Click="btnDelete_Click"/>
            <ItemsControl x:Name="itemsControl">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid>
                            <WrapGrid.ChildrenTransitions>
                                <TransitionCollection>
                                    <AddDeleteThemeTransition/>
                                </TransitionCollection>
                            </WrapGrid.ChildrenTransitions>
                        </WrapGrid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Items>
                    <Rectangle Width="300" Height="50" Fill="Red"/>
                    <Rectangle Width="300" Height="50" Fill="Blue"/>
                    <Rectangle Width="300" Height="50" Fill="Green"/>
                </ItemsControl.Items>
                <ItemsControl.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Orange" BorderThickness="5">
                            <ItemsPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </ItemsControl.Template>
            </ItemsControl>
        </StackPanel>
    </Grid>
</Page>

.cs：

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;

// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍

namespace TestUnion
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class AddDeleteThemeTransitionDemo : Page
    {
        public AddDeleteThemeTransitionDemo()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此页将要在 Frame 中显示时进行调用。
        /// </summary>
        /// <param name="e">描述如何访问此页的事件数据。
        /// 此参数通常用于配置页。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private void btnAdd_Click(object sender, RoutedEventArgs e)
        {
            Rectangle rectangle = new Rectangle();
            rectangle.Width = 300;
            rectangle.Height = 50;
            Random random = new Random();

            rectangle.Fill = new SolidColorBrush(Color.FromArgb(255,(byte)random.Next(0,255),(byte)random.Next(0,255),(byte)random.Next(0,255)));
            itemsControl.Items.Add(rectangle);
        }

        private void btnDelete_Click(object sender, RoutedEventArgs e)
        {
            if(itemsControl.Items.Count>0)
            {
                itemsControl.Items.RemoveAt(itemsControl.Items.Count - 1);
            }
        }
    }
}

运行截图：

初始界面：

单击添加和删除按钮：

(你甚至可以把里面的Rectangle删除到一个不剩，然后再添加都是可以的)

        

由于我程序里没有注释(这个习惯很不好，大家不要学习)，不过重要的知识我都是在一开始说明了。

程序里面按钮点击事件以及后台处理的代码不是很难，我想大家应该能看得懂的