Click here to Skip to main content
15,860,972 members
Articles / Desktop Programming / WPF
Tip/Trick

MediaPlayer in WPF

Rate me:
Please Sign up or sign in to vote.
4.80/5 (6 votes)
1 Jul 2013CPOL1 min read 32K   12   5
This tip will give you a better idea about creating a custom media player in WPF.

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:

XML
<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.

C#
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.

C#
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:

C#
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.

C#
private void ForwardButton_Click(object sender, RoutedEventArgs e)
{
    this.videoelement.Position = this.videoelement.Position + TimeSpan.FromSeconds(10);
} 
Backward Function
C#
private void BackWard_Click(object sender, RoutedEventArgs e)
{
    this.videoelement.Position = this.videoelement.Position - TimeSpan.FromSeconds(10);
} 

History

  • First edition on 29th June, 2013

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionHow to design Windows media player in wpf source code in adavance level Pin
Keerthi Viswanathan26-Feb-17 20:21
Keerthi Viswanathan26-Feb-17 20:21 
GeneralMy vote of 4 Pin
Karuppasamy P1-Jul-13 18:07
Karuppasamy P1-Jul-13 18:07 
GeneralRe: My vote of 4 Pin
josh-jw1-Jul-13 19:37
josh-jw1-Jul-13 19:37 
QuestionRe: My vote of 4 Pin
Karuppasamy P1-Jul-13 23:24
Karuppasamy P1-Jul-13 23:24 
AnswerRe: My vote of 4 Pin
josh-jw1-Jul-13 23:51
josh-jw1-Jul-13 23:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.