背水一战 Windows 10 (42) - 控件（导航类）: Frame 动画

Posted 2020-10-07

原文:背水一战 Windows 10 (42) - 控件（导航类）: Frame 动画

[源码下载]

背水一战 Windows 10 (42) - 控件（导航类）: Frame 动画

作者：webabcd


介绍
背水一战 Windows 10 之 控件（导航类）

• Frame 动画

示例
Animation/NavigationTransitionInfo/Demo.xaml

<Page
    x:Class="Windows10.Animation.NavigationTransitionInfo.Demo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Animation.NavigationTransitionInfo"
    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">

            <!--
                演示如何在通过 bool Navigate(Type sourcePageType, object parameter, NavigationTransitionInfo infoOverride) 导航时，指定 NavigationTransitionInfo 动画效果
                通过 GoBack(NavigationTransitionInfo transitionInfoOverride) 导航时指定 NavigationTransitionInfo 动画效果也是同理
                导航目标页先要为 Page 指定 NavigationThemeTransition 过渡效果，然后导航目标页会根据导航时的 NavigationTransitionInfo 类型的参数来设置其 NavigationThemeTransition 的 DefaultNavigationTransitionInfo 属性
            -->
            <StackPanel>
                <Button Name="btnGotoSlideNavigationTransitionInfo" Margin="5" Content="goto SlideNavigationTransitionInfo" Click="btnGotoSlideNavigationTransitionInfo_Click" />

                <Button Name="btnGotoSuppressNavigationTransitionInfo" Margin="5" Content="goto SuppressNavigationTransitionInfo" Click="btnGotoSuppressNavigationTransitionInfo_Click" />

                <Button Name="btnGotoDrillInNavigationTransitionInfo" Margin="5" Content="goto DrillInNavigationTransitionInfo" Click="btnGotoDrillInNavigationTransitionInfo_Click" />

                <Button Name="btnGotoContinuumNavigationTransitionInfo" Margin="5" Content="goto ContinuumNavigationTransitionInfo" Click="btnGotoContinuumNavigationTransitionInfo_Click" />

                <Button Name="btnGotoEntranceNavigationTransitionInfo" Margin="5" Content="goto EntranceNavigationTransitionInfo" Click="btnGotoEntranceNavigationTransitionInfo_Click" />

                <Button Name="btnGotoCommonNavigationTransitionInfo" Margin="5" Content="goto CommonNavigationTransitionInfo" Click="btnGotoCommonNavigationTransitionInfo_Click" />
            </StackPanel>



            <!--
                演示如何在导航目标页设置 NavigationTransitionInfo 动画效果
            -->
            <StackPanel Margin="0 30 0 0">
                <Button Name="btnGotoSlideNavigationTransitionInfo2" Margin="5" Content="goto SlideNavigationTransitionInfo" Click="btnGotoSlideNavigationTransitionInfo_Click2" />

                <Button Name="btnGotoSuppressNavigationTransitionInfo2" Margin="5" Content="goto SuppressNavigationTransitionInfo" Click="btnGotoSuppressNavigationTransitionInfo_Click2" />

                <Button Name="btnGotoDrillInNavigationTransitionInfo2" Margin="5" Content="goto DrillInNavigationTransitionInfo" Click="btnGotoDrillInNavigationTransitionInfo_Click2" />

                <Button Name="btnGotoContinuumNavigationTransitionInfo2" Margin="5" Content="goto ContinuumNavigationTransitionInfo" Click="btnGotoContinuumNavigationTransitionInfo_Click2" />

                <Button Name="btnGotoEntranceNavigationTransitionInfo2" Margin="5" Content="goto EntranceNavigationTransitionInfo" Click="btnGotoEntranceNavigationTransitionInfo_Click2" />

                <Button Name="btnGotoCommonNavigationTransitionInfo2" Margin="5" Content="goto CommonNavigationTransitionInfo" Click="btnGotoCommonNavigationTransitionInfo_Click2" />
            </StackPanel>

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

Animation/NavigationTransitionInfo/Demo.xaml.cs

/*
 * 本例用于演示如何使用 NavigationThemeTransition 过渡效果
 */

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;

