These days few top developers are using a video as app’s background. You would imagine it’s quite simple to do so. Yes, the process is small but you should know how exactly it must be done. We don’t just want a video put in the background but we want it to play in loops and also if the user navigates to some other page, it doesn’t start over from the beginning. Just putting a video in the background will work fine if it’s a single page app but the issue with this approach, if the user navigates to the next page, the video will start over in the next page (even if the first page passes the time elapsed of the video to the next page, you will notice a very ugly blinking in the video). Here’s what we mean:
It’s important to understand the architecture behind modern Windows apps. Every time you want to navigate from a page to another, the Frame will render the new page.
Windows Phone 8.1 XAML or Windows 8.1 app
So to have one infinite video which plays on all pages, we just need to add the
MediaElement to the Frame level instead of the page level. To do this, we will need to modify the default template of the Frame. I’ve created the following style to the App.xaml, and gave it the key name
All what we did there is changing the template to a Grid. Inside that grid we’ve added a
MediaElement control behind the
ContentPresenter. After that, in App.xaml.cs we apply the style to the Frame:
Note: Set the
Background of your pages as
Transparent or else you won’t be able to view the video.
Windows Phone 8 (Silverlight app)
While developing for Windows Phone 8 (Silverlight app) set the target as phone:PhoneApplicationFrame instead of Frame. And set the Style as follows:
MediaElement in Windows Phone 8 Silverlight app doesn’t support
IsLooping. So you will have to manually loop the video.
We used Tareq Ateik’s awesome blog post to build this tutorial. You can download the full source code for both projects and use it as a reference.