WP 8.1中ThemeTransition(ReorderThemeTransition和PaneThemeTransition)

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

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

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

RepositionThemeTransition - 位置改变时的过渡效果(已介绍，不再重复了)

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

AddDeleteThemeTransition - 添加项或删除项时的过渡效果(已介绍，不再重复了)

ReorderThemeTransition - 对集合中的元素重新排序时的过渡效果(本篇介绍)

PaneThemeTransition - 基于边缘的较大 UI 滑入和滑出时的过渡效果(本篇介绍)

EdgeUIThemeTransition - 基于边缘的较小 UI 滑入和滑出时的过渡效果(在Popup那一篇博客中出现过，不再重复了)

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

贴代码之前只要注意itemsControl.Items.Insert(1, rectangle)这句代码即可

表示向ItemsControl控件Items集合中插入Rectangle元素，而位置是从第二个开始插入，原来第二个位置的挤到第三

前台XAML：

<Page
    x:Class="TestUnion.ReorderThemeTransitionDemo"
    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" />
            <ItemsControl x:Name="itemsControl">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid>
                            <WrapGrid.ChildrenTransitions>
                                <TransitionCollection>
                                    <ReorderThemeTransition/>
                                </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="Coral" 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 ReorderThemeTransitionDemo : Page
    {
        public ReorderThemeTransitionDemo()
        {
            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();
            Random random = new Random();
            rectangle.Width = 300;
            rectangle.Height = 50;
            rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(255)));

            itemsControl.Items.Insert(1, rectangle);
        }
    }
}

运行截图：

初始界面以及点击一次添加按钮，点击多次添加按钮：

(前后对比会发现从第二个位置开始插入的)

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

需要注意的是PaneThemeTransition和EdgeUIThemeTransition的属性Edge

Edge ----- 用来设置UI从屏幕那一边滑入滑出

例如Edge="right"，则说明UI会从屏幕右侧滑入

至于Popup的HorizontalOffset，VerticalOffset，IsLightDismissEnabled

以及如何在后台设置PaneThemeTransition和EdgeUIThemeTransition的Edge属性

可以参照我的专门关于Popup控件的那篇篇博客：Windows Phone 8.1中的Popup控件

前台XAML：

<Page
    x:Class="TestUnion.PaneThemeTransitionDemo"
    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 Orientation="Vertical">
            <Popup x:Name="popup" IsLightDismissEnabled="True">
                <Popup.Child>
                    <!--大UI滑入滑出-->
                    <Border BorderBrush="Coral" Background="Green" BorderThickness="5" Width="400" Height="500">
                        <TextBlock Text="这是Popup里面的内容" FontSize="30"/>
                    </Border>
                    <!--小UI滑入滑出-->
                    <!--<Border BorderBrush="Coral" Background="Green" BorderThickness="5" Width="350" Height="100">
                        <TextBlock Text="这是Popup里面的内容" FontSize="30"/>
                    </Border>-->
                </Popup.Child>
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <!--默认Edge=right-->
                        <!--大UI滑入滑出过渡效果-->
                        <PaneThemeTransition Edge="Left" />
                        <!--小UI滑入滑出过渡效果-->
                        <!--<EdgeUIThemeTransition Edge="Right" />-->
                    </TransitionCollection>
                </Popup.ChildTransitions>
            </Popup>
            <Button x:Name="btnShowPane" Content="显示Pane" Click="btnShowPane_Click"/>
        </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 PaneThemeTransitionDemo : Page
    {
        public PaneThemeTransitionDemo()
        {
            this.InitializeComponent();
        }

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

        private void btnShowPane_Click(object sender, RoutedEventArgs e)
        {
            if(!popup.IsOpen)
            {
                popup.IsOpen = true;
            }
        }
    }
}

运行截图：

初始界面和点击显示Pane的按钮：

还是那句话，截图看不了中间过渡动画效果，大家还是自行写一下感受下，这样印象才深一些

実に　おもしろい