原文:
背水一战 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
[源码下载]
