背水一战 Windows 10 (17) - 动画: 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 = ;

            rectangle.Width = ;

            rectangle.Fill = new SolidColorBrush(Color.FromArgb(, (byte)random.Next(, ), (byte)random.Next(, ), (byte)random.Next(, )));

            contentControl.Content = rectangle;

        }

        // 绑定最新的数据到 ScrollViewer

        private void scrollViewer_PointerPressed(object sender, PointerRoutedEventArgs e)

        {

            Random random = new Random();

            scrollViewer.DataContext = new SolidColorBrush(Color.FromArgb(, (byte)random.Next(, ), (byte)random.Next(, ), (byte)random.Next(, )));

        }

    }

}

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())

                rectangle.Margin = new Thickness();

            else

                rectangle.Margin = new Thickness();

        }

    }

}

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 = ;

            rectangle.Width = ;

            rectangle.Fill = new SolidColorBrush(Color.FromArgb(, (byte)random.Next(, ), (byte)random.Next(, ), (byte)random.Next(, )));

            itemsControl.Items.Add(rectangle);

        }

        // 删除项

        private void btnDeleteItem_Click(object sender, RoutedEventArgs e)

        {

            if (itemsControl.Items.Count > )

                itemsControl.Items.RemoveAt(itemsControl.Items.Count - );

        }

    }

}

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 = ;

            rectangle.Width = ;

            rectangle.Fill = new SolidColorBrush(Color.FromArgb(, (byte)random.Next(, ), (byte)random.Next(, ), (byte)random.Next(, )));

            itemsControl.Items.Insert(, 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;

        }

    }

}

OK
[源码下载]

背水一战 Windows 10 (17) - 动画: ThemeTransition（过渡效果）的更多相关文章

背水一战 Windows 10 (16) - 动画: ThemeAnimation（主题动画）
[源码下载] 背水一战 Windows 10 (16) - 动画: ThemeAnimation(主题动画) 作者:webabcd 介绍背水一战 Windows 10 之动画 PopInThemeA ...
背水一战 Windows 10 (15) - 动画: 缓动动画
[源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画作者:webabcd 介绍背水一战 Windows 10 之动画缓动动画 - easing 示例演示缓动(easing ...
背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画
[源码下载] 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画作者:webabcd 介绍背水一战 Windows 10 之动画线性动画 - ColorAnimatio ...
背水一战 Windows 10 (42) - 控件（导航类）: Frame 动画
[源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画作者:webabcd 介绍背水一战 Windows 10 之控件(导航类) Frame 动画示例An ...
背水一战 Windows 10 (111) - 通知（Tile）: secondary tile 模板之图片, secondary tile 模板之分组
[源码下载] 背水一战 Windows 10 (111) - 通知(Tile): secondary tile 模板之图片, secondary tile 模板之分组作者:webabcd 介绍背水一 ...
背水一战 Windows 10 (41) - 控件（导航类）: Frame
[源码下载] 背水一战 Windows 10 (41) - 控件(导航类): Frame 作者:webabcd 介绍背水一战 Windows 10 之控件(导航类) Frame 示例Controls ...
背水一战 Windows 10 (52) - 控件（集合类）: ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter
[源码下载] 背水一战 Windows 10 (52) - 控件(集合类): ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter 作者:weba ...
背水一战 Windows 10 (36) - 控件（弹出类）: ToolTip, Popup, PopupMenu
[源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之控件(弹 ...
背水一战 Windows 10 (29) - 控件（文本类）: RichTextBlock, RichTextBlockOverflow, RichEditBox
[源码下载] 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox 作者:webabcd ...

随机推荐

再看Ajax
再回顾Ajax相关的内容,再次梳理学习还是很有必要的,尤其是实际的开发中,ajax更是必不可少,仔细学习以便避免不必要的错误. 文章导读: --1.使用XMLHttpRequest---------- ...
不要对外公开泛型List成员
最近在阅读Framework Design Guidelines,本着现学现用的原则,于是就用FxCop工具对代码进行规范性检查时,发现了很多问题,其中包括命名以及一些设计上的规范. 其中,Do no ...
vmware 安装xp 流水账
1. 分区 PQ分区.1个区,C盘,NTFS. 2. 安装XP 进入ghost,不要选择一键. 然后fromImage, d:\xxx\GHO
JavaScript学习笔记之Array
数组的定义: 1,var arr=new Array(); -->数组是特殊的对象,typeOf的返回值是object arr[0] arr[1] ... 2,var arr=new ...
Android开发学习之路-Android Studio开发小技巧
上一次发过了一个介绍Studio的,这里再发一个补充下. 我们都知道,Android Studio的功能是非常强大的,也是很智能的.如果有人告诉你学Android开发要用命令行,你可以告诉他Andro ...
ASP.NET列表信息以Excel形式导出
1.从数据查出数据扔进table中: private DataTable getTable() { var dbHelper = applyBLL.CreateDataBase("VISAd ...
获取Linux主机的CPU、内存、主板、BIOS的信息(Centos)
#!/usr/bin/env python #coding:utf-8 import subprocess import re def Cmd_Exec(cmd): ''' 执行获取信息命令 :par ...
jsdoc
一.javascript注释规范我们在编写javascript文件的时候,一般会添加一些注释.例如一些文件.类.方法和属性都应该用合适的标记和类型进行注释.这里不但方便我们的阅读,也能养成一个好的习 ...
.net 网络编程
1.首先说下计算机网络中的TCP/IP参考模型 TCP/IP把网络分为5层,每一层负责完成不同的功能 1)应用层:传输报文,提供各种网络应用,有FTP.SMTP.HTTP等协议 2)运输层:传输报文段 ...
LINQ系列：Linq to Object串联操作符
串联是一个将两个对象联接在一起的过程.在LINQ中,串联操作将两个集合合并成一个集合,通过Concat操作符实现. Concat 1>. 原型定义 public static IQueryabl ...

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

背水一战 Windows 10 (17) - 动画: ThemeTransition（过渡效果）的更多相关文章

随机推荐

热门专题