重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition（过渡效果）

原文:重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition（过渡效果）[源码下载]

[align=center]重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition（过渡效果）[/align]

作者：webabcd

介绍
重新想象 Windows 8 Store Apps 之 动画

ThemeTransition 的概述

EntranceThemeTransition - 页面间跳转时的过渡效果

ContentThemeTransition - 内容改变时的过渡效果

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

PopupThemeTransition - 弹出时的过渡效果

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

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

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

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

示例
1、过渡效果的概述
Animation/ThemeTransition/Summary.xaml

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

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<TextBlock Text="请参见本 xaml 中的注释" FontSize="14.667" />

<!--
UIElement.Transitions - 指定 UIElement 的过渡动画

<Rectangle>
<Rectangle.Transitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Rectangle.Transitions>
</Rectangle>
-->

<!--
Panel.ChildrenTransitions - 指定 Panel 的子元素们的过渡动画

<WrapGrid>
<WrapGrid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
-->

<!--
ItemsControl.ItemContainerTransitions - 指定 ItemsControl 的项容器的过渡动画

<ItemsControl>
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
</ItemsControl>
-->

<!--
ContentControl.ContentTransitions - 指定 ContentControl 的过渡动画

<ContentControl>
<ContentControl.ContentTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</ContentControl.ContentTransitions>
</ContentControl>
-->

</StackPanel>
</Grid>
</Page>

2、演示 EntranceThemeTransition
Animation/ThemeTransition/Entrance.xaml

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

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<!--
EntranceThemeTransition - 页面间跳转时的过渡效果
FromHorizontalOffset - 初始位置的水平偏移量
FromVerticalOffset - 初始位置的垂直偏移量
IsStaggeringEnabled - 当包含多个子元素时，是否需要错开呈现它们
-->
<Frame Name="frame" Width="400" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top">
<Frame.ContentTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="False" />
</TransitionCollection>
</Frame.ContentTransitions>
</Frame>

<Button Name="btnGotoFrame1" Content="导航至 Frame1" Click="btnGotoFrame1_Click_1" Margin="0 10 0 0" />
<Button Name="btnGotoFrame2" Content="导航至 Frame2" Click="btnGotoFrame2_Click_1" Margin="0 10 0 0" />

<ItemsControl x:Name="itemsControl" Margin="0 10 0 0">
<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="Green" />
<Rectangle Width="100" Height="100" Fill="Blue" />
</ItemsControl.Items>
<ItemsControl.Template>
<ControlTemplate>
<Border BorderBrush="Orange" BorderThickness="1">
<ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>

</StackPanel>
</Grid>
</Page>

Animation/ThemeTransition/Entrance.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Entrance : Page
{
public Entrance()
{
this.InitializeComponent();
}

private void btnGotoFrame1_Click_1(object sender, RoutedEventArgs e)
{
frame.Navigate(typeof(XamlDemo.Controls.Frame.Frame1));
}

private void btnGotoFrame2_Click_1(object sender, RoutedEventArgs e)
{
frame.Navigate(typeof(XamlDemo.Controls.Frame.Frame2));
}
}
}

3、演示 ContentThemeTransition
Animation/ThemeTransition/Content.xaml

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

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<!--
ContentThemeTransition - 内容改变时的过渡效果
FromHorizontalOffset - 初始位置的水平偏移量
FromVerticalOffset - 初始位置的垂直偏移量
-->
<ContentControl Name="contentControl" PointerPressed="contentControl_PointerPressed_1">
<ContentControl.ContentTransitions>
<TransitionCollection>
<ContentThemeTransition />
</TransitionCollection>
</ContentControl.ContentTransitions>
<ContentControl.Content>
<Rectangle Height="200" Width="200" Fill="Orange" />
</ContentControl.Content>
</ContentControl>

<!--
如果要在 ScrollViewer 或其他继承了 ContentControl 的控件中应用 ContentThemeTransition 的话，应该用如下方式
-->
<ScrollViewer Name="scrollViewer" Margin="0 10 0 0" PointerPressed="scrollViewer_PointerPressed_1">
<ContentControl Content="{Binding}">
<ContentControl.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Rectangle Height="200" Width="200" Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" />
</StackPanel>
</DataTemplate>
</ContentControl.ContentTemplate>
<ContentControl.ContentTransitions>
<TransitionCollection>
<ContentThemeTransition/>
</TransitionCollection>
</ContentControl.ContentTransitions>
</ContentControl>
</ScrollViewer>

