Full Screen Function In Simple Media Player Using Windows Store Apps

Introduction

In my previous article I explained how to design and develop the Simple media player using Windows Store apps, and also how to put sound effects in it. The links are given below.

Simple Media Player
Sound Effect In Media Player

In this article I will explain how to apply full-screen mode in this media player using Windows Store apps. For this use the following steps.

Step 1

Open the BlankPage in Visual Studio 2012.

Step 2

Open the MainPage.xaml file and use the following code in it to do the design:

<Page

x:Class="App1.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:App1"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</Page>

Step 3

To apply the full-screen use this code in the MainPage.xaml.cs file:

private bool _isFullscreenToggle = false;

public bool IsFullscreen

{

get { return _isFullscreenToggle; }

set { _isFullscreenToggle = value; }

}

private Size _previousVideoContainerSize = new Size();

private void FullscreenToggle()

{

this.IsFullscreen = !this.IsFullscreen;

if (this.IsFullscreen)

{

Media.Width = Window.Current.Bounds.Width;

Media.Height = Window.Current.Bounds.Height;

}

else

{

Media.Width = _previousVideoContainerSize.Width;

Media.Height = _previousVideoContainerSize.Height;

}

private void btnFullScreenToggle_Click(object sender, RoutedEventArgs e)

{

FullscreenToggle();

}

private void VideoContainer_KeyUp(object sender, KeyRoutedEventArgs e)

{

if (IsFullscreen && e.Key == Windows.System.VirtualKey.Escape)

{

FullscreenToggle();

}

e.Handled = true;

}

Step 4

The full code for MainPage.xaml.cs file is:

namespace App1

{

public sealed partial class MainPage : Page

{

public MainPage()

{

this.InitializeComponent();

}

private void Play_click(object sender, RoutedEventArgs e)

{

if (Media.DefaultPlaybackRate != 1)

{

Media.DefaultPlaybackRate = 1.0;

}

Media.Play();

}

private void Pause_click(object sender, RoutedEventArgs e)

{

Media.Pause();

}

private async void Pick_Click(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();

var stream = await file.OpenAsync(FileAccessMode.Read);

Media.SetSource(stream, file.ContentType);

Media.Play();

}

private void Stop_Click(object sender, RoutedEventArgs e)

{

Media.Stop();

}

private void Forword_Click(object sender, RoutedEventArgs e)

{

Media.DefaultPlaybackRate = 2.0;

Media.Play();

}

private void Rewind_Click(object sender, RoutedEventArgs e)

{

Media.DefaultPlaybackRate = -2.0;

Media.Play();

}

private void btnVolumeDown_Click(object sender, RoutedEventArgs e)

{

if (Media.IsMuted)

{

Media.IsMuted = false;

}

if (Media.Volume < 1)

{

Media.Volume += .1;

}

private void btnMute_Click(object sender, RoutedEventArgs e)

{

Media.IsMuted = !Media.IsMuted;

}

private void btnVolumeUp_Click(object sender, RoutedEventArgs e)

{

if (Media.IsMuted)

{

Media.IsMuted = false;

}

if (Media.Volume > 0)

{

Media.Volume -= .1;

}

private bool _isFullscreenToggle = false;

public bool IsFullscreen

{

get { return _isFullscreenToggle; }

set { _isFullscreenToggle = value; }

}

private Size _previousVideoContainerSize = new Size();

private void FullscreenToggle()

{

this.IsFullscreen = !this.IsFullscreen;

if (this.IsFullscreen)

{

Media.Width = Window.Current.Bounds.Width;

Media.Height = Window.Current.Bounds.Height;

}

else

{

Media.Width = _previousVideoContainerSize.Width;

Media.Height = _previousVideoContainerSize.Height;

}

private void btnFullScreenToggle_Click(object sender, RoutedEventArgs e)

{

FullscreenToggle();

}

private void VideoContainer_KeyUp(object sender, KeyRoutedEventArgs e)

{

if (IsFullscreen && e.Key == Windows.System.VirtualKey.Escape)

{

FullscreenToggle();

}

e.Handled = true;

}

}

Step 5

Now run the application. The output will look like:

When I click on the Full Screen Button the result looks like:

Full-Screen-Function-In-Media-Player-Using-Windows-Store-Apps.jpg

Summary

In this article I explained how to apply the full screen function in a media element control using Windows Store apps.

Full Screen Function In Simple Media Player Using Windows Store Apps

Reactions

Comments