首页 / 软件开发 / .NET编程技术 / Windows 8 Store Apps学习（21） 动画: ThemeTransition（过渡效果）

Windows 8 Store Apps学习（21） 动画: ThemeTransition（过渡效果）2013-12-06 cnblogs webabcd介绍

重新想象 Windows 8 Store Apps 之 动画

ThemeTransition 的概述

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

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

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

PopupThemeTransition - 弹出时的过渡效果

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

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

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

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

示例

1、过渡效果的概述

Animation/ThemeTransition/Summary.xaml

<Pagex: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

<Pagex: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>