Get up to 80 % extra points for free! More info:

Lesson 18 - Audio/Video Player in C# and WPF - Basis

In the previous lesson, Resources in C# .NET WPF, we took a look at resources. One of the interesting WPF controls is <MediaElement>, which is used to play audio and video files. In today's C# .NET WPF, we're going to describe how to create a simple player.

Features

First of all, we should be clear about what functionality we want for the player. And so that we don't get overwhelmed, we'll start from simple ones and move to the more complex ones later. The final project will be a fully featured video and music player, on which we'll practice, among other things, control styling:

Video player in C# .NET WPF - Form Applications in C# .NET WPF

The application will also support playlists and other features:

Working with music playlists in C# .NET WPF - Form Applications in C# .NET WPF

Let's say we want the following functionalities for the start:

  • Select and open a file
  • Start playback
  • Pause playback
  • Stop playback

That might be enough to get started. Later, we can add more, such as volume control, skipping forward and backward, etc. Let's stop talking and start doing! We'll create a new WPF project in Visual Studio named AVPlayer.

Layout

MainWindow.xaml with the form design will be displayed. We'll put a <MediaElement /> in it and specify the window size:

<Window x:Class="AVPlayer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AVPrehravac"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <MediaElement/>
    </Grid>
</Window>

And we're basically done :) But when we run the application, we can see that we don't see anything. That's because we forgot to tell the <MediaElement> what we want to play. This is done using the Source property, in which we specify the file path.

At this moment, the file would play, but we'd soon find out that the player plays the same thing over and over again like a broken record. So we'll add a button to choose the file to the form, and a button to close the application. We'll use a <Grid> container to keep things nice and neat:

<Window x:Name="wdwPlayer" x:Class="AVPlayer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AVPrehravac"
        mc:Ignorable="d"
        Title="MainWindow" Height="470" Width="700">

    <Grid Margin="0,20,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="10"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="10"/>
        </Grid.RowDefinitions>

        <MediaElement x:Name="avPlayer"/>

        <Grid Grid.Row="2" Margin="20,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="80"/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="0" Content="Open file"
                    Click="BtnOpen" ToolTip="Select a video file"/>

            <Button Grid.Column="5" Content="Close"
                    Click="CloseWindow"
                    ToolTip="Close application"/>
        </Grid>
    </Grid>
</Window>

In addition to these two buttons, we also specified the window name, so we can now close it with the button. We also named the <MediaElement>, so we can play a specified file in it. Notice that the buttons already have the handler methods set, so let's add them.

Code Behind

We'll go to MainWindow.xaml.cs and add the handler method for the button that opens the media file:

private void BtnOpen(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    openFileDialog.Filter = "Video files
           (*.mpg;*.mpeg;*.avi;*.mp4)|*.mpg;*.mpeg;*.avi;*.mp4";
    if (openFileDialog.ShowDialog() == true)
    {
        avPlayer.Source = new Uri(openFileDialog.FileName);
    }
}

Be sure to add the appropriate using for the dialog:

using Microsoft.Win32;

The method opens a file selection dialog and assigns the selected file to the <MediaElement> using its Source property. Here, we've limited the selection to video files only, using the filter. After the file is assigned, the <MediaElement> starts playing the file.

The second method will handle the close button:

private void CloseWindow(object sender, RoutedEventArgs e)
{
    wdwPlayer.Close();
}

We terminate the application by telling it to close the main window (see the window name wdwPlayer).

Control Buttons

But at the beginning, we decided that we'd like to be able to pause the video and resume it at any time. So we’ll add more buttons to the app to start the playback, pause it, and stop it.

XAML

We'll put the buttons into our Grid:

<Grid Grid.Row="2" Margin="20,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="80"/>
    </Grid.ColumnDefinitions>

    <Button x:Name="btnOpen" Grid.Column="0" Content="Open"
            Click="BtnOpen" ToolTip="Select a video file"/>

    <Button x:Name="btnPlay" Grid.Column="1" Content="Play"
            Click="BtnPlay"
            ToolTip="Plays the video"/>

    <Button x:Name="btnPause" Grid.Column="2" Content="Pause"
            Click="BtnPause"
            ToolTip="Pauses the video playing"/>

    <Button x:Name="btnClose" Grid.Column="3" Content="Close"
            Click="BtnClose"
            ToolTip="Closes the video"/>

    <Button Grid.Column="5" Content="Close"
            Click="CloseWindow"
            ToolTip="Close aplication"/>
 </Grid>

We added three more columns to the container and placed the buttons in them. We'll modify the <MediaElement> as well:

<MediaElement x:Name="avPlayer" LoadedBehavior="Manual"/>

We changed the predefined LoadedBehavior property from Play to Manual. This allows us to control the player manually.

Code Behind

We'll extend the file with handler methods with the new methods:

private void BtnPlay(object sender, RoutedEventArgs e)
{
    avPlayer.Play();
}

private void BtnPause(object sender, RoutedEventArgs e)
{
    avPlayer.Pause();
}

private void BtnClose(object sender, RoutedEventArgs e)
{
    avPlayer.Close();
}

Basically, we're finished. Next time, in the lesson Audio/Video Player in C# and WPF - Code Improvements, we'll improve the player code and we'll work on its appearance :)


 

Download

By downloading the following file, you agree to the license terms

Downloaded 1297x (568.23 kB)

 

Previous article
Resources in C# .NET WPF
All articles in this section
Form Applications in C# .NET WPF
Skip article
(not recommended)
Audio/Video Player in C# and WPF - Code Improvements
Article has been written for you by Petr Pospisil
Avatar
User rating:
No one has rated this quite yet, be the first one!
Activities