How To Use Media Element Control To Open A Media File In Universal Application Development With XAML And C#

Before reading this article, please go through the article, given below-

Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

Reading this article, you can learn, how to use Media Element Control with Media Transport Control to open a Media File in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP-

Windows 10 (Recommended)
Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step App development.

Step 1: Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give the suitable name for your App (UWPMediaElementMTP) ->OK.

Step 2: Choose Target and minimum platform version for your Windows Universal Application. After the project, create App.xaml and MainPage.xaml.

version

Step 3: Open (double Click) the file MainPage.xaml in the Solution Explorer and click on the Toolbox tab on the left to open the list of Common XAML controls. Expand Common XAML Controls and drag the MediaElement Control to the middle of the design canvas and Change the name property.

Enable the checkbox AreTransportControlsEnabled property.

Note: Automatically, the code, given below, will be generated in XAML code view, while we are done in the design view-

<Page x:Class="UWPMediaElementMTP.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPMediaElementMTP" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<MediaElement x:Name="mediaEletest" AreTransportControlsEnabled="True" /> </Grid>
</Page>

Step 4: Add the Namespaces, given below, in MainPage.xaml.cs-

using Windows.Storage.Pickers;
using Windows.Storage;
using Windows.Media.Core;

These name spaces are used for FilePicker, Media and Storage.

Namespaces

Step 5: Create a new async method called OpenMedia() in MainPage.xaml.cs and add the code, given below, used to open the file, using File Picker and play the selected media file.

public async void OpenMedia()
{
//Using File Picker top open your Media File
FileOpenPicker MediaContent = new FileOpenPicker();
MediaContent.ViewMode = PickerViewMode.List;
MediaContent.SuggestedStartLocation = PickerLocationId.VideosLibrary;
//add the media file ectension for filtering
MediaContent.FileTypeFilter.Add(".wmv");
MediaContent.FileTypeFilter.Add(".wma");
MediaContent.FileTypeFilter.Add(".mp3");
MediaContent.FileTypeFilter.Add(".mp4");
StorageFile openmedia = await MediaContent.PickSingleFileAsync();
mediaEletest.AutoPlay = true;
mediaEletest.SetPlaybackSource(MediaSource.CreateFromStorageFile(openmedia));
mediaEletest.Play();
}

Step 6: Call the OpenMedia() Method in constructor method (MainPage() method) in MainPage.xaml.cs.

Now, the constructor method looks like-

public MainPage()
{
this.InitializeComponent();
OpenMedia();
}

Step 7: Deploy your app in the local machine and the output of the UWPMediaElementMTP app is-

To pick the media file, the screenshot is given below-

To play the media file, the screenshot is given below-

Playing the Media File

Summary: Now, you successfully created and tested your media element control in Visual C# - UWP environment.

2 Comments

Join the conversation! Your thoughts help the community grow.

Ilker Mersinlioglu9y ago
I have found this site for more information, as i see its very complicated in windows phone 8.1 to work with files. https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn614994.aspx
Ilker Mersinlioglu9y ago
Hello, thanks for this example. Its very good and simple. Though i have a question. Which changes do i need in the code for windows phone 8.1? I have problem with: SetPlaybackSource, MediaContent.PickSingleFileAsync()