背水一戰 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
[源碼下載]