动画: 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-.- ...

随机推荐

SQL——查询考试
一. 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...
javascript删除元素节点
1.删除元素父节点 function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentElem ...
usb驱动开发22之驱动生命线
我们总是很喜欢高潮,不是吗?那就好好对待她哦.我们来看一下linux中的高潮部分设备是怎么从Address进入Configured的. usb_set_configuration函数的代码就不贴了,可 ...
android中Camera setDisplayOrientation使用
在写相机相关应用的时候遇到捕获的画面方向和手机的方向不一致的问题,比如手机是竖着拿的,但是画面是横的,这是由于摄像头默认捕获的画面byte[]是根据横向来的,而你的应用是竖向的,解决办法是调用setD ...
Beta版本项目展示要求
项目评审的定在1月5日上午9:00在新主楼D225进行. 在Beta阶段项目评审会上, 每个团队有12分钟展示时间,10分钟问答和机动时间,我们的展示也不需要PPT,大家把要展现的东西写成博客(可以有 ...
更好的逐帧动画函数 — requestAnimationFrame 简介
本文将会简单讲讲 requestAnimationFrame 函数的用法,与 setTimeout/setInterval 的区别和联系,以及当标签页隐藏时 requestAnimationFrame ...
jQuery Ajax 处理 HttpStatus
今天同事碰到一个问题:当服务端Session失效后用ajax请求数据,页面端无法提示和执行跳转.我最先想到是,在后端用js输出一个跳转.发现输出没有效果,因为ajax是异步请求, 需要在success ...
CI(CodeIgniter)框架入门教程——第二课初始MVC
本文转载自:http://www.softeng.cn/?p=53 今天的主要内容是,使用CodeIgniter框架完整的MVC内容来做一个简单的计算器,通过这个计算器,让大家能够体会到我在第一节课中 ...
我做PHP，但是我要批判下整天唱衰.NET的淫
笔者每天都能看到月经贴-".NET已死"!!! 笔者之前一直在CSDN上面写博客,泡论坛,但是有约莫一年来着了发现CSDN上面的博客都没啥更新,CSDN首页推荐的一些文章也没啥新意 ...
Bootstrap系列 -- 42. 导航条中的按钮、文本和链接
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮na ...

动画: ThemeTransition（过渡效果）

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

随机推荐

热门专题