Click here to Skip to main content
Click here to Skip to main content

MediaPlayer in WPF

, 1 Jul 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
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:

<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 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)

Share

About the Author

josh-jw

India India
No Biography provided

Comments and Discussions

 
GeneralMy vote of 4 PinmemberKaruppasamyP1-Jul-13 19:07 
GeneralRe: My vote of 4 Pinmemberjosh-jw1-Jul-13 20:37 
QuestionRe: My vote of 4 PinmemberKaruppasamyP2-Jul-13 0:24 
AnswerRe: My vote of 4 Pinmemberjosh-jw2-Jul-13 0:51 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 1 Jul 2013
Article Copyright 2013 by josh-jw
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid