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

[源码下载]

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

作者：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
[源码下载]