Frame of reference: keeping the music playing across pages
A musical score is a great way to add zip to your app, but many people are stumped because the Xaml MediaElement will play music only when it’s in the visual tree. When the user navigates to a new page the music stops.
This brings up the frequent question: How can I keep the music playing when I navigate away from the page with my MediaElement?
The straight (but kind of useless) answer is: You can’t.
The real answer is: You can’t, but you don’t have to.
Like I learned in Physic class: a problem can go from nigh-impossible to trivial by choosing the right frame of reference.
In this case, we have two things we want:
1) We have a MediaElement that we want to keep available throughout the life of the app
2) We have the meat of the app that we want to be able to page through
We can’t put the MediaElement on the page with the app and then switch to a new page, but we can turn the problem around and put the Frame with the page contents inside a page with the MediaElement:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
< MediaElement x:Name="soundTrack" Visibility="Collapsed" AudioCategory="ForegroundOnlyMedia" IsLooping="True" Source="Assets/soundtrack.mp3" />
<Frame x:Name="mainFrame" />
< /Grid>
We can then code the visible pages of the app into separate Page objects, host them in our rootFrame, and initialize the MainPage to automatically navigate to the first sub-page:
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
mainFrame.Navigate(typeof(BasicPage1));
base.OnNavigatedTo(e);
}
And the pages can navigate between each other the same way they would normally, but now this.Frame will refer to the rootFrame hosted in the MainPage rather than to the one created App.xaml.cs which hosts the MainPage.
This is the same technique used in the How to share an app bar across pages documentation, and it can be used for consistent visible UI as well.
The attached sample has a full demonstration. For the Windows Store 8.1 version it allows choosing your own audio file from the app bar. For the Windows Phone 8.1 version you’ll need to add your own “soundtrack.mp3” file to the Assets folder (the emulator doesn’t have sound files to choose). Your real app will probably follow the Phone sample’s model and include your own properly-licensed sound file.
Also see Navigating between pages and Playing and previewing audio and video
--Rob
Follow us on Twitter @wsdevsol!