AI 助理
备案控制台
开发者社区 云原生 文章 正文

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

2014-03-08 788
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition（过渡效果）[源码下载] 重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition（过渡效果） 作者：webabcd介绍重新想象 Win...
原文: 重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition（过渡效果）

[源码下载]


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



作者：webabcd


介绍
重新想象 Windows 8 Store Apps 之 动画

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



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

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Summary"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

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

            <!--
                UIElement.Transitions - 指定 UIElement 的过渡动画
            
                <Rectangle>
                    <Rectangle.Transitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </Rectangle.Transitions>
                </Rectangle>
            -->


            <!--
                Panel.ChildrenTransitions - 指定 Panel 的子元素们的过渡动画
            
                <WrapGrid>
                    <WrapGrid.ChildrenTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </WrapGrid.ChildrenTransitions>
                </WrapGrid>
            -->


            <!--
                ItemsControl.ItemContainerTransitions - 指定 ItemsControl 的项容器的过渡动画
            
                <ItemsControl>
                    <ItemsControl.ItemContainerTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </ItemsControl.ItemContainerTransitions>
                </ItemsControl>
            -->


            <!--
                ContentControl.ContentTransitions - 指定 ContentControl 的过渡动画
            
                <ContentControl>
                    <ContentControl.ContentTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </ContentControl.ContentTransitions>
                </ContentControl>
            -->
            
        </StackPanel>
    </Grid>
</Page>


2、演示 EntranceThemeTransition
Animation/ThemeTransition/Entrance.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Entrance"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">
            
            <!--
                EntranceThemeTransition - 页面间跳转时的过渡效果
                    FromHorizontalOffset - 初始位置的水平偏移量
                    FromVerticalOffset - 初始位置的垂直偏移量
                    IsStaggeringEnabled - 当包含多个子元素时，是否需要错开呈现它们
            -->
            <Frame Name="frame" Width="400" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Frame.ContentTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition IsStaggeringEnabled="False" />
                    </TransitionCollection>
                </Frame.ContentTransitions>
            </Frame>

            <Button Name="btnGotoFrame1" Content="导航至 Frame1" Click="btnGotoFrame1_Click_1" Margin="0 10 0 0" />
            <Button Name="btnGotoFrame2" Content="导航至 Frame2" Click="btnGotoFrame2_Click_1" Margin="0 10 0 0" />

            <ItemsControl x:Name="itemsControl" Margin="0 10 0 0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid>
                            <WrapGrid.ChildrenTransitions>
                                <TransitionCollection>
                                    <EntranceThemeTransition IsStaggeringEnabled="True" />
                                </TransitionCollection>
                            </WrapGrid.ChildrenTransitions>
                        </WrapGrid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Items>
                    <Rectangle Width="100" Height="100" Fill="Red" />
                    <Rectangle Width="100" Height="100" Fill="Green" />
                    <Rectangle Width="100" Height="100" Fill="Blue" />
                </ItemsControl.Items>
                <ItemsControl.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Orange" BorderThickness="1">
                            <ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </ItemsControl.Template>
            </ItemsControl>
            
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Entrance.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Entrance : Page
    {
        public Entrance()
        {
            this.InitializeComponent();
        }

        private void btnGotoFrame1_Click_1(object sender, RoutedEventArgs e)
        {
            frame.Navigate(typeof(XamlDemo.Controls.Frame.Frame1));
        }

        private void btnGotoFrame2_Click_1(object sender, RoutedEventArgs e)
        {
            frame.Navigate(typeof(XamlDemo.Controls.Frame.Frame2));
        }
    }
}


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

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Content"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <!--
                ContentThemeTransition - 内容改变时的过渡效果
                    FromHorizontalOffset - 初始位置的水平偏移量
                    FromVerticalOffset - 初始位置的垂直偏移量
            -->
            <ContentControl Name="contentControl" PointerPressed="contentControl_PointerPressed_1">
                <ContentControl.ContentTransitions>
                    <TransitionCollection>
                        <ContentThemeTransition />
                    </TransitionCollection>
                </ContentControl.ContentTransitions>
                <ContentControl.Content>
                    <Rectangle Height="200" Width="200" Fill="Orange" />
                </ContentControl.Content>
            </ContentControl>


            <!--
                如果要在 ScrollViewer 或其他继承了 ContentControl 的控件中应用 ContentThemeTransition 的话，应该用如下方式
            -->
            <ScrollViewer Name="scrollViewer" Margin="0 10 0 0" PointerPressed="scrollViewer_PointerPressed_1">
                <ContentControl Content="{Binding}">
                    <ContentControl.ContentTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <Rectangle Height="200" Width="200" Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" />
                            </StackPanel>
                        </DataTemplate>
                    </ContentControl.ContentTemplate>
                    <ContentControl.ContentTransitions>
                        <TransitionCollection>
                            <ContentThemeTransition/>
                        </TransitionCollection>
                    </ContentControl.ContentTransitions>
                </ContentControl>
            </ScrollViewer>
            
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Content.xaml.cs