</StackPanel>
</Grid>
</Page>

Animation/ThemeTransition/Content.xaml.cs

using System;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Content : Page
{
public Content()
{
this.InitializeComponent();
}

// 改变 ContentControl 的内容
private void contentControl_PointerPressed_1(object sender, PointerRoutedEventArgs e)
{
Rectangle rectangle = new Rectangle();
Random random = new Random();

rectangle.Height = 200;
rectangle.Width = 200;
rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));

contentControl.Content = rectangle;
}

// 绑定最新的数据到 ScrollViewer
private void scrollViewer_PointerPressed_1(object sender, PointerRoutedEventArgs e)
{
Random random = new Random();
scrollViewer.DataContext = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));
}
}
}

4、演示 RepositionThemeTransition
Animation/ThemeTransition/Reposition.xaml

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

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<Button Name="btnMove" Content="移动 rectangle" Click="btnMove_Click_1" Margin="0 0 0 10" />

<!--
RepositionThemeTransition - 位置改变时的过渡效果
-->
<Rectangle Name="rectangle" Width="400" Height="100" Fill="Orange" HorizontalAlignment="Left">
<Rectangle.Transitions>
<TransitionCollection>
<RepositionThemeTransition />
</TransitionCollection>
</Rectangle.Transitions>
</Rectangle>

</StackPanel>
</Grid>
</Page>

Animation/ThemeTransition/Reposition.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Reposition : Page
{
public Reposition()
{
this.InitializeComponent();
}

// 改变矩形的位置
private void btnMove_Click_1(object sender, RoutedEventArgs e)
{
if (rectangle.Margin == new Thickness(0))
rectangle.Margin = new Thickness(100);
else
rectangle.Margin = new Thickness(0);
}
}
}

5、演示 PopupThemeTransition
Animation/ThemeTransition/Popup.xaml

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

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<!--
PopupThemeTransition - 弹出时的过渡效果
FromHorizontalOffset - 初始位置的水平偏移量
FromVerticalOffset - 初始位置的垂直偏移量
-->
<Popup Name="popup" HorizontalOffset="200" VerticalOffset="10" IsLightDismissEnabled="True">
<Popup.Child>
<Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="200">
<TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
</Border>
</Popup.Child>
<Popup.ChildTransitions>
<TransitionCollection>
<PopupThemeTransition />
</TransitionCollection>
</Popup.ChildTransitions>
</Popup>

<Button Name="btnPopup" Content="弹出 Popup" Click="btnPopup_Click_1" Margin="0 10 0 0" />

</StackPanel>
</Grid>
</Page>

Animation/ThemeTransition/Popup.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Popup : Page
{
public Popup()
{
this.InitializeComponent();
}

// 显示 Popup
private void btnPopup_Click_1(object sender, RoutedEventArgs e)
{
if (!popup.IsOpen)
popup.IsOpen = true;
}
}
}

6、演示 AddDeleteThemeTransition
Animation/ThemeTransition/AddDelete.xaml

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

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<Button x:Name="btnAddItem" Content="Add Item" Click="btnAddItem_Click_1"/>
<Button x:Name="btnDeleteItem" Content="Delete Item" Click="btnDeleteItem_Click_1" Margin="0 10 0 0" />

<!--
AddDeleteThemeTransition - 添加项或删除项时的过渡效果
-->
<ItemsControl x:Name="itemsControl" Margin="0 10 0 0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid>
<WrapGrid.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition />
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Items>
<Rectangle Width="100" Height="100" Fill="Red" />
<Rectangle Width="100" Height="100" Fill="Green" />
<Rectangle Width="100" Height="100" Fill="Blue" />
</ItemsControl.Items>
<ItemsControl.Template>
<ControlTemplate>
<Border BorderBrush="Orange" BorderThickness="1">
<ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>

</StackPanel>
</Grid>
</Page>

Animation/ThemeTransition/AddDelete.xaml.cs

