重新想象 Windows 8.1 Store Apps (79) - 控件增強: MediaElement, Frame

[源碼下載]

重新想象 Windows 8.1 Store Apps (79) - 控件增強: MediaElement, Frame

作者：webabcd


介紹
重新想象 Windows 8.1 Store Apps 之控件增強

• MediaElement - 播放視頻或音頻的控件
• Frame - 框架控件，用於導航內容

示例
1、演示 MediaElement 的新特性
MediaElementDemo.xaml

<Page
    x:Class="Windows81.Controls.MediaElementDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows81.Controls"
    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">

            <!--
                MediaElement - 播放視頻或音頻的控件
                    AreTransportControlsEnabled - 是否顯示默認控制條
                    IsFullWindow - 是否全屏顯示播放器
            -->
            
            <MediaElement Name="mediaElement" Source="http://media.w3.org/2010/05/sintel/trailer.mp4" Width="400" Height="300" HorizontalAlignment="Left"
                          AreTransportControlsEnabled="True" />
            
            <Button Name="btnFullScreen" Content="全屏播放" Click="btnFullScreen_Click" Margin="0 10 0 0" />

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

MediaElementDemo.xaml.cs

/*
 * MediaElement - 播放視頻或音頻的控件
 *     AreTransportControlsEnabled - 是否顯示默認控制條（win8.1 新增）
 *     IsFullWindow - 是否全屏顯示播放器（win8.1 新增）
 *     
 * 
 * 關於 MediaElement 的基礎請參見：http://www.cnblogs.com/webabcd/archive/2013/01/24/2874156.html
 * 
 * 
 * 注：在 win8.1 中已經引入 MediaStreamSource 了
 */

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

namespace Windows81.Controls
{
    public sealed partial class MediaElementDemo : Page
    {
        public MediaElementDemo()
        {
            this.InitializeComponent();
        }

        private void btnFullScreen_Click(object sender, RoutedEventArgs e)
        {
            mediaElement.IsFullWindow = true;
        }
    }
}

2、完整說明 win8 frame 的功能，並介紹 win8.1 frame 中的新增功能
Frame/Demo.xaml

<Page
    x:Class="Windows81.Controls.Frame.Demo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows81.Controls.Frame"
    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" Orientation="Horizontal">

            <StackPanel Width="400">
                <Button Name="btnGotoFrame1" Content="導航至 Frame1" Click="btnGotoFrame1_Click_1" />

                <Button Name="btnGotoFrame2" Content="導航至 Frame2" Click="btnGotoFrame2_Click_1" Margin="0 10 0 0" />

                <Button Name="btnBack" Content="后退" Click="btnBack_Click_1" Margin="0 10 0 0" />

                <Button Name="btnForward" Content="前進" Click="btnForward_Click_1" Margin="0 10 0 0" />

                <TextBlock Name="lblMsg" FontSize="14.667" TextWrapping="Wrap" Margin="0 10 0 0" />
            </StackPanel>

            <Frame Name="frame" VerticalAlignment="Top" Margin="10 0 0 0"  />

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

Frame/Demo.xaml.cs

/*
 * 本例會完整說明 win8 frame 的功能，並介紹 win8.1 frame 中的新增功能
 * 
 * 
 * Frame - 框架控件，用於導航內容
 *     BackStackDepth - 返回 stack 中的條目數
 *     BackStack - 返回 stack 集合，一個 PageStackEntry 集合，可以添加或刪除返回 stack 集合中的元素（win8.1 新增）
 *     ForwardStack - 前進 stack 集合，一個 PageStackEntry 集合，可以添加或刪除前進 stack 集合中的元素（win8.1 新增）
 *     CanGoBack - 可否向后導航
 *     CanGoForward - 可否向前導航
 *     GoBack() - 向后導航
 *     GoForward() - 向前導航
 *     Navigate() - 導航到指定的 Type，可以傳遞一個 object 類型的參數
 *     SourcePageType - 獲取或設置 Frame 當前內容的 Type
 * 
 *     CacheSize - 所支持的最大緩存頁數，默認值 10
 *         CacheSize 與被導航的頁的 Page.NavigationCacheMode 屬性相關（詳見 Frame1.xaml.cs 和 Frame2.xaml.cs 的示例代碼）
 *             NavigationCacheMode.Disabled - 每次導航到頁時，都重新實例化此頁，默認值（CacheSize 無效）
 *             NavigationCacheMode.Enabled - 每次導航到頁時，首先緩存此頁，此時如果已緩存的頁數大於 CacheSize，則按先進先出的原則丟棄最早的緩存頁（CacheSize 有效）
 *             NavigationCacheMode.Required - 每次導航到頁時，都緩存此頁（CacheSize 無效）
 * 
 *     Navigating - 導航開始時觸發的事件
 *     Navigated - 導航完成后觸發的事件
 *     NavigationFailed - 導航失敗時觸發的事件
 *     NavigationStopped - 導航過程中，又請求了一個新的導航時觸發的事件
 *     
 *     GetNavigationState() - 獲取 Frame 當前的導航狀態，返回字符串類型的數據，僅當導航無參數傳遞或只傳遞簡單參數（int, char, string, guid, bool 等）時有效
 *     SetNavigationState(string navigationState) - 將 Frame 還原到指定的導航狀態
 *     
 * 
 * 
 * NavigationEventArgs - 導航的事件參數
 *     NavigationMode - 導航方式，只讀（Windows.UI.Xaml.Navigation.NavigationMode 枚舉）
 *         New, Back, Forward, Refresh
 *     Parameter - 傳遞給導航目標頁的參數，只讀
 *     SourcePageType - 導航的目標頁的類型，只讀
 */

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