using System;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Content : Page
    {
        public Content()
        {
            this.InitializeComponent();
        }

        // 改变 ContentControl 的内容
        private void contentControl_PointerPressed_1(object sender, PointerRoutedEventArgs e)
        {
            Rectangle rectangle = new Rectangle();
            Random random = new Random();

            rectangle.Height = 200;
            rectangle.Width = 200;
            rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));

            contentControl.Content = rectangle;
        }

        // 绑定最新的数据到 ScrollViewer
        private void scrollViewer_PointerPressed_1(object sender, PointerRoutedEventArgs e)
        {
            Random random = new Random();
            scrollViewer.DataContext = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));
        }
    }
}


4、演示 RepositionThemeTransition
Animation/ThemeTransition/Reposition.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Reposition"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <Button Name="btnMove" Content="移动 rectangle" Click="btnMove_Click_1" Margin="0 0 0 10" />

            <!--
                RepositionThemeTransition - 位置改变时的过渡效果
            -->
            <Rectangle Name="rectangle" Width="400" Height="100" Fill="Orange" HorizontalAlignment="Left">
                <Rectangle.Transitions>
                    <TransitionCollection>
                        <RepositionThemeTransition />
                    </TransitionCollection>
                </Rectangle.Transitions>
            </Rectangle>

        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Reposition.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Reposition : Page
    {
        public Reposition()
        {
            this.InitializeComponent();
        }

        // 改变矩形的位置
        private void btnMove_Click_1(object sender, RoutedEventArgs e)
        {
            if (rectangle.Margin == new Thickness(0))
                rectangle.Margin = new Thickness(100);
            else
                rectangle.Margin = new Thickness(0);
        }
    }
}


5、演示 PopupThemeTransition
Animation/ThemeTransition/Popup.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Popup"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <!--
                PopupThemeTransition - 弹出时的过渡效果
                    FromHorizontalOffset - 初始位置的水平偏移量
                    FromVerticalOffset - 初始位置的垂直偏移量
            -->
            <Popup Name="popup" HorizontalOffset="200" VerticalOffset="10" IsLightDismissEnabled="True">
                <Popup.Child>
                    <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="200">
                        <TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
                    </Border>
                </Popup.Child>
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <PopupThemeTransition />
                    </TransitionCollection>
                </Popup.ChildTransitions>
            </Popup>

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

        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Popup.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Popup : Page
    {
        public Popup()
        {
            this.InitializeComponent();
        }

        // 显示 Popup
        private void btnPopup_Click_1(object sender, RoutedEventArgs e)
        {
            if (!popup.IsOpen)
                popup.IsOpen = true;
        }
    }
}


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

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.AddDelete"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <Button x:Name="btnAddItem" Content="Add Item" Click="btnAddItem_Click_1"/>
            <Button x:Name="btnDeleteItem" Content="Delete Item" Click="btnDeleteItem_Click_1" Margin="0 10 0 0" />

            <!--
                AddDeleteThemeTransition - 添加项或删除项时的过渡效果
            -->
            <ItemsControl x:Name="itemsControl" Margin="0 10 0 0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid>
                            <WrapGrid.ChildrenTransitions>
                                <TransitionCollection>
                                    <AddDeleteThemeTransition />
                                </TransitionCollection>
                            </WrapGrid.ChildrenTransitions>
                        </WrapGrid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Items>
                    <Rectangle Width="100" Height="100" Fill="Red" />
                    <Rectangle Width="100" Height="100" Fill="Green" />
                    <Rectangle Width="100" Height="100" Fill="Blue" />
                </ItemsControl.Items>
                <ItemsControl.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Orange" BorderThickness="1">
                            <ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </ItemsControl.Template>
            </ItemsControl>

        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/AddDelete.xaml.cs

