Introduction

In this tip, I am going to create a custom media player in WPF. First, we set the background color and a static resource for the button background image. Here I use a VisualBrush to fill UI elements. The following code uses a VisualBrush to fill a rectangle. I am using media element as the visual. A visual object usually hosts one container panel such as a Grid or StackPanel and on this container, add 5 buttons for play, forward, backward, stop and open file functionality. We have to set LoadedBehavior="Manual" in the media element.

Using the Code

Here is the XAML code:

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Margin" Value="2,4"/>
        <Setter Property="Background">
            <Setter.Value>
                <ImageBrush ImageSource=
                "C:\Users\Public\Pictures\Sample Pictures\background.jpg"/>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="WindowBrush" Color="Gray"/>
</Window.Resources>
<Window.Style>
    <Style TargetType="{x:Type Window}">
        <Setter Property="Background" 
        Value="{StaticResource WindowBrush}"/>
    </Style>
</Window.Style>
<Grid >
    <Rectangle Name="rectangleMedia" Margin="12,25,12,59" 
    RadiusY="7.5" RadiusX="7.5"  Stroke="GhostWhite" 
    StrokeThickness="2" >
        <Rectangle.Fill>
            <VisualBrush TileMode="None">
                <VisualBrush.Visual>
                    <MediaElement Name="videoelement" 
                    LoadedBehavior="Manual"/>
                </VisualBrush.Visual>
            </VisualBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Button Content="Play"  HorizontalAlignment="Left" 
    Margin="12,0,0,17" Name="button1" 
    VerticalAlignment="Bottom" Width="75" 
    Click="button1_Click" />
    <Button Content="Stop"  HorizontalAlignment="Left" 
    Margin="93,0,0,17" Name="StopButton" 
    VerticalAlignment="Bottom" Width="75" Click="StopButton_Click"/>
    <Button Content="Forward"  HorizontalAlignment="Left" 
    Margin="174,0,0,17" Name="ForwardButton" 
    VerticalAlignment="Bottom" Width="75" Click="ForwardButton_Click"/>
    <Button Content="Backward"  HorizontalAlignment="Left" 
    Margin="255,0,0,17" Name="BackWard" 
    VerticalAlignment="Bottom" Width="75" Click="BackWard_Click"/>
    <Button Content="Open"  HorizontalAlignment="Left" 
    Margin="340,0,0,17" Name="button2" 
    VerticalAlignment="Bottom" Width="75" Click="button2_Click" />
</Grid>

Here is the C# code:

The below code will open the WMV format file. For getting Openfiledialogue, add a reference to System.Windows.Forms. The filter will help us to open the filter's matching files. Here URI is the uniform resource identifier used to identify and load the file.

private void button2_Click(object sender, RoutedEventArgs e)
{
    System.Windows.Forms.OpenFileDialog opnDialogue = 
	new System.Windows.Forms.OpenFileDialog();
    opnDialogue.Filter = "Video Files(*.wmv)|*.wmv";
    if (opnDialogue.ShowDialog() == System.Windows.Forms.DialogResult.OK)
    {
        this.videoelement.Source = new Uri(opnDialogue.FileName);
    }
}

Play and Pause Function

The Play method will play the media which is not active and resume it when paused.

private void button1_Click(object sender, RoutedEventArgs e)
{
    if (this.button1.Content.ToString() == "Play")
    {
        this.videoelement.Play();
        this.button1.Content = "Pause";
    }
    else
    {
        this.videoelement.Pause();
        this.button1.Content = "Play";
    }
}

Stop Function

Here it will stop the media and reset to play from the beginning:

private void StopButton_Click(object sender, RoutedEventArgs e)
{
    // The Stop method stops and resets the media to be played from 
    // the beginning.
    this.videoelement.Stop();
    this.button1.Content = "Play";
}

Forward Function

Here, timespan will set the current position of progress through the media's playback time which means the amount of time since the beginning of the media.

private void ForwardButton_Click(object sender, RoutedEventArgs e)
{
    this.videoelement.Position = this.videoelement.Position + TimeSpan.FromSeconds(10);
}

Backward Function

private void BackWard_Click(object sender, RoutedEventArgs e)
{
    this.videoelement.Position = this.videoelement.Position - TimeSpan.FromSeconds(10);
}

History

First edition on 29^th June, 2013

This tip is based on http://articlesforprogramming.blogspot.in/2013/06/create-media-player-in-wpf.html.

MediaPlayer in WPF