动画: ThemeTransition（过渡效果）

介绍
背水一战 Windows 10 之动画

ThemeTransition 的概述
EntranceThemeTransition - 页面间跳转时的过渡效果
ContentThemeTransition - 内容改变时的过渡效果
RepositionThemeTransition - 位置改变时的过渡效果
PopupThemeTransition - 弹出时的过渡效果
AddDeleteThemeTransition - 添加项或删除项时的过渡效果
ReorderThemeTransition - 对集合中的元素重新排序时的过渡效果
PaneThemeTransition - 基于边缘的较大 UI 滑入和滑出时的过渡效果
EdgeUIThemeTransition - 基于边缘的较小 UI 滑入和滑出时的过渡

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

<Page

    x:Class="Windows10.Animation.ThemeTransition.Summary"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

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

            <!--

                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="Windows10.Animation.ThemeTransition.Entrance"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

            <!--

                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" Margin="0 10 0 0" />

            <Button Name="btnGotoFrame2" Content="导航至 Frame2" Click="btnGotoFrame2_Click" 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 Windows10.Animation.ThemeTransition

{

    public sealed partial class Entrance : Page

    {

        public Entrance()

        {

            this.InitializeComponent();

        }

        private void btnGotoFrame1_Click(object sender, RoutedEventArgs e)

        {

            frame.Navigate(typeof(Frame1));

        }

        private void btnGotoFrame2_Click(object sender, RoutedEventArgs e)

        {

            frame.Navigate(typeof(Frame2));

        }

    }

}

Animation/ThemeTransition/Frame1.xaml

<Page

    x:Class="Windows10.Animation.ThemeTransition.Frame1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

            <TextBlock Name="lblMsg" Text="我是 Frame1" />

        </StackPanel>

    </Grid>

</Page>

Animation/ThemeTransition/Frame2.xaml

<Page

    x:Class="Windows10.Animation.ThemeTransition.Frame2"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

            <TextBlock Name="lblMsg" Text="我是 Frame2" />

        </StackPanel>

    </Grid>

</Page>

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

<Page

    x:Class="Windows10.Animation.ThemeTransition.Content"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

            <!--

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

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

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

            -->

            <ContentControl Name="contentControl" PointerPressed="contentControl_PointerPressed">

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

                <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 Windows10.Animation.ThemeTransition

