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 nameRootFrameStyle.
rootFrame.Style = Resources["RootFrameStyle"] as Style;
in style.xaml
<Style x:Key="RootFrameStyle" TargetType="Frame">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Frame">
<Grid>
<MediaElement AutoPlay="True" IsLooping="True" Source="video.mp4" Stretch="UniformToFill" />
<ContentPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
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 asphone:PhoneApplicationFrame instead of Frame.
RootFrame.Style = Resources["RootFrameStyle"] as Style;
in style_wp8.xaml
<Style x:Key="RootFrameStyle" TargetType="phone:PhoneApplicationFrame">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:PhoneApplicationFrame">
<Grid>
<MediaElement Name="media" AutoPlay="True" Source="video.mp4" Stretch="UniformToFill" />
<ContentPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
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.
Here is the source Code:
https://www.mediafire.com/?pna5kua44p67rlv