Monthly Archives: August 2012

Learning Microsoft Silverlight 4 (Part 2)

Installing Expression Blend

In the last section, we talked about how to create a new Silverlight application in Visual Studio. We will continue to learn how to use Expression Blend to refine the Silverlight application.

Blend is the tool used to visually design a Silverlight or WPF (Windows Presentation Foundation) application. It is a very innovative tool, and might seem a little unusual to traditional software developers.

To develop Silverlight 4 (or WPF 4 for that matter), you will need to install Microsoft Expression Blend 4 which you can download from the Blend website, http://www.microsoft.com/expression/. We will take a quick tour of Expression Blend in this section, before diving deeper later.

(Note that there is currently no Express version of Expression Blend, only a commercial version is available. The price is $599 for a full version, part of a package called Expression Studio 4 Ultimate with a number of applications (including Expression Blend, Design, Web and Encoder). But you can try it for 60-day free trial.)

Creating a New Silverlight Application in Expression Blend

When you first start Expression Blend, you see the Welcome screen, as shown in Figure below. This screen allows you to open an existing project or create a new one, to find some help before starting, or to open preinstalled samples. If you close the Welcome screen, you can always bring it back with Help, Welcome Screen. The installed samples for Silverlight 4 are quite interesting because they help explain some of the capacities of Blend and of Silverlight. Don’t hesitate to explore them. You can open any sample and run it by pressing F5 (or selecting Project, Run Project from the menu).

If you choose to create a new Silverlight 4 application, you must choose between a Silverlight 4 application (with or without website) and a Silverlight 4 control library, used to host controls that can be included in multiple applications. Just like in Visual Studio, selecting Silverlight 4 Application + Website will create an ASP.NET web application project with a link to the actual Silverlight application. Note, however, the following:

  • In Expression Blend, you do not have the choice between ASP.NET Web Application, Website, or ASP.NET MVC.
  • If you create a Silverlight application without a hosting website, you cannot add this application to another website in Blend. You also cannot create a new website in Blend without an attached Silverlight application.

If you need more extended options when creating your application, you need to create it in Visual Studio. Because Expression Blend and Visual Studio use exactly the same solution files, project files, and code file, you can create an application in the environment of your choice and then modify it somewhere else. You can even open the projects in both environments at the same time which is especially useful when you do design work on your application’s screens.

Opening Hello Silverlight

We will refine our Hello Silverlight application and add some movement and effects. This is the perfect task for Expression Blend: Even though most of what you can do in Blend can also be done in Visual Studio (and vice versa), Blend is more suitable for design tasks, and Visual Studio for development tasks. It is really up to you to choose the tool that suits you the best.

Choose Open Project from the Welcome Screen and look for the folder of HelloSilverlight application. Select the solution file HelloSilverlight.sln and open it in Blend. After opening the solution and MainPage.xaml in Blend, you should be now seeing the exact same scene as in Visual Studio’s designer.

Adding an Effect

We will now add a shadow effect to the Hello Silverlight text block. To do this, follow these steps:

  1. Locate the TextBlock in the Objects and Timeline panel. This panel displays the tree of all the elements on the page, as shown in the figure: The UserControl (the page) contains a Grid, which contains a TextBlock.
  2. Select the TextBlock and then copy and paste it. You can use the context menu for that, or Ctrl+C, Ctrl+V.
  3. Click twice slowly on the first TextBlock in the tree to make its name editable, and change the name to Shadow.

You should now see two text blocks in the Objects and Timeline panel: One is named Shadow, and the second doesn’t have a name. However, both have exactly the same features, and therefore the front one is hiding the back one in the designer. Let’s change this with the next steps:

  1. Select the Shadow element in the Objects and Timeline panel.
  2. Make sure that the Properties panel is selected on the right side of the window, and using the brush editor, change the Shadow’s foreground to black, as shown on the Figure.
  3. On the left of Blend’s window, you should see the tabs Projects, Assets, States, and Parts. You’ll learn more about all the panels in later sections. For now, select the Assets tab. This is where you will find all the controls and effects that we can use in Silverlight.
  4. Select the Effects category. You will see the two built-in effects in Silverlight 4: Blur and DropShadow.
  5. Select the Blur effect and drag/drop it with the mouse on the Shadow TextBlock in the Objects and Timeline panel, as in Figure. 
  6. With the BlurEffect selected in the Objects and Timeline panel, check the Properties panel on the right of the window, and set the Radius property to 40. You should now see a shadow right behind the Hello Silverlight TextBolck.