{

    public sealed partial class Content : Page

    {

        public Content()

        {

            this.InitializeComponent();

        }

        // 改变 ContentControl 的内容

        private void contentControl_PointerPressed(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(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="Windows10.Animation.ThemeTransition.Reposition"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

            <Button Name="btnMove" Content="移动 rectangle" Click="btnMove_Click" 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 Windows10.Animation.ThemeTransition

{

    public sealed partial class Reposition : Page

    {

        public Reposition()

        {

            this.InitializeComponent();

        }

        // 改变矩形的位置

        private void btnMove_Click(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="Windows10.Animation.ThemeTransition.Popup"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

            <!--

                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" HorizontalAlignment="Center" />

                    </Border>

                </Popup.Child>

                <Popup.ChildTransitions>

                    <TransitionCollection>

                        <PopupThemeTransition />

                    </TransitionCollection>

                </Popup.ChildTransitions>

            </Popup>

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

        </StackPanel>

    </Grid>

</Page>

Animation/ThemeTransition/Popup.xaml.cs

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace Windows10.Animation.ThemeTransition

{

    public sealed partial class Popup : Page

    {

        public Popup()

        {

            this.InitializeComponent();

        }

        // 显示 Popup

        private void btnPopup_Click(object sender, RoutedEventArgs e)

        {

            if (!popup.IsOpen)

                popup.IsOpen = true;

        }

    }

}

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

<Page

    x:Class="Windows10.Animation.ThemeTransition.AddDelete"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

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

            <Button x:Name="btnDeleteItem" Content="Delete Item" Click="btnDeleteItem_Click" 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 Windows10.Animation.ThemeTransition

{

    public sealed partial class AddDelete : Page

    {

        public AddDelete()

        {

            this.InitializeComponent();

        }

        // 添加项

        private void btnAddItem_Click(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(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="Windows10.Animation.ThemeTransition.Reorder"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

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

            <!--

                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 Windows10.Animation.ThemeTransition

{

    public sealed partial class Reorder : Page

    {

        public Reorder()

        {

            this.InitializeComponent();

        }

        // 在集合的位置 2 处添加新的元素，以达到重新排序的效果

        private void btnAddItem_Click(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="Windows10.Animation.ThemeTransition.Pane"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

            <!--

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

                    Edge - 边缘（Left, Top, Right, Bottom）

            -->

            <Popup Name="popup" HorizontalOffset="0" VerticalOffset="50" IsLightDismissEnabled="True">

                <Popup.Child>

                    <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="800" Height="200">

                        <TextBlock Text="我是 Popup" HorizontalAlignment="Center" />

                    </Border>

                </Popup.Child>

                <Popup.ChildTransitions>

                    <TransitionCollection>

                        <PaneThemeTransition Edge="Top" />

                    </TransitionCollection>

                </Popup.ChildTransitions>

            </Popup>

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

        </StackPanel>

    </Grid>

</Page>

Animation/ThemeTransition/Pane.xaml.cs

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace Windows10.Animation.ThemeTransition

{

    public sealed partial class Pane : Page

    {

        public Pane()

        {

            this.InitializeComponent();

        }

        // 显示 Pane

        private void btnShowPane_Click(object sender, RoutedEventArgs e)

        {

            if (!popup.IsOpen)

                popup.IsOpen = true;

        }

    }

}

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

<Page

    x:Class="Windows10.Animation.ThemeTransition.EdgeUI"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Windows10.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="10 0 10 10">

            <!--

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

                    Edge - 边缘（Left, Top, Right, Bottom）

            -->

            <Popup Name="popup" HorizontalOffset="0" VerticalOffset="50" IsLightDismissEnabled="True">

                <Popup.Child>

                    <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="50">

                        <TextBlock Text="我是 Popup" HorizontalAlignment="Center" />

                    </Border>

                </Popup.Child>

                <Popup.ChildTransitions>

                    <TransitionCollection>

                        <EdgeUIThemeTransition Edge="Top" />

                    </TransitionCollection>

                </Popup.ChildTransitions>

            </Popup>

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

        </StackPanel>

    </Grid>

</Page>

Animation/ThemeTransition/EdgeUI.xaml.cs

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace Windows10.Animation.ThemeTransition

{

    public sealed partial class EdgeUI : Page

    {

        public EdgeUI()

        {

            this.InitializeComponent();

        }

        // 显示 EdgeUI

        private void btnShowEdgeUI_Click(object sender, RoutedEventArgs e)

        {

            if (!popup.IsOpen)

                popup.IsOpen = true;

        }

    }

}

动画: ThemeTransition（过渡效果）的更多相关文章

背水一战 Windows 10 (17) - 动画: ThemeTransition（过渡效果）
[源码下载] 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果) 作者:webabcd 介绍背水一战 Windows 10 之动画 ThemeTrans ...
重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition（过渡效果）
原文:重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition(过渡效果) [源码下载] 重新想象 Windows 8 Store Apps (21) ...
VUE3 之使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手
1. 概述巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...
VUE3 之使用标签实现动画与过渡效果（下） - 这个系列的教程通俗易懂，适合新手
1. 概述毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...
制作动画平滑过渡效果：《CSS3 Transition》
W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
U3D 动画帧事件问题
测试版本U3D5.4. 1,为一个模型导入外部动画.为动画剪辑attack在某帧添加event,事件为 public void OnAttackEvent(){},函数体不做任何事情. 结果发现,在动 ...
CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

随机推荐

关于log4j的讨论
1.LoggersLoggers组件在此系统中被分为五个级别:DEBUG.INFO.WARN.ERROR和FATAL.这五个级别是有顺序的,DEBUG < INFO < WARN < ...
Debian 8(Jessie) 安装pptp-linux (PPTP客户端), 以及route命令说明
命令, 这里定义这个pptp的连接名称为hcoffice #安装 sudo apt-get install pptp-linux #用户名和口令 sudo vim /etc/ppp/chap-secr ...
jQuery获取文本节点之 text()/val()/html() 方法区别
1. 无参html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档,返回的是一个String 例子: html页面代码:<div><p&g ...
交叉验证 Cross validation
来源:CSDN: boat_lee 简单交叉验证 hold-out cross validation 从全部训练数据S中随机选择s个样例作为训练集training set,剩余的作为测试集testin ...
Java集合系列：-----------02Collection架构
出处:http://www.cnblogs.com/skywang12345/p/3308513.html 我们知道Collection是和Map架构平级的,我们看一下这个架构是怎样的. 他主要的两个 ...
Oracle 11g Express
Oracle 11g Express 安装和使用教程使用工具的第一步就是安装工具,配置环境!下面就Oracle 11g Express的安装和简单实用做一简介. 一．下载安装过程去oracle ...
Linux 守护进程三
.打开telnet工具,登录服务器,登录校验成功以后, linux服务器会在终端和服务器之间,建立一个会话期session .在这个会话期中,默认启动一个shell程序 .在会话期中有n个进程组 sh ...
noi题库（noi.openjudge.cn） 1.9编程基础之顺序查找T06——T15
T06 笨小猴描述笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设maxn是单词 ...
python数字图像处理（17）：边缘与轮廓
在前面的python数字图像处理(10):图像简单滤波中,我们已经讲解了很多算子用来检测边缘,其中用得最多的canny算子边缘检测. 本篇我们讲解一些其它方法来检测轮廓. 1.查找轮廓(find_c ...
Windjs应用
一个异步的js类库,应用价值不大,所以代码也没在维护了.在做h5特效或者游戏动画方面有点用处. $await是Windjs的核心api.具体可以check 浅谈Jscex的$await语义及异步任务模 ...

动画: ThemeTransition（过渡效果）

动画: ThemeTransition（过渡效果）的更多相关文章

随机推荐

热门专题