Windows-8.1

Integrating video file in Windows Phone 8 and Windows 8 app as app background

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 RootFrameStyle.

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:

Note: 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.

Windows Phone 8

Download VideoBG.zip (WP 8)

Windows Phone 8.1 and Windows 8.1

Download Video_BG.zip (WP 8.1 & Windows 8.1)

Vivek Maskara

I am pursuing BTech in Software Engineering from Delhi Technological University. I develop apps, create websites and blog about my app experiences.

  • Pingback: Integrating video file in Windows Phone 8 and Windows 8 app as app background()

  • This is an great tutorial. but i have problems with looping in 8.0 SL apps. on 8.1 it is ok but 8.0 apps can play a video then it stops and the MediaEnded event fires, then i set the MediaElement to play again but this is too late as the video is stopped an it looks not good this way. Any solution for looping without this stuttering?! I would like to hear back from you if there is any solution.

    • Nope, I haven’t yet found a workaround for the looping stuttering. Media Element supports it natively in WP 8.1 so it works fine in it.

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding
Close