原文:
重新想象 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
[源码下载]