In this article we create a simple media player app in a Windows 8 Apps. Windows 8 Apps have a good control for playing videos in applications. You can play videos in aWindows 8 Apps using C# or any other supported language. In this section we see a video app in a Windows 8 Apps using C#. We integrated a media control in an application and use several method to make it a more attractive media player.
To embed a video in your application we use the MediaElement class. We use a media element control of XAML. We also create customized controls to give more functionality like play, pause, volume, enable full-screen mode video. We can set the source of media file either at design time or you can use a FileOpenPicker object to enable the user to choose a file from the local file system.
In this article we are creating a small media app in a Windows 8 Apps using C# with rich user functionality.
Steps for making a video player app
Step 1: Create a media player which is the child of a content control:
<ContentControl x:Name="videoContainer"
KeyUp="VideoContainer_KeyUp" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" Height="700" Width="900" VerticalAlignment="Top" >
<MediaElement Name="videoMediaElement" PosterSource="videoimage.png" AutoPlay="False" />
</ContentControl>
Step 2: Then, we create a panel that contains all the UI controls that interact with the media player such as stop, pause, play; the code is:
<StackPanel Name="TransportControlsPanel"
HorizontalAlignment="Center" Margin="238,599,238,0" Width="900" Height="173" VerticalAlignment="Top" >
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFA86E6E" Offset="1"/>
</LinearGradientBrush>
</StackPanel.Background>
<StackPanel Height="80">
<Button x:Name="pick" Click="pick_Click_1" HorizontalAlignment="Center" Style="{StaticResource UploadAppBarButtonStyle}"></Button>
<ProgressBar x:Name="vol" Height="15" Width="112" Margin="0,-50,63,0" Value="30" Background="White" FlowDirection="LeftToRight" HorizontalAlignment="Right"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="83" Margin="0,0,-15,0">
<Button x:Name="btnPlay" Click="btnPlay_Click" Style="{StaticResource PlayAppBarButtonStyle}" />
<Button x:Name="btnPause" Click="btnPause_Click" Style="{StaticResource PauseAppBarButtonStyle}"/>
<Button x:Name="btnStop" Click="btnStop_Click" Style="{StaticResource AppBarButtonStyle}"
AutomationProperties.Name="Stop" Content="[]"/>
<Button x:Name="btnReverse" Click="btnReverse_Click" Style="{StaticResource SkipBackAppBarButtonStyle}"/>
<Button x:Name="btnForward" Click="btnForward_Click" Style="{StaticResource SkipAheadAppBarButtonStyle}"/>
<Button x:Name="btnMute" Click="btnMute_Click" Style="{StaticResource AppBarButtonStyle}"
AutomationProperties.Name="Mute" Content="X"/>
<Button x:Name="btnFullScreenToggle" Click="btnFullScreenToggle_Click"
Style="{StaticResource AppBarButtonStyle}" AutomationProperties.Name="Full Screen" Content="[-]" />
<Button x:Name="btnVolumeUp" Click="btnVolumeUp_Click"
Style="{StaticResource AppBarButtonStyle}" AutomationProperties.Name="Volume" Content="+"/>
<Button x:Name="btnVolumeDown" Click="btnVolumeDown_Click" Style="{StaticResource AppBarButtonStyle}"
AutomationProperties.Name="Volume" Content="--" />
</StackPanel>
</StackPanel>
In the above code we use a fileopenpicker to pick a file from the local system and play it in the media player with many control buttons.
![Media-Player-In-Windows 8 Apps.gif]()
Here is the full code of the MainPage.xaml file.
<Page
x:Class="App4.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.TopAppBar>
<AppBar Background="#E51585E2">
<StackPanel >
<Button x:Name="inn" HorizontalAlignment="Right" Click="btnFullScreenToggle_Click" AutomationProperties.Name="Full Screen"
Style="{StaticResource OutAppBarButtonStyle}"></Button>
<Button x:Name="exit" HorizontalAlignment="Right" Visibility="Collapsed" Click="btnFullScreenToggle_Click"
AutomationProperties.Name="Exit Full Screen" Style="{StaticResource OutAppBarButtonStyle}"></Button>
</StackPanel>
</AppBar>
</Page.TopAppBar>
<Grid Background="#FFD32121" Margin="0,0,-10,-58">
<ContentControl x:Name="videoContainer"
KeyUp="VideoContainer_KeyUp"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" Height="700" Width="900" VerticalAlignment="Top" >
<MediaElement Name="videoMediaElement" PosterSource="videoimage.png" AutoPlay="False" />
</ContentControl>
<!-- Transport Controls -->
<StackPanel Name="TransportControlsPanel"
HorizontalAlignment="Center" Margin="238,599,238,0" Width="900" Height="173" VerticalAlignment="Top" >
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFA86E6E" Offset="1"/>
</LinearGradientBrush>
</StackPanel.Background>
<StackPanel Height="80">
<Button x:Name="pick" Click="pick_Click_1" HorizontalAlignment="Center" Style="{StaticResource UploadAppBarButtonStyle}"></Button>
<ProgressBar x:Name="vol" Height="15" Width="112" Margin="0,-50,63,0" Value="30" Background="White"
FlowDirection="LeftToRight" HorizontalAlignment="Right"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="83" Margin="0,0,-15,0">
<Button x:Name="btnPlay" Click="btnPlay_Click" Style="{StaticResource PlayAppBarButtonStyle}" />
<Button x:Name="btnPause" Click="btnPause_Click" Style="{StaticResource PauseAppBarButtonStyle}"/>
<Button x:Name="btnStop" Click="btnStop_Click" Style="{StaticResource AppBarButtonStyle}"
AutomationProperties.Name="Stop" Content="[]"/>
<Button x:Name="btnReverse" Click="btnReverse_Click" Style="{StaticResource SkipBackAppBarButtonStyle}"/>
<Button x:Name="btnForward" Click="btnForward_Click" Style="{StaticResource SkipAheadAppBarButtonStyle}"/>
<Button x:Name="btnMute" Click="btnMute_Click" Style="{StaticResource AppBarButtonStyle}"
AutomationProperties.Name="Mute" Content="X"/>
<Button x:Name="btnFullScreenToggle" Click="btnFullScreenToggle_Click"
Style="{StaticResource AppBarButtonStyle}" AutomationProperties.Name="Full Screen" Content="[-]" />
<Button x:Name="btnVolumeUp" Click="btnVolumeUp_Click"
Style="{StaticResource AppBarButtonStyle}" AutomationProperties.Name="Volume" Content="+"/>
<Button x:Name="btnVolumeDown" Click="btnVolumeDown_Click" Style="{StaticResource AppBarButtonStyle}"
AutomationProperties.Name="Volume" Content="--" />
</StackPanel>
</StackPanel>
</Grid>
</Page>
Step 3: Here is the code behind for the control buttons:
private void btnFullScreenToggle_Click(object sender, RoutedEventArgs e)
{
FullscreenToggle();
}
private void VideoContainer_KeyUp(object sender, KeyRoutedEventArgs e)
{
if (flag == 1 && e.Key == Windows.System.VirtualKey.Escape)
{
FullscreenToggle();
}
e.Handled = true;
}
private void btnPlay_Click(object sender, RoutedEventArgs e)
{
if (videoMediaElement.DefaultPlaybackRate != 1)
{
videoMediaElement.DefaultPlaybackRate = 1.0;
}
videoMediaElement.Play();
}
private void btnPause_Click(object sender, RoutedEventArgs e)
{
videoMediaElement.Pause();
}
private void btnStop_Click(object sender, RoutedEventArgs e)
{
videoMediaElement.Stop();
}
private void btnForward_Click(object sender, RoutedEventArgs e)
{
videoMediaElement.DefaultPlaybackRate = 2.0;
videoMediaElement.Play();
}
private void btnReverse_Click(object sender, RoutedEventArgs e)
{
videoMediaElement.DefaultPlaybackRate = 1.0;
videoMediaElement.Play(); ;
}
private void btnVolumeDown_Click(object sender, RoutedEventArgs e)
{
if (videoMediaElement.IsMuted)
{
videoMediaElement.IsMuted = false;
}
if (videoMediaElement.Volume < 1)
{
videoMediaElement.Volume += .1;
}
vol.Value -= 5;
}
private void btnMute_Click(object sender, RoutedEventArgs e)
{
videoMediaElement.IsMuted = !videoMediaElement.IsMuted;
}
private void btnVolumeUp_Click(object sender, RoutedEventArgs e)
{
if (videoMediaElement.IsMuted)
{
videoMediaElement.IsMuted = false;
}
if (videoMediaElement.Volume > 0)
{
videoMediaElement.Volume -= .1;
}
vol.Value += 5;
}
private async void pick_Click_1(object sender, RoutedEventArgs e)
{
var openPicker = new FileOpenPicker();
openPicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
openPicker.FileTypeFilter.Add(".wmv");
openPicker.FileTypeFilter.Add(".mp4");
var file = await openPicker.PickSingleFileAsync();
if (file != null)
{
var stream = await file.OpenAsync(FileAccessMode.Read);
// mediaControl is a MediaElement defined in XAML
videoMediaElement.SetSource(stream, file.ContentType);
}
}
Step 4: We use an extra feature of the full screen mode:
int flag = 0;
private Size _previousVideoContainerSize = new Size();
private void FullscreenToggle()
{
if (flag == 0)
{
TransportControlsPanel.Visibility = Visibility.Collapsed;
_previousVideoContainerSize.Width = videoContainer.ActualWidth;
_previousVideoContainerSize.Height = videoContainer.ActualHeight;
videoContainer.Width = Window.Current.Bounds.Width;
videoContainer.Height = Window.Current.Bounds.Height;
exit.Visibility = Visibility.Visible;
inn.Visibility = Visibility.Collapsed;
flag = 1;
}
In the above code we hide all the UI elements in the app. Then, set the Width and Height properties of the ContentControl, which is the parent of the MediaElement, to the maximum bounds of the display.
Step 5 : Exit from Full Screen mode.
TransportControlsPanel.Visibility = Visibility.Visible;
videoContainer.Width = _previousVideoContainerSize.Width;
videoContainer.Height = _previousVideoContainerSize.Height;
exit.Visibility = Visibility.Collapsed;
inn.Visibility = Visibility.Visible;
In the above code we use two ways to exit from full screen. One is from the ESC key and other from the app bar. Set the previous height and width of media control to make it in the original postion.
Here is the full code of MainPage.xaml.cs file.
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Storage;
using Windows.Media;
using Windows.Storage.Pickers;
namespace App4
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
int flag = 0;
private Size _previousVideoContainerSize = new Size();
private void FullscreenToggle()
{
if (flag == 0)
{
TransportControlsPanel.Visibility = Visibility.Collapsed;
_previousVideoContainerSize.Width = videoContainer.ActualWidth;
_previousVideoContainerSize.Height = videoContainer.ActualHeight;
videoContainer.Width = Window.Current.Bounds.Width;
videoContainer.Height = Window.Current.Bounds.Height;
exit.Visibility = Visibility.Visible;
inn.Visibility = Visibility.Collapsed;
flag = 1;
}
else
{
TransportControlsPanel.Visibility = Visibility.Visible;
videoContainer.Width = _previousVideoContainerSize.Width;
videoContainer.Height = _previousVideoContainerSize.Height;
exit.Visibility = Visibility.Collapsed;
inn.Visibility = Visibility.Visible;
}
}
private void btnFullScreenToggle_Click(object sender, RoutedEventArgs e)
{
FullscreenToggle();
}
private void VideoContainer_KeyUp(object sender, KeyRoutedEventArgs e)
{
if (flag == 1 && e.Key == Windows.System.VirtualKey.Escape)
{
FullscreenToggle();
}
e.Handled = true;
}
private void btnPlay_Click(object sender, RoutedEventArgs e)
{
if (videoMediaElement.DefaultPlaybackRate != 1)
{
videoMediaElement.DefaultPlaybackRate = 1.0;
}
videoMediaElement.Play();
}
private void btnPause_Click(object sender, RoutedEventArgs e)
{
videoMediaElement.Pause();
}
private void btnStop_Click(object sender, RoutedEventArgs e)
{
videoMediaElement.Stop();
}
private void btnForward_Click(object sender, RoutedEventArgs e)
{
videoMediaElement.DefaultPlaybackRate = 2.0;
videoMediaElement.Play();
}
private void btnReverse_Click(object sender, RoutedEventArgs e)
{
videoMediaElement.DefaultPlaybackRate = 1.0;
videoMediaElement.Play(); ;
}
private void btnVolumeDown_Click(object sender, RoutedEventArgs e)
{
if (videoMediaElement.IsMuted)
{
videoMediaElement.IsMuted = false;
}
if (videoMediaElement.Volume < 1)
{
videoMediaElement.Volume += .1;
}
vol.Value -= 5;
}
private void btnMute_Click(object sender, RoutedEventArgs e)
{
videoMediaElement.IsMuted = !videoMediaElement.IsMuted;
}
private void btnVolumeUp_Click(object sender, RoutedEventArgs e)
{
if (videoMediaElement.IsMuted)
{
videoMediaElement.IsMuted = false;
}
if (videoMediaElement.Volume > 0)
{
videoMediaElement.Volume -= .1;
}
vol.Value += 5;
}
private async void pick_Click_1(object sender, RoutedEventArgs e)
{
var openPicker = new FileOpenPicker();
openPicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
openPicker.FileTypeFilter.Add(".wmv");
openPicker.FileTypeFilter.Add(".mp4");
var file = await openPicker.PickSingleFileAsync();
if (file != null)
{
var stream = await file.OpenAsync(FileAccessMode.Read);
// mediaControl is a MediaElement defined in XAML
videoMediaElement.SetSource(stream, file.ContentType);
}
}
}
}
Step 6: Press F5 to run the application and see the output. Select a media file from the upload button:
![Media-Control-In-Windows8-Apps.png]()
![File-Upload-In-Windows8-Apps.png]()
Step 7: Use the various controls buttons like full screen mode:
![Playing-Video-Windows8-Apps.png]()
Step 8: To exit from full screen mode either press the Esc key or right-click on the screen to display the app bar. Click Exit full Screen button.
![Media-Element-In-Windows8-Apps.png]()
![Full-Screen-Mode-In-Windows8-Apps.png]()