namespace Windows81.Controls.Frame
{
    public sealed partial class Demo : Page
    {
        public Demo()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            frame.Navigated += frame_Navigated;
        }

        void frame_Navigated(object sender, NavigationEventArgs e)
        {
            lblMsg.Text = "CacheSize: " + frame.CacheSize;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "BackStackDepth: " + frame.BackStackDepth;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "CanGoBack: " + frame.CanGoBack;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "CanGoForward: " + frame.CanGoForward;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "CurrentSourcePageType: " + frame.CurrentSourcePageType;
            lblMsg.Text += Environment.NewLine;

            // 顯示 frame 的當前的導航狀態，記錄此值后，可以在需要的時候通過 SetNavigationState() 將 frame 還原到指定的導航狀態
            lblMsg.Text += "NavigationState: " + frame.GetNavigationState();
        }

        private void btnGotoFrame1_Click_1(object sender, RoutedEventArgs e)
        {
            frame.Navigate(typeof(Frame1), "param1");
        }

        private void btnGotoFrame2_Click_1(object sender, RoutedEventArgs e)
        {
            frame.SourcePageType = typeof(Frame2);
        }

        private void btnBack_Click_1(object sender, RoutedEventArgs e)
        {
            if (frame.CanGoBack)
                frame.GoBack();
        }

        private void btnForward_Click_1(object sender, RoutedEventArgs e)
        {
            if (frame.CanGoForward)
                frame.GoForward();
        }
    }
}

Frame/Frame1.xaml.cs

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

namespace Windows81.Controls.Frame
{
    public sealed partial class Frame1 : Page
    {
        public Frame1()
        {
            this.InitializeComponent();

            /*
             * Page.NavigationCacheMode - 使用 Frame 導航到此頁面時，頁面的緩存模式
             *     Disabled - 每次導航到頁時，都重新實例化此頁，默認值（Frame.CacheSize 無效）
             *     Enabled - 每次導航到頁時，首先緩存此頁，此時如果已緩存的頁數大於 Frame.CacheSize，則按先進先出的原則丟棄最早的緩存頁（Frame.CacheSize 有效）
             *     Required - 每次導航到頁時，都緩存此頁（Frame.CacheSize 無效）
             */
            this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

            this.Loaded += Frame1_Loaded;
        }

        void Frame1_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "Loaded: " + DateTime.Now.ToString();
        }

        // 來了
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "OnNavigatedTo: " + DateTime.Now.ToString();
            lblMsg.Text += " param: " + (string)e.Parameter;
        }

        // 准備走了，但是可以取消
        protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            // NavigatingCancelEventArgs.Parameter - 是 win8.1 新增的

            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "OnNavigatingFrom(NavigatingCancelEventArgs): " + DateTime.Now.ToString();
            lblMsg.Text += " param: " + (string)e.Parameter;
        }

        // 已經走了
        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "OnNavigatedFrom(NavigationEventArgs): " + DateTime.Now.ToString();
            lblMsg.Text += " param: " + (string)e.Parameter;
        }
    }
}

Frame/Frame2.xaml.cs

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

namespace Windows81.Controls.Frame
{
    public sealed partial class Frame2 : Page
    {
        public Frame2()
        {
            this.InitializeComponent();

            /*
             * Page.NavigationCacheMode - 使用 Frame 導航到此頁面時，頁面的緩存模式
             *     Disabled - 每次導航到頁時，都重新實例化此頁，默認值（Frame.CacheSize 無效）
             *     Enabled - 每次導航到頁時，首先緩存此頁，此時如果已緩存的頁數大於 Frame.CacheSize，則按先進先出的原則丟棄最早的緩存頁（Frame.CacheSize 有效）
             *     Required - 每次導航到頁時，都緩存此頁（Frame.CacheSize 無效）
             */
            this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

            this.Loaded += Frame2_Loaded;
        }

        void Frame2_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "Loaded: " + DateTime.Now.ToString();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "OnNavigatedTo: " + DateTime.Now.ToString();
        }
    }
}

OK
[源碼下載]