I promised in the previous topics that I will be adding more “stuff” to each topic that we discussed prior and in this article I want to revisit the previous article where we created a cool Video Player using a button. For those who didn’t read that article please see it here. Now, remember that the only interactive feature we added was a button click event to play the video but we didn’t include any visuals. So this time around we will add Play, Stop, and Pause buttons.
In future topics we will add a volume slider, and a Seek to Slider buttons, among other things and I will explain these later on, but for now we want to add interactive buttons to our video player, and make it look like the following or whatever cool video player you created last time:
Note: Before I go deeper into this Media API discussion, I want to make sure that the reader understands that this is an introductory topic to beginners of Expression Blend and WPF.
Now that we have taken care of the disclaimerJ, let’s discuss a little bit about the Media API and how it works in Expression Blend. Expression Blend supports audio and video file types that Microsoft Windows Media Player 10 and above supports. This means in order to work with media in Expression Blend, you must have Windows Media Player 10 OCX or above installed on your computer. As you may have noticed in the previous article when you add a MediaElement in Expression Blend the Media pane is added:
We did touch a little bit about the MediaElement and MediaPlayer in the previous topic, and these two can be used to present video, video with audio, and audio. There are however, used to target different scenarios although both rely on the Microsoft Windows Media Player 10 OCX and above for media playback. Since MediaElement is a UIElement that it supported by the Layout System, it can be consumes as content by many controls. On the other hand MediaPlayer is designed for Drawing object and lacks layout support, therefore media loaded using MediaPlayer can only be presented using a VideoDrawing or directly interacting with DrawingContent. As you have already noticed in the previous topic when you insert a MediaElement in Expression Blend, the Insert feature adds an audio or video file to the artboard wrapped in a MediaElement control as long as you’re using one of the supported media types.
Enough about the conceptual stuffJ, let’s jump in and do some designing and add more controls to our previous video player.
4. Using the Direct Selection tool
drag one corner of the converted path halfway towards the other corner:
Make sure you have a straight line.
5. Use the Transform panel to rotate the path (rectangle) 45%, and also reduce the size of the path to 13×14 (W x H):
6. Next, let’s create a Stop button. Add another rectangle with whatever Fill you want and no Stroke. Also reduce the size to 10×12 (WxH).
7. Let’s move on to the Pause button, add two rectangles (2×12) in size. Group Into a Grid the two rectangles and name the grid “Pause”. Now you should have all three buttons as follows: Play, Stop, Pause:
Now, we could simply add a few lines of code to these three buttons and make them interactive with our video but we are not going to do that yetJ! Remember, we are supposed to be creating cool things in Expression Blend!
8. So the next step we want to do is to duplicate or copy the cool button we created in step 15 and reduce the size to say 85×47 (WxH). Position this smaller button on the center of the video player or wherever you like.
9. Next, edit the ButtonStyle of that button (Video Player) you copied above and add the “Play” element you created above. Mine looks like this:
10. Repeat the above step for the Stop and Pause buttons. Tip: simply copy the button style and edit the Template if you want to apply the same style to all buttons. If on the other hand you want to apply a different style, simply create a new style from the base class:
Tip: Remember when aligning your elements, the Layout and the Transform panels are your best friends!
11. Once you’re done with the layout your Play, Stop and Pause buttons should look like the following or something similar:
Now, positioning this on my video player:
12. Next, let’s add a few simply lines of code to make our buttons interactive. In my LayoutRoot, I have the following:
Now, we want to move the button click play event we created last time to the Play button we just created:
13. Next wire the Stop and Pause buttons using simple click events:
Note: There are better ways of wiring this other than what we just did but that will be for another topic in the future. I want to keep it as simple as possible to none coders.
14. Build and test you application, you should be able to Play, Stop and Pause the video:
Conclusion
That’s it folks for nowJ! We have seen how Play, Pause and Stop methods can be used to control media. In the next few topics we will cover other ways of interacting with media, for instance, using triggers. Remember again, this is an introductory topic to new Expression Blend/WPF users, and people who are interested in learning how to use Expression Blend for designing UserInterfaces (UIs). Hope this helps someone!
In future topics we will add a volume slider, and a Seek to Slider buttons, among other things and I will explain these later on, but for now we want to add interactive buttons to our video player, and make it look like the following or whatever cool video player you created last time:
Now that we have taken care of the disclaimerJ, let’s discuss a little bit about the Media API and how it works in Expression Blend. Expression Blend supports audio and video file types that Microsoft Windows Media Player 10 and above supports. This means in order to work with media in Expression Blend, you must have Windows Media Player 10 OCX or above installed on your computer. As you may have noticed in the previous article when you add a MediaElement in Expression Blend the Media pane is added:
We did touch a little bit about the MediaElement and MediaPlayer in the previous topic, and these two can be used to present video, video with audio, and audio. There are however, used to target different scenarios although both rely on the Microsoft Windows Media Player 10 OCX and above for media playback. Since MediaElement is a UIElement that it supported by the Layout System, it can be consumes as content by many controls. On the other hand MediaPlayer is designed for Drawing object and lacks layout support, therefore media loaded using MediaPlayer can only be presented using a VideoDrawing or directly interacting with DrawingContent. As you have already noticed in the previous topic when you insert a MediaElement in Expression Blend, the Insert feature adds an audio or video file to the artboard wrapped in a MediaElement control as long as you’re using one of the supported media types.
Enough about the conceptual stuffJ, let’s jump in and do some designing and add more controls to our previous video player.
- Open the previous project just before we added a video to the “cool” button we designed. We are not making any changes to the video this time but you should have a video linked to the Video Player.
- Add a rectangle to the artboard with a solid white Fill and no Stroke. This will be our Play button.
- Convert the rectangle to a path (right click on element):
4. Using the Direct Selection tool
drag one corner of the converted path halfway towards the other corner:
5. Use the Transform panel to rotate the path (rectangle) 45%, and also reduce the size of the path to 13×14 (W x H):
6. Next, let’s create a Stop button. Add another rectangle with whatever Fill you want and no Stroke. Also reduce the size to 10×12 (WxH).
7. Let’s move on to the Pause button, add two rectangles (2×12) in size. Group Into a Grid the two rectangles and name the grid “Pause”. Now you should have all three buttons as follows: Play, Stop, Pause:
Now, we could simply add a few lines of code to these three buttons and make them interactive with our video but we are not going to do that yetJ! Remember, we are supposed to be creating cool things in Expression Blend!
8. So the next step we want to do is to duplicate or copy the cool button we created in step 15 and reduce the size to say 85×47 (WxH). Position this smaller button on the center of the video player or wherever you like.
9. Next, edit the ButtonStyle of that button (Video Player) you copied above and add the “Play” element you created above. Mine looks like this:
10. Repeat the above step for the Stop and Pause buttons. Tip: simply copy the button style and edit the Template if you want to apply the same style to all buttons. If on the other hand you want to apply a different style, simply create a new style from the base class:
Tip: Remember when aligning your elements, the Layout and the Transform panels are your best friends!
11. Once you’re done with the layout your Play, Stop and Pause buttons should look like the following or something similar:
Now, positioning this on my video player:
12. Next, let’s add a few simply lines of code to make our buttons interactive. In my LayoutRoot, I have the following:
Now, we want to move the button click play event we created last time to the Play button we just created:
13. Next wire the Stop and Pause buttons using simple click events:
Note: There are better ways of wiring this other than what we just did but that will be for another topic in the future. I want to keep it as simple as possible to none coders.
14. Build and test you application, you should be able to Play, Stop and Pause the video:
Conclusion
That’s it folks for nowJ! We have seen how Play, Pause and Stop methods can be used to control media. In the next few topics we will cover other ways of interacting with media, for instance, using triggers. Remember again, this is an introductory topic to new Expression Blend/WPF users, and people who are interested in learning how to use Expression Blend for designing UserInterfaces (UIs). Hope this helps someone!
No comments:
Post a Comment