using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class AddDelete : Page
{
public AddDelete()
{
this.InitializeComponent();
}

// 添加项
private void btnAddItem_Click_1(object sender, RoutedEventArgs e)
{
Rectangle rectangle = new Rectangle();
Random random = new Random();

rectangle.Height = 100;
rectangle.Width = 100;
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 btnDeleteItem_Click_1(object sender, RoutedEventArgs e)
{
if (itemsControl.Items.Count > 0)
itemsControl.Items.RemoveAt(itemsControl.Items.Count - 1);
}
}
}

7、演示 ReorderThemeTransition
Animation/ThemeTransition/Reorder.xaml

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

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<Button x:Name="btnAddItem" Content="Add Item" Click="btnAddItem_Click_1" />

<!--
ReorderThemeTransition - 对集合中的元素重新排序时的过渡效果
-->
<ItemsControl x:Name="itemsControl" Margin="0 10 0 0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid>
<WrapGrid.ChildrenTransitions>
<TransitionCollection>
<ReorderThemeTransition />
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Items>
<Rectangle Width="100" Height="100" Fill="Red" />
<Rectangle Width="100" Height="100" Fill="Green" />
<Rectangle Width="100" Height="100" Fill="Blue" />
</ItemsControl.Items>
<ItemsControl.Template>
<ControlTemplate>
<Border BorderBrush="Orange" BorderThickness="1">
<ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>

</StackPanel>
</Grid>
</Page>

Animation/ThemeTransition/Reorder.xaml.cs

using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Reorder : Page
{
public Reorder()
{
this.InitializeComponent();
}

// 在集合的位置 2 处添加新的元素，以达到重新排序的效果
private void btnAddItem_Click_1(object sender, RoutedEventArgs e)
{
Rectangle rectangle = new Rectangle();
Random random = new Random();

rectangle.Height = 100;
rectangle.Width = 100;
rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));

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

8、演示 PaneThemeTransition
Animation/ThemeTransition/Pane.xaml

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

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<!--
PaneThemeTransition - 基于边缘的较大 UI 滑入和滑出时的过渡效果
Edge - 边缘（Left, Top, Right, Bottom）
-->
<Popup Name="popup" HorizontalOffset="-120" VerticalOffset="-140" IsLightDismissEnabled="True">
<Popup.Child>
<Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="800" Height="200">
<TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
</Border>
</Popup.Child>
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Top" />
</TransitionCollection>
</Popup.ChildTransitions>
</Popup>

<Button Name="btnShowPane" Content="显示 Pane" Click="btnShowPane_Click_1" Margin="0 10 0 0" />

</StackPanel>
</Grid>
</Page>

Animation/ThemeTransition/Pane.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Pane : Page
{
public Pane()
{
this.InitializeComponent();
}

// 显示 Pane
private void btnShowPane_Click_1(object sender, RoutedEventArgs e)
{
if (!popup.IsOpen)
popup.IsOpen = true;
}
}
}

9、演示 EdgeUIThemeTransition
Animation/ThemeTransition/EdgeUI.xaml

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

<Grid Background="Transparent">
<StackPanel Margin="120 0 0 0">

<!--
EdgeUIThemeTransition - 基于边缘的较小 UI 滑入和滑出时的过渡效果
Edge - 边缘（Left, Top, Right, Bottom）
-->
<Popup Name="popup" HorizontalOffset="-120" VerticalOffset="-140" IsLightDismissEnabled="True">
<Popup.Child>
<Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="50">
<TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
</Border>
</Popup.Child>
<Popup.ChildTransitions>
<TransitionCollection>
<EdgeUIThemeTransition Edge="Top" />
</TransitionCollection>
</Popup.ChildTransitions>
</Popup>

<Button Name="btnShowEdgeUI" Content="显示 EdgeUI" Click="btnShowEdgeUI_Click_1" Margin="0 10 0 0" />

</StackPanel>
</Grid>
</Page>

Animation/ThemeTransition/EdgeUI.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class EdgeUI : Page
{
public EdgeUI()
{
this.InitializeComponent();
}

// 显示 EdgeUI
private void btnShowEdgeUI_Click_1(object sender, RoutedEventArgs e)
{
if (!popup.IsOpen)
popup.IsOpen = true;
}
}
}

OK
[源码下载]