Windows 8 Modern Apps with Video Background (Xaml/C#)

The ask here is to build an application with an infinite loop video background, It might not be very clear what I’m trying to achieve here, so I’ve recorded a video of a simple proof of concept I was working on:

It might look like a straight forward solution by adding a MediaElement with a transparent Grid:

<Page ......>  
   <Grid>
         <MediaElement />
         <Grid Background"Transparent">
             
         Grid>
   Grid>
Page>

Which would work just fine; IF the app is just one page app. 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).

Before we start working on the correct solution, we need to understand how Windows 8 modern apps work. Looking at the following image, every app on Windows 8 has one Frame, and the pages will be rendered on that Frame. Every time you want to navigate from a page to another, the Frame will render the new page.

FramePageContent

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”:

<Style  x:Key="RootFrameStyle" TargetType="Frame">  
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Frame">
                <Grid>
                    <MediaElement AutoPlay="True" IsLooping="True" Source="ms-appx:///Assets/Video/Background.mp4" Stretch="UniformToFill" />
                    <ContentPresenter />
                Grid>
            ControlTemplate>
        Setter.Value>
    Setter>
Style>

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:

rootFrame.Style = Resources["RootFrameStyle"] as Style;

Done! now you have a beautiful app with a video background.

What else we can do with this apart from having a video background?

  • You can have a video player working on all pages; Hyper app (one of my favorite apps), has a great feature where you can play a video, and navigate to any other page (search page for example) while the video is still playing on the top right corner:

hyper

  • Have an indication of a process working on the background; On the Videos app, you can see the “Signing In” indication on the top right corner:

videos

If you have any question, please find me on twitter @tareqateik

Tareq Ateik

Read more posts by this author.