WP 8.1的ThemeTransition(EntranceThemeTransition和ContentThemeTransition)

按照惯例，推荐王磊老师Windows 8.1对应的一篇文章

链接：Windows 8.1中的ThemeTransition

首先，ThemeTransition是用来设置对象的动画效果的，正如我上一篇中对于Popup制作的类Toast通知的例子中就有

所体现。所以，既然微软给我们封装了这么多，我们也就不要时时刻刻麻烦Storyboard了

其次，有哪些动画效果呢？

EntranceThemeTransition -----   页面间跳转时的过渡效果(本篇介绍)

ContentThemeTransition   -----    内容改变时的过渡效果(本篇介绍)

RepositionThemeTransition --    位置改变时的过渡效果

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

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

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

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

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

再然后，哪些元素可以用到这些效果呢或者是具备这些效果呢？

UIElement，如：Rectangle.Transitions

Panel子元素，如：Panel.ChildrenTransitions

ItemsControl的项容器，如：ItemsControl.ItemContainerTransitiions

ContentControl，如：ContentControl.ContentTransitions

对于EntranceThemeTransition和ContentThemeTransition的认识

a.FromHorizontalOffset --- 初始位置的水平偏移量

b.FromVerticalOffset --- 初始位置的垂直偏移量

c.IsStaggeringEnabled ---当包含多个子元素时，是否需要错开呈现

好了，下面就可以贴代码了：

(其实吧，我感觉这些特效用与不用没啥变化呀，大家可以自己试下看看)

XAML：

<Page
    x:Class="TestUnion.ThemeTransitionUnion"
    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>
        <!--可指定4项元素的过度动画-->
        <!--UIElement，如：Rectangle.Transitions
        Panel子元素，如：Panel.ChildrenTransitions
        ItemsControl的项容器，如：ItemsControl.ItemContainerTransitiions
        ContentControl，如：ContentControl.ContentTransitions-->
        <Hub Header="ThemeTransitionUnion">
            <HubSection Header="EntranceThemeTransition" x:Name="hubSection1">
                <DataTemplate>
                    <StackPanel>
                        <Frame x:Name="frame" Width="400" Height="100"
                   HorizontalAlignment="Left" VerticalAlignment="Top">
                            <!--个人感觉加与不加这个过渡效果没什么变化-->
                            <Frame.ContentTransitions>
                                <TransitionCollection>
                                    <EntranceThemeTransition IsStaggeringEnabled="False"/>
                                </TransitionCollection>
                            </Frame.ContentTransitions>
                        </Frame>
                        <StackPanel Orientation="Horizontal">
                            <Button x:Name="btnGotoFrame1" Content="导航到Frame1" Click="btnGotoFrame1_Click"/>
                            <Button x:Name="btnGotoFrame2" Content="导航到Frame2" Click="btnGotoFrame2_Click"/>
                        </StackPanel>
                        <ItemsControl x:Name="itemsControl">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapGrid>
                                        <WrapGrid.ChildrenTransitions>
                                            <TransitionCollection>
                                                <EntranceThemeTransition IsStaggeringEnabled="True" />
                                            </TransitionCollection>
                                        </WrapGrid.ChildrenTransitions>
                                    </WrapGrid>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.Items>
                                <Rectangle Width="100" Height="100" Fill="Red" />
                                <Rectangle Width="100" Height="100" Fill="Blue"/>
                                <Rectangle Width="100" Height="100" Fill="Green"/>
                            </ItemsControl.Items>
                            <ItemsControl.Template>
                                <ControlTemplate>
                                    <Border BorderBrush="Coral" BorderThickness="1">
                                        <ItemsPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                    </Border>
                                </ControlTemplate>
                            </ItemsControl.Template>
                        </ItemsControl>
                    </StackPanel>
                </DataTemplate>
            </HubSection>
            <HubSection Header="ContentThemeTransition" x:Name="hubSection2">
                <DataTemplate>
                    <StackPanel>
                        <ContentControl PointerPressed="ContentControl_PointerPressed">
                            <ContentControl.ContentTransitions>
                                <TransitionCollection>
                                    <ContentThemeTransition/>
                                </TransitionCollection>
                            </ContentControl.ContentTransitions>
                            <ContentControl.Content>
                                <Rectangle Width="200" Height="200" Fill="Orange"/>
                            </ContentControl.Content>
                        </ContentControl>
                        <ScrollViewer Margin="0 10 0 0" PointerPressed="ScrollViewer_PointerPressed">
                            <ContentControl Content="{Binding}">
                                <ContentControl.ContentTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical">
                                            <Rectangle Height="200" Width="200" Fill="{Binding}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </ContentControl.ContentTemplate>
                                <ContentControl.ContentTransitions>
                                    <TransitionCollection>
                                        <ContentThemeTransition/>
                                    </TransitionCollection>
                                </ContentControl.ContentTransitions>
                            </ContentControl>
                        </ScrollViewer>
                    </StackPanel>
                </DataTemplate>
            </HubSection>
        </Hub>
    </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 ThemeTransitionUnion : Page
    {
        public ThemeTransitionUnion()
        {
            this.InitializeComponent();
        }

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

        private void btnGotoFrame1_Click(object sender, RoutedEventArgs e)
        {
            Frame frame = SearchVisualTree<Frame>(hubSection1);
            frame.Navigate(typeof(Frame1));
        }

        private void btnGotoFrame2_Click(object sender, RoutedEventArgs e)
        {
            Frame frame = SearchVisualTree<Frame>(hubSection1);
            frame.Navigate(typeof(Frame2));
        }

        private void ContentControl_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            Rectangle rectangle = new Rectangle();
            rectangle.Width = 200;
            rectangle.Height = 200;
            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)));

            ContentControl contentControl = SearchVisualTree<ContentControl>(hubSection2);
            contentControl.Content = rectangle;
        }

        private void ScrollViewer_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            Random random = new Random();
            ScrollViewer scrollViewer = SearchVisualTree<ScrollViewer>(hubSection2);
            scrollViewer.DataContext = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));
        }  


        private T SearchVisualTree<T>(DependencyObject tarElem) where T : DependencyObject
        {
            var count = VisualTreeHelper.GetChildrenCount(tarElem);
            if (count == 0)
                return null;

            for (int i = 0; i < count; ++i)
            {
                var child = VisualTreeHelper.GetChild(tarElem, i);
                if (child != null && child is T)
                {
                    return (T)child;
                }
                else
                {
                    var res = SearchVisualTree<T>(child);
                    if (res != null)
                    {
                        return res;
                    }
                }
            }

            return null;
        }    
    }
}

运行截图：

其实我觉得这个还是要靠自己试，截图也展示不了其中的动画过渡效果，不管怎么说还是截图一下吧

初始界面和点击导航到Frame1和导航到Frame2的按钮：

  

点击黄色方块，然后上面又会跳出一个方块，不断点击黄色方块，上面的方块的颜色会不断变化：

      

点击黄色方块下面的区域，又会出现一个方块，然后不断点击这个方块，自身的颜色也会不断变化：