Introduction

Ever wanted to clip videos you like? There are a vast number of software's available to achieve video clipping. But have you ever felt like your clipped videos are eating lot of your disk space. Because each time you create one clip, it saves as a new video and you wanted to keep the original video. Well in this article we will see how we can clip videos with few kilobytes of memory being used by your hard disk.

Requirements to build the application

We need to have the followings to proceed:

• Visual Studio 2010
• Expression Blend 4

Create WPF Application

Fire up Visual Studio 2010 in, create a WPF Application and select the version as .Net Framework 4, give the solution a name such as DClipper.

The Idea

The idea is very simple. We would have simple media clipping application which would have start clip and end clip buttons. Which would save the clip's start position, end position, video path and clip name in an XML file. As we have all the data needed to play a clip, we would have a storyboard player, where all the clips would be loaded from the xml and played as soon as you hit the play button having previous and next buttons for player support.

XML files

Basically we need two XML files to support our application, which we would create if they do not exist. To do so, go to the App.xaml.cs and create the two XML files or even the directory if it does not exist. We will target "My Documents" folder to keep the application's supporting files.

First we need to check whether we have application folder is present or not, then we would create the files with initial tags.

We would have two xml files, such as Settings.xml and ClipSettings.xml, the following would be the tags for each file respectively.

Figure 2: Settings.xml

Figure 3: ClipSettings.xml

As we have created the files that are needed to start, let's do some designing of the screens which would help us achieve to do operations on the xml files.

We need to have a home screen where we would have buttons to navigate to the specific views such as Settings, Clip Video & Storyboard.

Open up the solution in Expression Blend 4; open MainWindow.xaml.

As discussed above, we need to have navigation back and forth in the application, to do so let's have a ContentControl in the MainWindow.xaml. Name the ContentControl as AppContent.

Now moving forward, let's design the Home Screen view.

Create a UserControl name it as StartUpScreenView.xaml.

As per my design sense, I have designed as follows:

The three buttons you see are custom buttons, with custom animations. Let's dig more how we have achieved the buttons.

Thanks to www.iconfinder.net , where I got the set of pngs to use in this application.

As you see from the above image, the buttons are in side stack panels with their respective names.

Let's see how we have made the Settings button.

The button contains 4 simple control, Grid, Border, Image and ContentPresenter. Refer to the xaml for the exact style of the controls.

The main animation I have done here is with the states.

The Normal state, says that there is a change in Background.

The MouseOver state, the change is applied.

This is same with all the Startup screen buttons, refer App.xaml to see the resources for style.

Let's make the settings screen, which would ultimately look like the following:

As you see in above image, we have a icVideoList, which is a type of ItemsControl. To achieve scrolling, it's placed inside a scrollviewer. We have two buttons such as Add Video and Go Back to Home.

Before designing the Add Video Screen Dialog, lets see how the ItemTemplate is styled for ItemsControl.

As you see from the above image, we have the above controls for our purpose, we would be binding the TextBlocks to our respective fields. There is a remove button on top right side, which would remove any entry at any time.

To design add screen dialog, we need to add a window. Because until and unless it's of type window, we cannot show it as ShowDialog. Give it a name "SaveClipWindow.xaml".

As you see from the image, we have a textbox which would take the Clip Name, also we have 3 buttons, the top right corner is for cancel, and in bottom we have Save Clip button, and Cancel button.

Now let's design the Video Clipping Screen. Add a user control to the application, name it as VideoClippingScreenView.xaml.

As you see above, is the design for Video Clipping view. Where we have a ListBox control to list all the videos added through the Settings view. Then we have a MediaElement control, then we have set of controls that are related to Clipping. Such as Play/Pause, Stop, StartClip, EndClip, and Go to Home buttons.

To add some note here, Play/Pause button is not a Button exactly, it's a check box. The reason I have made into the check box style is it has IsChecked property using which we can handle the Play and Pause views. Also it has the Click event which would also satisfy the Routed event we need.

This article is becoming a bigger one than I thought so let's do some coding for the views that we have already made.

First of all we need two model classes, such as Settings.cs, and Clips.cs

In Settings class, we would have the following properties:

And in Clips Class, the following properties:

Now, let's see how we can achieve navigation back and forth in the application.

As in the startup of the application we need to view the StartupScreen, so in MainWindow.xaml.cs add the following code in the constructor.

As you see in the above code, it's simple to create an instance of the user control and load it, now we would see how it can load user controls from the Start up screen.

The trick is like this, we would have a MainWindow variable, which would take the value as follows:

Now on every button click of the Start up screen we need to change the ContentPresenter's value respectively. Such as for Settings Screen:

What we are doing here is we are making the content null first, then re-assigning the new instance of the user control.

The same thing can be done while coming back from the Views screens to Home Screen.

Let's see how we can add videos to the application in Settings view.

First we need to load data from XML file, even if it's empty. The following method would load the data from xml and assign to the ItemsSource control.

As you see in above code, System.Linq namespace helps to load the data along with XDocument.

Now on click of Add button we need to display the open file dialog with some initial filters.

A quick note here about the filters used, we have used the default .avi and .wmv as Video files. Because other video file formats are not playable in MediaElement unless you have the media codecs installed the system. The best is the K- Lite Codec Pack, which is free to download.

The AddVideoToList method takes two parameters to update in XML file.

Now that we have added some videos to let's see how we can remove a video from the list.

As you see in above code display, the particular item is removed from the XML file.

Now let's add a video.

As soon as it's added, the XML is updated and reloaded the list.

Let's move to Video Clipping view to see how the clipping is done.

We need to load the data as we have in the settings view, so:

Then we need to have a DispatcherTimer object to handle the slider seek to the respective time seek of media element.

But, the video is not yet loaded to MediaElement. However we can see the video name in the ItemsControl.

Now on click of the Item in the ListBox we need to load the video, to do so, go to the xaml behind of the view and add the MouseLeftButtonDown event for the border we have.

As you can see we have bound the VideoPath to the Tag of the Border. So let's take the data to move forward and load the media in this event.

As you see now, the video is loaded into the mediaelement and we are playing it on load.

The timer tick event that we have seen earlier is to be updated as follows:

But the Timer is not yet started, to start the timer, we need to handle another event here and that is MediaElement's MediaOpened event.

As you see from the above code, we are setting the properties of the silder and then we are starting the video. Also we are verifying that the video has some video length in it.

To have the seek to the slider position we need to have the following events from Slider control.

Now we will see the play/pause and stop button clicks, which are very simple.

On stop button click we are not only stopping the Player, but also we are stopping the timer and resetting the slider value.

Now the best part to clip.

On Start Clip button click, we need to set the variables.

On end clip, we need to check whether the end clip time is greater. If not, display a message to start clipping again. And if yes, display the save clip dialog.

In Save Clip Window, we are doing the same saving stuff that we already achieved earlier for Videos in Settings.

Now let's test creating a clip.

Let's see in the XML file, how it's been saved.

As you noticed, the Start and End time are recorded.

Conclusion

Hope you have enjoyed the article; I am trying to complete the last module "Storyboard". And let's hope we would add another module to the application. Keep following. Thanks for reading.

About Diptimaya Patra

Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7. Follow him in tweeter @dpatra This author has published 13 articles on DotNetSlackers. View other articles or the complete profile here.