using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class AddDelete : Page
    {
        public AddDelete()
        {
            this.InitializeComponent();
        }

        // 添加项
        private void btnAddItem_Click_1(object sender, RoutedEventArgs e)
        {
            Rectangle rectangle = new Rectangle();
            Random random = new Random();

            rectangle.Height = 100;
            rectangle.Width = 100;
            rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));

            itemsControl.Items.Add(rectangle);
        }

        // 删除项
        private void btnDeleteItem_Click_1(object sender, RoutedEventArgs e)
        {
            if (itemsControl.Items.Count > 0)
                itemsControl.Items.RemoveAt(itemsControl.Items.Count - 1);
        }
    }
}


7、演示 ReorderThemeTransition
Animation/ThemeTransition/Reorder.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Reorder"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

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

            <!--
                ReorderThemeTransition - 对集合中的元素重新排序时的过渡效果
            -->
            <ItemsControl x:Name="itemsControl" Margin="0 10 0 0">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid>
                            <WrapGrid.ChildrenTransitions>
                                <TransitionCollection>
                                    <ReorderThemeTransition />
                                </TransitionCollection>
                            </WrapGrid.ChildrenTransitions>
                        </WrapGrid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Items>
                    <Rectangle Width="100" Height="100" Fill="Red" />
                    <Rectangle Width="100" Height="100" Fill="Green" />
                    <Rectangle Width="100" Height="100" Fill="Blue" />
                </ItemsControl.Items>
                <ItemsControl.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Orange" BorderThickness="1">
                            <ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </ItemsControl.Template>
            </ItemsControl>

        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Reorder.xaml.cs

using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Reorder : Page
    {
        public Reorder()
        {
            this.InitializeComponent();
        }

        // 在集合的位置 2 处添加新的元素，以达到重新排序的效果
        private void btnAddItem_Click_1(object sender, RoutedEventArgs e)
        {
            Rectangle rectangle = new Rectangle();
            Random random = new Random();

            rectangle.Height = 100;
            rectangle.Width = 100;
            rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));

            itemsControl.Items.Insert(2, rectangle);
        }
    }
}


8、演示 PaneThemeTransition
Animation/ThemeTransition/Pane.xaml

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.Pane"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <!--
                PaneThemeTransition - 基于边缘的较大 UI 滑入和滑出时的过渡效果
                    Edge - 边缘（Left, Top, Right, Bottom）
            -->
            <Popup Name="popup" HorizontalOffset="-120" VerticalOffset="-140" IsLightDismissEnabled="True">
                <Popup.Child>
                    <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="800" Height="200">
                        <TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
                    </Border>
                </Popup.Child>
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <PaneThemeTransition Edge="Top" />
                    </TransitionCollection>
                </Popup.ChildTransitions>
            </Popup>

            <Button Name="btnShowPane" Content="显示 Pane" Click="btnShowPane_Click_1" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/Pane.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class Pane : Page
    {
        public Pane()
        {
            this.InitializeComponent();
        }

        // 显示 Pane
        private void btnShowPane_Click_1(object sender, RoutedEventArgs e)
        {
            if (!popup.IsOpen)
                popup.IsOpen = true;
        }
    }
}


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

<Page
    x:Class="XamlDemo.Animation.ThemeTransition.EdgeUI"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Animation.ThemeTransition"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <!--
                EdgeUIThemeTransition - 基于边缘的较小 UI 滑入和滑出时的过渡效果
                    Edge - 边缘（Left, Top, Right, Bottom）
            -->
            <Popup Name="popup" HorizontalOffset="-120" VerticalOffset="-140" IsLightDismissEnabled="True">
                <Popup.Child>
                    <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="50">
                        <TextBlock Text="我是 Popup" FontSize="24.667" HorizontalAlignment="Center" />
                    </Border>
                </Popup.Child>
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <EdgeUIThemeTransition Edge="Top" />
                    </TransitionCollection>
                </Popup.ChildTransitions>
            </Popup>

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

        </StackPanel>
    </Grid>
</Page>

