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

原文:背水一战 Windows 10 (42) - 控件（导航类）: Frame 动画[源码下载]

[align=center]背水一战 Windows 10 (42) - 控件（导航类）: Frame 动画[/align]

作者：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
[源码下载]