Re-imagine Windows 8.1 Store Apps (79)

[Download source code]

Re-imagine Windows 8.1 Store Apps (79)-control enhancement: MediaElement, Frame

Author: webabcd


Introduction
Re-imagine Windows 8.1 Store Apps control enhancement

• MediaElement-controls for playing a video or audio
• Frame-Frame control for navigation

Example
1. Demonstrate new features of 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-The AreTransportControlsEnabled Control for playing a video or audio-whether to display the default control bar IsFullWindow-whether to display the player in full screen --> <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 =" full screen playback "Click =" btnFullScreen_Click "Margin =" 0 10 0 0 "/> </StackPanel> </Grid> </Page>

MediaElementDemo. xaml. cs

/** MediaElement-control for playing a video or audio * AreTransportControlsEnabled-whether to display the default control bar (added in win8.1) * IsFullWindow-whether to display the player in full screen (added in win8.1) * ** for the basics of MediaElement, see: http://www.cnblogs.com/webabcd/archive/2013/01/24/2874156.html *** Note: MediaStreamSource has been introduced in win8.1 */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. Complete the win8 frame functions and introduce the new functions in 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 = "navigate to Frame1" Click = "btngotoframeworkclick_1"/> <Button Name = "btnGotoFrame2" Content = "navigate to Frame2" Click = "btnGotoFrame2_Click_1" Margin = ""0 10 0 0"/> <Button Name = "btnBack" Content = "back" 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" verticalignment = "Top" Margin = "10 0 0 0"/> </StackPanel> </Grid> </Page>

Frame/Demo. xaml. cs

/** This session describes the functions of the win8 frame and introduces the new functions of the win8.1 frame *** Frame-frame control, used for navigation content * BackStackDepth-number of returned items in the stack * BackStack-returned stack set, a PageStackEntry set, you can add or delete elements in the returned stack set (added in win8.1) * ForwardStack-a forward stack set and a PageStackEntry set. You can add or delete elements in the forward stack set (added in win8.1) * CanGoBack-can you navigate backward * CanGoForward-can you navigate forward * GoBack () -Navigation backward * GoForward ()-Navigation forward * Navigate ()-navigation to the specified Type, you can pass the * SourcePageType-parameter of the object Type to obtain or set the Type of the current Frame content ** CacheSize-the maximum number of pages that can be cached, the default value is 10 * CacheSize and the Page of the Page to be navigated. navigationCacheMode attributes (for details, see Frame1.xaml. cs and Frame2.xaml. cs sample code) * NavigationCacheMode. disabled-this page is re-instantiated every time you navigate to the page. The default value (invalid CacheSize) * NavigationCacheMode. enabled-this page is first cached when you navigate to the page. If the number of cached pages is greater than CacheSize, the earliest cache page is discarded (CacheSize is valid) * NavigationCacheMode. required-this page is cached every time you navigate to the page (the CacheSize is invalid) ** Navigating-events triggered when navigation starts * Navigated-events triggered after navigation is complete * NavigationFailed-events triggered when navigation fails * NavigationStopped-events in the navigation process, another event triggered when a new navigation is requested ** GetNavigationState ()-obtains the current navigation status of the Frame and returns string-type data, * SetNavigationState (string navigationState) is valid only when no parameters are passed in the navigation or only simple parameters (int, char, string, guid, bool, etc.) are passed) -restore the Frame to the specified navigation status. *** NavigationEventArgs-event parameter of the navigation * NavigationMode-Navigation Mode, read-only (Windows. UI. xaml. navigation. navigationMode enumeration) * New, Back, Forward, Refresh * Parameter-parameters passed to the target page of the navigation, read-only * SourcePageType-type of the target page of the navigation, read-only */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; // display the current navigation status of the frame. After recording this value, you can use SetNavigationState () to restore the frame to the specified navigation status lblMsg as needed. text + = "NavigationState:" + frame. getNavigationState ();} private void btngotoframeworkclick_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-When Frame is used to navigate to this page, the cache mode of the page * Disabled-this page is re-instantiated every time you navigate to the page. The default value is Frame. invalid CacheSize) * Enabled-this page is first cached every time you navigate to the page. If the number of cached pages is greater than Frame. cacheSize, the earliest cache page (Frame. effective CacheSize) * Required-this page (Frame. invalid CacheSize) */this. navigationCacheMode = Windows. UI. xaml. navigation. navigationCacheMode. enabled; this. loaded + = frameuploloaded;} void frameuploloaded (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;} // ready to go, but you can cancel protected override void OnNavigatingFrom (NavigatingCancelEventArgs e) {// NavigatingCancelEventArgs. parameter-is the lblMsg added by win8.1. 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-When Frame is used to navigate to this page, the cache mode of the page * Disabled-this page is re-instantiated every time you navigate to the page. The default value is Frame. invalid CacheSize) * Enabled-this page is first cached every time you navigate to the page. If the number of cached pages is greater than Frame. cacheSize, the earliest cache page (Frame. effective CacheSize) * Required-this page (Frame. invalid 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
[Download source code]