namespace Windows10.Animation.NavigationTransitionInfo
{
    public sealed partial class Demo : Page
    {
        public Demo()
        {
            this.InitializeComponent();
        }



        // 以下演示如何在通过 bool Navigate(Type sourcePageType, object parameter, NavigationTransitionInfo infoOverride) 导航时，指定 NavigationTransitionInfo 动画效果
        // 通过 GoBack(NavigationTransitionInfo transitionInfoOverride) 导航时指定 NavigationTransitionInfo 动画效果也是同理
        // 导航目标页先要为 Page 指定 NavigationThemeTransition 过渡效果，然后导航目标页会根据导航时的 NavigationTransitionInfo 类型的参数来设置其 NavigationThemeTransition 的 DefaultNavigationTransitionInfo 属性
        private void btnGotoSlideNavigationTransitionInfo_Click(object sender, RoutedEventArgs e)
        {
            SlideNavigationTransitionInfo slideTransition = new SlideNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), null, slideTransition);
        }

        private void btnGotoSuppressNavigationTransitionInfo_Click(object sender, RoutedEventArgs e)
        {
            SuppressNavigationTransitionInfo supressTransition = new SuppressNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), null, supressTransition);
        }

        private void btnGotoDrillInNavigationTransitionInfo_Click(object sender, RoutedEventArgs e)
        {
            DrillInNavigationTransitionInfo drillInTransition = new DrillInNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), null, drillInTransition);
        }

        private void btnGotoContinuumNavigationTransitionInfo_Click(object sender, RoutedEventArgs e)
        {
            ContinuumNavigationTransitionInfo continuumTransition = new ContinuumNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), null, continuumTransition);
        }

        private void btnGotoEntranceNavigationTransitionInfo_Click(object sender, RoutedEventArgs e)
        {
            EntranceNavigationTransitionInfo entranceTransition = new EntranceNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), null, entranceTransition);
        }

        private void btnGotoCommonNavigationTransitionInfo_Click(object sender, RoutedEventArgs e)
        {
            CommonNavigationTransitionInfo commonTransition = new CommonNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), null, commonTransition);
        }



        // 以下演示如何在导航目标页设置 NavigationTransitionInfo 动画效果
        private void btnGotoSlideNavigationTransitionInfo_Click2(object sender, RoutedEventArgs e)
        {
            SlideNavigationTransitionInfo slideTransition = new SlideNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), slideTransition);
        }

        private void btnGotoSuppressNavigationTransitionInfo_Click2(object sender, RoutedEventArgs e)
        {
            SuppressNavigationTransitionInfo supressTransition = new SuppressNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), supressTransition);
        }

        private void btnGotoDrillInNavigationTransitionInfo_Click2(object sender, RoutedEventArgs e)
        {
            DrillInNavigationTransitionInfo drillInTransition = new DrillInNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), drillInTransition);
        }

        private void btnGotoContinuumNavigationTransitionInfo_Click2(object sender, RoutedEventArgs e)
        {
            ContinuumNavigationTransitionInfo continuumTransition = new ContinuumNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), continuumTransition);
        }

        private void btnGotoEntranceNavigationTransitionInfo_Click2(object sender, RoutedEventArgs e)
        {
            EntranceNavigationTransitionInfo entranceTransition = new EntranceNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), entranceTransition);
        }

        private void btnGotoCommonNavigationTransitionInfo_Click2(object sender, RoutedEventArgs e)
        {
            CommonNavigationTransitionInfo commonTransition = new CommonNavigationTransitionInfo();
            this.Frame.Navigate(typeof(MyFrame), commonTransition);
        }
    }
}