(Effects in Silverlight 4 are rendered by small components called pixel shaders. Although the default installation of Silverlight contains only two effects, you can find more online and add them to your application, as you will see in “Using Effects and Recording Media.” For this effect, we will use a Blur effect applied to the TextBlock in the background. Note that we could also use the DropShadow effect available in Blend. However the DropShadow effect is slower than the Blur effect; if you can, it is recommended to use a Blur effect instead, as we do here.)

Creating a Pulse Animation

We will now add some movement to the scene, by animating the Shadow when the TextBlock is clicked. Follow these steps:

  1. In the Objects and Timeline panel, click the small plus sign (+) located on the top right of the panel to create a new storyboard.
  2. In the Create Storyboard Resource dialog, name the storyboard ShadowStoryboard.
  3. Notice how Blend turns in animation recording mode, with a red border signifying that the actions you perform now on the scene will be part of the storyboard.
  4. Move the yellow vertical line (called the timeline) to 500 milliseconds, as shown in the Figure. Select the Shadow TextBlock and Click the Record Keyframe button. This button is circled in orange in the Figure.

This operation is adding a keyframe to the Silverlight scene at 500 milliseconds after the start of the storyboard. Now we need to modify the scene with the next steps to tell Silverlight what the user should see during these 500 milliseconds. We will also set a few properties on the storyboard itself. Silverlight will calculate the smooth transition to apply:

  1. With the Shadow TextBlock selected, set the Opacity property to 0% in the Properties editor.
  2. Click the name ShadowStoryboard in the Objects and Timeline panel. You should now see the storyboard’s properties in the Properties panel.
  3. Check the AutoReverse check box. This means that the storyboard will reverse automatically after 500 milliseconds and restore the scene to the original state.
  4. Finally, set the RepeatBehavior to 3x. This means that the storyboard will run three times when triggered. Possible values are lx, 2x, 3x, 4x, and so on. You can also enter Forever, meaning that the storyboard will never stop.
  5. Close the storyboard by clicking on the small X button on the right of the name ShadowStoryboard.

Triggering the Storyboard

Now it’s time to trigger the storyboard and to test it in the web browser. To do this, we will handle an event in C# code with the following steps:

  1. Select the TextBlock in front of the scene (the one with no name).
  2. To notify the user that something will happen if he clicks the TextBlock, set the Cursor property to Hand.
  3. In the Properties editor, click the Events button, shown in the Figure (circled in orange). This displays the list of all the events for the TextBlock control.
  4. Double-click in the field next to the name MouseLeftButtonDown. This event will be triggered when the user presses the mouse’s left button on the TextBlock control. Depending on your settings, this opens a C# code file in Expression Blend’s code editor, or in Visual Studio. This code file is named the code behind file, and this is the location where event handlers and other methods for the Silverlight page are implemented.

The double-click action you performed in step 4 added a new event handler to the code file, named TextBlock_MouseLeftButtonDown. Modify this event handler as shown below.

private void TextBlock_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

var storyboard = this.Resources[“ShadowStoryboard”] as Storyboard;
if (storyboard != null)
{
storyboard.Begin();
}
}

Testing the Application

Now it’s time to run and test the application. You can do this in Expression Blend by pressing the F5 key (or selecting Project, Run Project from the menu); you can also do this in Visual Studio by pressing Ctrl+F5 (or selecting Debug, Start Without Debugging). If everything goes well, your default web browser should start, and you will see Hello Silverlight.

Pass your mouse over this text block (it should turn into a Hand cursor) and press the left mouse button. Observe how the shadow below the text block animates smoothly three times.

Summary

In this section, you saw how to install Visual Studio and Expression Blend, and how to start developing a simple Silverlight application. You will spend a lot of time in Visual Studio, so it is important to set it up correctly and to understand its features. For those interested in pushing the design of your application further than what the Visual Studio designer allows, Expression Blend is the perfect tool. This chapter also got you started with a Silverlight application, and showed that creating a rich application using gradients, effects, and animations is quite simple with the right tools. The next sections cover Silverlight controls, especially the new controls (and related features) added in Silverlight 3 and 4. These are the building blocks for your application, and a good understanding of these elements is vital.

(Reference Book: Silverlight 4 Unleashed)

Advertisements

Leave a comment

Filed under Expression Blend 4, Learning Microsoft Silverlight 4, Microsoft Silverlight