With the new bits of Silverlight 2.0 just released, it’s exciting times for web developers around the globe. However, it also time to get ramped-up on the new ways. So, let’s quickly dive in and get started. Our objective here is to build a very simple user control which has an image and some text, on clicking the image, there is a small animation that renders a media element and allows us to play a video. Hope it will be fun.
1. Creating a project structure
The solution will comprise a Silverlight application and a web application. The Silverlight application has a Silverlight user control, while the web application renders the Silverlight components.
Step 1: Create a Silverlight Project
The Silverlight application will automatically prompt you to add a new web application with an attached Silverlight link. If you are not planning to use an already existing web application, select the defaults and click OK. This will add a web application, with a .xap file in the ClientBin directory, which will contain Silverlight related information. The Silverlight application contains a Page.xaml user control by default. We may add other user controls later. The web application will host the Silverlight control inside a Silverlight plug-in. You may notice a web page and an html page were added to the application, by default, to serve as test pages.
Step 2: Understanding Animations
Now that our project structure is ready, let’s jump start into building our user control. The user control will have the aforesaid animation and be hosted on a web page. To start with, open Page.xaml in Blend.
Visual Studio 2008 will work seamlessly with blend to open the whole solution. While we will later hook up events inside Visual Studio, Blend is the place to get our animations gelled in. Though this article is not intended at exploring animations in details, yet, we will have a basic look into how we can make things work.
Inside Blend, I first add up a few dummy images and a movie to use while building our user control. Once that is ready, we add a canvas to our user control and drag drop a Text Block to hold some text, an image for the start up thumbnail, an image which is a placeholder for the media buttons and a media element, pointing to our movie. The initial opacities of the media element and the play buttons are set to zero, while the thumbnail and textboxes are fully visible. The idea is, on clicking the thumbnail, the opacity of the thumbnail will go from 100 to 0 and so will be for the Text Block, while the opacities of the media element and the play buttons will grow from 0 to 100. On closing the animation, the reverse happens.
Keeping this idea in mind, we would need two storyboards for the animations. It could be achieved using one, but I would keep things very simple for this basic demo. On creating the forward animation, the initial and the final key-frames should look like the following:
Thus, from an initial state, in the final key-frame, the user control expands, the thumbnail grows and fades out while the media player seamlessly fades in. A close button appears on the top to reverse the animation.
The reverse storyboard just reverses the animation sequence and restores the control to its original shape. Thus, while the first key-frame will be a replica of the last key-frame of the forward animation, the last key-frame of the reverse animation will appear as follows:
Blend gives full playback opportunity, without having to deploy and test the control on a real site. Once the animations look satisfactory enough, it’s time for us to hook up the events. The forward storyboard is triggered by clicking the initial image thumbnail, while clicking the close button triggers the reverse animation. So, let’s quickly hook up the events and test our control.
Step 3: Hooking up events
If we move to the code-behind file for the user control, it will have very little content. However, unlike other versions of Silverlight, now we can directly access the child elements of the user control from the code-behind and hook up events. Let’s add two event handlers n the code. The final code block should resemble the following:
public Page()
{
InitializeComponent();
image.MouseLeftButtonDown += new MouseButtonEventHandler(image_MouseLeftButtonDown);
rectangle.MouseLeftButtonDown += new MouseButtonEventHandler(rectangle_MouseLeftButtonDown);
}
void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
ReverseBackground.Begin();
Here, rectangle is the name for my close button while image is my initial thumbnail preview for the video. I get hold of the two storyboards (while must be added to the user control’s resources collection) and play them appropriately. Simple as a cakewalk, isn’t it.
Step 4: Let’s see it work
Now that all our components are ready, let’s have a look at the end product. In the web application, there must be a test page to test your control (if you had selected the default options). On this page, you will notice a section like:
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/MediaPlayer.xap" Version="2.0" Width="100%" Height="100%" />
This new control allows you to host a plug-in on a page and configure its source xaml from the .xap reference created earlier. That’s all. Build and run your web application, it should run seamlessly. In the next article, I will look into actually hooking up some functionality into the media player we just designed to get the video play/ pause/ stop and other similar functionality working.