介绍
背水一战 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（过渡效果）的更多相关文章

  1. 背水一战 Windows 10 (17) - 动画: ThemeTransition（过渡效果）

    [源码下载] 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果) 作者:webabcd 介绍背水一战 Windows 10 之 动画 ThemeTrans ...

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

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

  3. VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手

    1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...

  4. VUE3 之 使用标签实现动画与过渡效果（下） - 这个系列的教程通俗易懂，适合新手

    1. 概述 毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...

  5. 制作动画平滑过渡效果：《CSS3 Transition》

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  6. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  7. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  8. U3D 动画帧事件问题

    测试版本U3D5.4. 1,为一个模型导入外部动画.为动画剪辑attack在某帧添加event,事件为 public void OnAttackEvent(){},函数体不做任何事情. 结果发现,在动 ...

  9. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

随机推荐

  1. MySQL 基础语句的练习2

    CREATE TABLE student ( id INT, NAME ), Chinese FLOAT, English FLOAT, Math FLOAT ); ,,,); ,,,); ,,,); ...

  2. 类集-collection接口

    类集就是一个动态的对象数组,与一般的对象数组不同,类集的对象类容可以随意扩充. 1,对象数组使用的时候会存在一个长度的限制,那么类集是专门解决这种限制的.使用类集可以向数组增加任意多的数据. 2,对象 ...

  3. JPA, JNDI, OSGi

    JPA Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JNDI Java Naming and Di ...

  4. Java:对象的强、软、弱和虚引用

    1．对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有对象处于可触及(reachable)状态,程序才能使用它.从JDK ...

  5. HRV基础

    Source: Mostly from wiki. Heart rate variability (HRV,心率变异性) is the physiological phenomenon of vari ...

  6. 窗口 - dialog - 与后端交互

    与后端交互,一般需要提交表单数据,所以,这次渲染得dialog其实是一个<form> <form id="loginForm"> <table ali ...

  7. ISAPI_Rewrite中文手册

    参考:http://blog.csdn.net/fanxiaojie119/article/details/5353186 第一章:软件介绍ISAPI_Rewrite 是一款适用于IIS的功能强大的基 ...

  8. Spring 4.0.2 学习笔记(1) - 最基本的注入

    1. 添加maven支持 <dependency> <groupId>org.springframework</groupId> <artifactId> ...

  9. Theano3.3-练习之逻辑回归

    是官网上theano的逻辑回归的练习(http://deeplearning.net/tutorial/logreg.html#logreg)的讲解. Classifying MNIST digits ...

  10. SQL基础之XML

    1.XML数据类型 在SQL Server中xml数据类型可以用来保存xml文档,这个文档即可以是完整的xml文档和xml片段,这样开发者就可以像使用int数据类型一样来使用xml数据类型.不过xml ...