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:
The application will also support playlists and other features:
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 termsDownloaded 1360x (568.23 kB)