So now we have the cool navigation with slick animation.  This tutorial assumes you have a media file on your local hard drive (avi or wmv) and that you have read Part I of this series.  Now let’s start by adding the MediaElement:

1. Open the project in Blend 2.5 June Preview
2. Click the Asset Library button on the tool bar (is the last one on the bottom) and in the Search fieldn start to type Media and when you see Media Element click it like I am doing in Figure 1.

One of the major advantages to using Silverlight 2.0 over Flash is its very powerful MediaElement.  It is very easy to use and very easy to create custom controls that play, pause and stop the video among other things. 

In this tutorial I am going to show you how to use the MediaElement by creating a Silverlight 2.0 Video Player complete with a cool animated navigation.  In Part I we are going to create the Navigation with some very cool, slick animation using the Visual State Manager (VSM) and Blend 2.5’s new State panel.  The VSM allows us to easily add State Groups to which we can add States that contain transition animations.

There are some really cool new features to Silverlight 2.0, one of which is the ability to style up a cool looking series of Rectangles with various gradients and then group them into a Layout Control, such as a Grid or Canvas and then in Blend 2.5 turn it into a Silverlight 2.0 Button Control complete with the behaviours that are native to a Silverlight 2.0 Button (Click, MouseEnter, MouseLeave, etc.).  I am going to show you how to do just that.  After that I am going to show you how Silverlight 2.0 makes reusing assets and Controls a breeze by placing some content, along with out new stylish custom Button Control into a Layout Control and then turn that into a Silverlight 2.0 UserControl.  Finally, I will show you just how easy it is to reuse our newly created UserControl.  Without any further ado, let’s get to it!

Recently Microsoft released Blend 2.5 June Preview.  So, of course I started looking around to find what was new.  I was blown away by a new panel called the State panel.  This new panel allows you to create State Groups that you can then add states to (called a Visual State Manager (VSM)).  You can even specify the time (in seconds) it takes for a State to transition from one to the next.  So, I then started thinking about a practical application for this new feature.  Of course I could have made an application that had custom buttons (really just a series of grids and not actually a Button Control) and used the State panel to make MouseEnter and MouseLeave effects.  But, this seemed to me to not really show the power of this new feature.  So, then I came up with an idea to make an Image Viewer and use the VSM to handle the animation for me.  Here is how it works: when you roll over the thumbnail it grows to a larger size, when you roll off of it, it shrinks back down to the thumbnail size (see Figure 1-0).  Let’s get started now and build the StateImageViewer UserControl.

Figure 1-0: The StateManagerViewer UserControl in action.