Friday 28 June 2013

Create a Media Player in WPF





In this Article I am going to create a custom media player in wpf .First we are setting the background color and a static resource for button background image. Here i am  using a VisualBrush  to fill UI elements. The following code uses a VisualBrush to fill a rectangle.I am using media element as 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 media element.

  Here is the xaml code:
                      
<Window x:Class="wpftheme.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Media Element" Height="350" Width="450" Initialized="Window_Initialized" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="2,4"/>
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\index.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>
</Window>

Here is the C# code:
// code for play and pause

   public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
       
// The Play method will begin the media if it is not currently active or
        // resume media if it is paused. This has no effect if the media is
        // already running.


        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";
            }
        }
      
  // code for stop
        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";

        }
     
   // code for forward

        private void ForwardButton_Click(object sender, RoutedEventArgs e)
        {
            this.videoelement.Position = this.videoelement.Position + TimeSpan.FromSeconds(10);
        }
       
// code bvackward
        private void BackWard_Click(object sender, RoutedEventArgs e)
        {
            this.videoelement.Position = this.videoelement.Position - TimeSpan.FromSeconds(10);
        }
       
// code for open 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);
            }
        }

    }