Animation/NavigationTransitionInfo/MyFrame.xaml

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

    <!--
        NavigationThemeTransition - 页与页之间导航时的过渡效果
            DefaultNavigationTransitionInfo - 具体的过度效果（[ContentProperty(Name = "DefaultNavigationTransitionInfo")]）
                需要为 DefaultNavigationTransitionInfo 设置一个 NavigationTransitionInfo 类型的对象
                继承自 NavigationTransitionInfo 的有 SlideNavigationTransitionInfo, SuppressNavigationTransitionInfo, DrillInNavigationTransitionInfo, ContinuumNavigationTransitionInfo, EntranceNavigationTransitionInfo, CommonNavigationTransitionInfo
    -->

    <Page.Transitions>
        <TransitionCollection>
            <NavigationThemeTransition x:Name="navigationTransition">
                <!--
                <SlideNavigationTransitionInfo />
                <SuppressNavigationTransitionInfo />
                <DrillInNavigationTransitionInfo />
                <ContinuumNavigationTransitionInfo />
                <EntranceNavigationTransitionInfo />
                <CommonNavigationTransitionInfo />
                
                注：
                1、以上几种导航过渡效果均继承自 NavigationTransitionInfo，此处在指定 NavigationThemeTransition 的 DefaultNavigationTransitionInfo 时可以选择其一
                2、如果此处设置了 NavigationTransitionInfo，且外面导航过来时也指定了 NavigationTransitionInfo，则以外面导航过来的 NavigationTransitionInfo 为准
                3、如果需要外面导航过来时指定的 NavigationTransitionInfo 生效，这里需要先为 Page 设置好 NavigationThemeTransition 过渡效果（无此设置，则认为不启用 NavigationThemeTransition 过渡效果）
                -->
            </NavigationThemeTransition>
        </TransitionCollection>
    </Page.Transitions>

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

            <TextBlock Margin="5" TextWrapping="Wrap">
                <Run>Microsoft HoloLens全息眼镜由Microsoft 公司于北京时间2015年1月22日凌晨与Window10同时发布。</Run>
                <LineBreak />
                <Run>2015年6月15日，微软在E3游戏展之前的新闻发布会上展示更完整的现实增强版《Minecraft》。微软此次在咖啡桌和书架上展示了全息的Minecraft城堡，一名佩戴HoloLens的微软员工通过手势在游戏中进行操作。此外，微软还展示了两名玩家如何在同一个Minecraft世界中互动，以及HoloLens用户如何通过语音命令来完成控制。</Run>
                <LineBreak />
                <Run>HoloLens的另一个关键之处在于：微软没有打算为用户呈现一个完全不同的世界，而是将某些计算机生成的效果叠加于现实世界之上。用户仍然可以行走自如，随意与人交谈，全然不必担心撞到墙。</Run>
                <LineBreak />
                <Run>眼镜将会追踪你的移动和视线，进而生成适当的虚拟对象，通过光线投射到你的眼中。因为设备知道你的方位，你可以通过手势——目前只支持半空中抬起和放下手指点击——与虚拟3D对象交互。</Run>
                <LineBreak />
                <Run>有众多硬件帮助HoloLens实现栩栩如生的效果。各种传感器可以追踪你在室内的移动，然后透过层叠的彩色镜片创建出可以从不同角度交互的对象。想在厨房中央查看一辆虚拟摩托的另一侧？没问题，只有走到相应的一侧即可。</Run>
                <LineBreak />
                <Run>眼镜通过摄像头对室内物体进行观察，因此设备可以得知桌子、椅子和其他对象的方位，然后其可以在这些对象表面甚至里面投射3D图像。</Run>
            </TextBlock>
            
        </StackPanel>
    </Grid>
</Page>

Animation/NavigationTransitionInfo/MyFrame.xaml.cs

/*
 * 本例用于演示如何使用 NavigationThemeTransition 过渡效果
 */

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

namespace Windows10.Animation.NavigationTransitionInfo
{
    public sealed partial class MyFrame : Page
    {
        public MyFrame()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            /*
             * 根据导航进来的参数来决定
             * <Page.Transitions>
             *     <TransitionCollection>
             *         <NavigationThemeTransition x:Name="navigationTransition" />
             *     </TransitionCollection>
             * </Page.Transitions>
             * 使用何种 NavigationTransitionInfo（即如何设置 NavigationThemeTransition 的 DefaultNavigationTransitionInfo 属性）
             */
            Windows.UI.Xaml.Media.Animation.NavigationTransitionInfo transition = e.Parameter as Windows.UI.Xaml.Media.Animation.NavigationTransitionInfo;
            if (transition != null)
                navigationTransition.DefaultNavigationTransitionInfo = transition;
        }
    }
}

OK
[源码下载]