Animation/ThemeTransition/EdgeUI.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlDemo.Animation.ThemeTransition
{
    public sealed partial class EdgeUI : Page
    {
        public EdgeUI()
        {
            this.InitializeComponent();
        }

        // 显示 EdgeUI
        private void btnShowEdgeUI_Click_1(object sender, RoutedEventArgs e)
        {
            if (!popup.IsOpen)
                popup.IsOpen = true;
        }
    }
}



OK
[源码下载]

文章标签：
Windows
容器
关键词：
APP Windows
Windows Store
Windows动画
APP Store
APP动画
杰克.陈
目录
相关文章
路边两盏灯
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
路边两盏灯
138 0
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
路边两盏灯
|
10月前
|
C# Windows
【Azure App Service】在App Service for Windows上验证能占用的内存最大值
根据以上测验，当使用App Service内存没有达到预期的值，且应用异常日志出现OutOfMemory时，就需要检查Platform的设置是否位64bit。
路边两盏灯
160 11
路边两盏灯
|
Java 应用服务中间件 开发工具
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
路边两盏灯
133 2
路边两盏灯
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
路边两盏灯
114 2
路边两盏灯
|
PHP Windows
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed because an internal server error has occurred. 错误
路边两盏灯
209 1
路边两盏灯
|
PHP 开发工具 git
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
【Azure 应用服务】在 App Service for Windows 中自定义 PHP 版本的方法
路边两盏灯
118 1
路边两盏灯
|
网络安全 API 数据安全/隐私保护
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
【Azure App Service】.NET代码实验App Service应用中获取TLS/SSL 证书 (App Service Windows)
路边两盏灯
114 0
路边两盏灯
|
Shell PHP Windows
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
路边两盏灯
109 0
路边两盏灯
|
存储 Linux Windows
【应用服务 App Service】App Service For Windows 如何挂载Storage Account File Share 示例
【应用服务 App Service】App Service For Windows 如何挂载Storage Account File Share 示例
路边两盏灯
113 0
路边两盏灯
|
应用服务中间件 nginx Windows
【Azure 应用服务】在App Service for Windows中实现反向代理
【Azure 应用服务】在App Service for Windows中实现反向代理
路边两盏灯
131 0

热门文章

最新文章

  • 1
    驱动业务决策：基于Python的App用户行为分析与可视化方案
  • 2
    windows 11 系统安装教程，包括U盘和本机安装，附windows 11各版本ISO镜像
  • 3
    VirtualBox 7.2.0 (macOS, Linux, Windows) - 开源跨平台虚拟化软件
  • 4
    双系统必备：Ubuntu自动挂载Windows分区
  • 5
    Tenable Nessus 10.9.3 (macOS, Linux, Windows) - 漏洞评估解决方案
  • 6
    Nexpose 8.18.0 for Linux & Windows - 漏洞扫描
  • 7
    【教程】将自己的APP部署到阿里云
  • 8
    APP支付如何在沙箱中联调
  • 9
    win8：metro app UI 设计
  • 10
    iOSApp隐私设置流程(App Store Connect)
  • 1
    Windows就是Linux：WSL带来全新Linux开发体验
    947
  • 2
    electron程序运行在某些 windows 上白屏
    361
  • 3
    windows配置supervisor实现nginx自启
    318
  • 4
    [windows]远程桌面失败提示CredSSP加密修正
    2269
  • 5
    Windows查找监听端口对应的进程及其路径
    289
  • 6
    Windows安装hexo并配置nginx
    153
  • 7
    WPF在.NET9中的重大更新：Windows 11 主题
    201
  • 8
    【开源推荐】windows窗口管理器
    299
  • 9
    解锁QtCreator跨界神技！Windows下轻松驾驭OpenCV动态库，让你的跨平台开发如虎添翼，秒变视觉编程大师！
    631
  • 10
    从Windows到Linux，Python系统调用如何让代码飞翔🚀
    136

    • 相关课程

    更多
  • 互联网安全-移动APP漏洞风险与解决方案

    • 相关电子书

    更多
  • 阿里云轻APP - BOAT -帮助企业低成本构建高性能 APP
  • TAKING WINDOWS 10 KERNEL
  • ECS运维指南之Windows系统诊断
    • 下一篇
    蛋白质语言模型 ProGen：在实验室合成由 AI 预测的蛋白质