Tuesday, January 17

Media Player Guide in WPF (XAML) and c# code

Hello Guys, today i'm gonna show you how to make media player in wpf application, its very simple, so lets get started.
Steps

  • Lets begin with xaml (Designe) code of application. Wpf provides Media Element control which is used to load media files, in the toolbox you will find it, you can drag and drop onto your mainWindow or write a xaml code, Media Element is the class so in the angular brackets you will write MediaElement then you will give Name to your Media Element, Name is same like you are creating an object of respective class.



Xaml: <MediaElement Name = "Screen" />
c#: MediaElement Screen = new MediaElement();
  • Both lines are doing same functionality. now add some buttons like Play, Pause, Stop and Load File. Button is again a class, in order to create its object you will give Name in xaml code, and in c# you will make object by calling constructor of respective class. as mentioned above.
  • Play, Pause, Stop as their name is showing that play button will play a video file, Stop button will stop the video, and set the video timer to 0:0:0, Pause Button will pause the video at that time, and will resume video file to play from paused time.
  • Design is very simple, i'll share screen shots its not difficult to understand, in xaml code you will put tags of your required contents to be shown on your window, 
  • Now come to the c# code. in the constructor of your MainWindow you will set LoadedBehavior and UnloadedBehavior of your Media Element Object to Manual, if you do not set this state to Manual you  will be shown only play video, you can not perform Stop, Play, Pause Functionality. so write these line in MainWindow Constructor 
c#: 
            Screen.LoadedBehavior = MediaState.Manual;
            Screen.UnloadedBehavior = MediaState.Manual;
  • Do not get confuse from Screen word, it is the name which is assigned to MediaElement tag in xaml code.
  • In play button write this code.
 c#:
                Screen.Play();
  • Same thing will be done with stop and pause buttons.
c#:
            Screen.Stop();
            Screen.Pause();
  • In the load button, you will have to allow a user to load his/her desired video file, so on click load button Dialog box will be shown, he/she will be able to choose only *.avi formatted video. OpenFileDialoge is the class, i have created its object Open, by calling its non-Static methods like open.ShowDialog(), and in order to restrict a user to load only one format video file you will have to add filter to the OpenFileDialog, 
c#:
            OpenFileDialog open = new OpenFileDialog();
            open.Filter = "Video File (*.avi) | *.avi"; // User can only load a video file which is avi formatted.
            if (open.ShowDialog() == System.Windows.Forms.DialogResult.OK)
            {
                Screen.Source = new Uri(open.FileName);
                Screen.Play();
            }
            else
            {
                Screen.Play();
            }
  • That was the whole stuff, thank you for appreciating, feel free to ask any thing.  
C# Code:
namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Screen.LoadedBehavior = MediaState.Manual;
            Screen.UnloadedBehavior = MediaState.Manual;
        }

        private void load_Click(object sender, RoutedEventArgs e)
        {
            Screen.Pause();
            OpenFileDialog open = new OpenFileDialog();
            open.Filter = "Video File (*.avi) | *.avi";
            if (open.ShowDialog() == System.Windows.Forms.DialogResult.OK)
            {
                Screen.Source = new Uri(open.FileName);
                Screen.Play();
            }
            else
            {
                Screen.Play();
            }
        }

        private void play_Click(object sender, RoutedEventArgs e)
        {
            Screen.Play();
        }

        private void stop_Click(object sender, RoutedEventArgs e)
        {
            Screen.Stop();
        }

        private void pause_Click(object sender, RoutedEventArgs e)
        {
            Screen.Pause();
        }
    }
}

Xaml Code:
<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="320*" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>
        <Border BorderBrush="GhostWhite"  BorderThickness="1">
            <Border.Effect>
                <DropShadowEffect ShadowDepth="2" />
            </Border.Effect>
            <MediaElement Name="Screen" Grid.Row="0" MinWidth="500" Margin="0,0,0,0" />
        </Border>
        <StackPanel Orientation="Horizontal" Grid.Row="1">
            <Button Name="play" Content="Play" Height="25" Margin="5" BorderBrush="Gray" Click="play_Click" />
            <Button Name="stop" Content="Stop" Height="25" Margin="5" BorderBrush="Gray" Click="stop_Click" />
            <Button Name="pause" Content="Pause" Height="25" Margin="5" BorderBrush="Gray" Click="pause_Click" />
            <Label Name="videoContent" />
            <Button Name="load" Content="Load File" Height="25" Margin="150,5,0,5" Click="load_Click" />
        </StackPanel>
    </Grid>


Screen Shots



3 comments: