WP8.1的ThemeTransition(EntranceThemeTransition和ContentThemeTransition)

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

链接：Windows 8.1中的ThemeTransition

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

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

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

EntranceThemeTransition &＃8212;&＃8211;   页面间跳转时的过渡效果(本篇介绍)

ContentThemeTransition   &＃8212;&＃8211;    内容改变时的过渡效果(本篇介绍)

RepositionThemeTransition &＃8212;    位置改变时的过渡效果

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

AddDeleteThemeTransition &＃8212;   添加项或删除项时的过渡效果

ReorderThemeTransition  &＃8212;&＃8211;    对集合中的元素重新排序时的过渡效果

PaneThemeTransition   &＃8212;&＃8212;&＃8211;    基于边缘的较大 UI 滑入和滑出时的过渡效果

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

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

UIElement，如：Rectangle.Transitions

Panel子元素，如：Panel.ChildrenTransitions

ItemsControl的项容器，如：ItemsControl.ItemContainerTransitiions

ContentControl，如：ContentControl.ContentTransitions

对于EntranceThemeTransition和ContentThemeTransition的认识

a.FromHorizontalOffset &＃8212; 初始位置的水平偏移量

b.FromVerticalOffset &＃8212; 初始位置的垂直偏移量

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

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

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

XAML：

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}">














































































.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
{
///


/// 可用于自身或导航至 Frame 内部的空白页。
///

public sealed partial class ThemeTransitionUnion : Page
{
public ThemeTransitionUnion()
{
this.InitializeComponent();
}
///

/// 在此页将要在 Frame 中显示时进行调用。
///

/// 描述如何访问此页的事件数据。
/// 此参数通常用于配置页。
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void btnGotoFrame1_Click(object sender, RoutedEventArgs e)
{
Frame frame = SearchVisualTree(hubSection1);
frame.Navigate(typeof(Frame1));
}
private void btnGotoFrame2_Click(object sender, RoutedEventArgs e)
{
Frame frame = SearchVisualTree(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(hubSection2);
contentControl.COntent= rectangle;
}
private void ScrollViewer_PointerPressed(object sender, PointerRoutedEventArgs e)
{
Random random = new Random();
ScrollViewer scrollViewer = SearchVisualTree(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(DependencyObject tarElem) where T : DependencyObject
{
var count = VisualTreeHelper.GetChildrenCount(tarElem);
if (count == 0)
return null;
for (int i = 0; i {
var child = VisualTreeHelper.GetChild(tarElem, i);
if (child != null && child is T)
{
return (T)child;
}
else
{
var res = SearchVisualTree(child);
if (res != null)
{
return res;
}
}
}
return null;
}
}
}

运行截图：

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

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

  

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

      

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