How To: Design a Rich User Interface with Silverlight and Blend

J.D. Meier, Alex Homer, David Hill, Jason Taylor, Prashant Bansode, Lonnie Wall, Rob Boucher Jr, Akshay Bogawat.

Applies To

  • Microsoft Silverlight version 2
  • Microsoft Expression Blend version 2.5

Summary

This How To shows how you can use Microsoft Blend 2 to create an attractive and interactive user interface for a Web application using Silverlight. Afterwards you can work with the project in Visual Studio 2008 for further development. The How To shows you how to create a Blend project, add controls to the user interface, react to user actions, and use a timeline to animate objects such as the controls on the page.

Contents

  • Objectives
  • Overview
  • Summary of Steps
  • Step 1 - Create an Expression Blend Project
  • Step 2 - Drawing and Painting in Expression Blend
  • Step 3 - Handling User Interaction in Expression Blend
  • Step 4 - Animating Objects in Expression Blend
  • Additional Resources

Objectives

  • Learn how to create an Expression Blend project.
  • Learn how to add controls to an Expression Blend project
  • Learn how to add attractive styles and appearance to controls
  • Learn how to react to user interaction and manipulate the controls
  • Learn how to use a timeline to animate controls and styles

Overview

Use Microsoft Blend to create a new project containing a Silverlight project and use Blend to add controls and styling information to the class. It then demonstrates how you can react to user actions and how you can use a timeline to animate objects such as controls.

Summary of Steps

  • Step 1 - Create an Expression Blend Project
  • Step 2 - Drawing and Painting in Expression Blend
  • Step 3 - Handling User Interaction in Expression Blend
  • Step 4 - Animating Objects in Expression Blend

Step 1 - Create an Expression Blend Project

This step shows you how to create a new project and solution in Expression Blend that hosts a Silverlight User Control.
  1. Open Expression Blend.
  2. On the File menu click New Project and click Silverlight 2 Application.
  3. Type a name for the new project, specify a location, and select the language you prefer.
  4. Click OK to create the new project.

You can use Blend to create a WPF executable application, a WPF control library, a Silverlight version 1 Web site, or a Silverlight version 2 application.

When you create a Silverlight version 2 application, Blend generates a solution containing a single XAML page named Page.xaml that implements a UserControl that a Silverlight-capable Web browser can display. This project also contains the ‘application’ files that define the base Silverlight application, and which can be used to create global event handlers. These files are App.xaml and App.xaml.cs or App.xaml.vb.

Step 2 - Drawing and Painting in Expression Blend

This step shows you how to work with Blend to create controls and add styling to them.
  1. In Design View, open the Objects and Timeline Inspector and select the Grid item named LayoutRoot
  2. In the Properties window, select Background in the Brushes section.
  3. Click the Solid color brush icon and change the color of the Grid control to Black by setting the R, G, and B values to zero.
  4. On the Toolbar, click the Rectangle control and draw a rectangle on the designer surface. Make the size around 150 by 60.
  5. In the Objects and Timeline Inspector, right-click the Rectangle item, click Rename, and change the name to innerRectangle.
  6. Right-click on the rectangle on the designer surface and select Make Control…. In the Make Control dialog, change the name to MyControl and click OK.
  7. In the Properties window, select Fill in the Brushes section and click the Gradient brush icon.
  8. Click on the left-hand gradient stop icon below the gradient shader bar and change the start color to #FF07451 in the text box to the right of the color selector.
  9. Click on the right-hand gradient stop icon below the gradient shader bar and change the end color to #FF7676F6 in the text box to the right of the color selector.
  10. In the Objects and Timeline Inspector, click on the innerRectangle control and press Ctrl-C and then Ctrl-V to make a copy of the rectangle. It appears on top of the existing rectangle.
  11. In the Objects and Timeline Inspector, right-click the new Rectangle item, click Rename, and change the name to glassRectangle.
  12. In the Properties window, select Fill in the Brushes section and click the Gradient brush icon.
  13. Click on the left-hand gradient stop icon below the gradient shader bar and change the start color to White. You can type 255 into the R, G, and B text boxes, or type #FFFFFFFF into the text box next to the color selector. Also change the value in the Alpha text box to 75%.
  14. Click on the right-hand gradient stop icon below the gradient shader bar and change the end color to Transparent. Type Transparent or #00FFFFFF in the text box next to the color selector.
  15. Click on the gradient shader bar four times between the start and end to add four new equally-spaced gradient stop icons below it.
  16. Set the color for these alternately to White with an Alpha value of 75% and Transparent.
  17. Make sure that glassRectangle is selected in the Objects and Timeline Inspector, and click the Brush Transform icon (an arrow pointing down and left) in the Toolbar.
  18. On the designer surface, rotate the arrow that appears on the glassRectangle control so that the gradient fill slopes from top left to bottom right to give the appearance of glass.
  19. In the Properties window, select Stroke in the Brushes section.
  20. Click the Solid color brush icon and change the color to White.

Step 3 - Handling User Interaction in Expression Blend

This step shows you how to connect event handlers to controls in Expression Blend and write the event handlers in Visual Studio.
  1. In the Objects and Timeline Inspector, select the glassRectangle control.
  2. In the Appearance section of the Properties window, change the setting for Visibility to Collapsed to hide the glass rectangle.
  3. Click the XAML tab at the side of the designer surface to open the XAML code editor.
  4. In the definition of the Grid control, add the attributes that will attach event handlers to the MouseEnter and MouseLeave events as shown here:
<Grid x:Name="LayoutRoot" MouseEnter="ButtonMouseEnter"
           MouseLeave="ButtonMouseLeave" ... />
  1. In the Project window, expand the MyControl.xaml item and double-click the file named MyControl.xaml.cs or MyControl.xaml.vb (depending on the language you selected when you created the project). The file opens in the Visual Studio code editor.
  2. Add the following code to the file within the partial class MyControl class declaration:
public void ButtonMouseEnter(object sender, EventArgs e)
{
     glassRectangle.Visibility = Visibility.Visible;
}
public void ButtonMouseLeave(object sender, EventArgs e)
{
    glassRectangle.Visibility = Visibility.Collapsed;
}
  1. Save and close the file, then close Visual Studio.
  2. Back in Blend, press F5 to run the project.

When you move the mouse over the rectangle the "glass" effect will appear and disappear. The event handlers for the ButtonMouseEnter and ButtonMouseLeave events you added to the XAML code-behind file cause Silverlight to change the Visibility property of the rectangle.

Step 4 - Animating Objects in Expression Blend

This step shows you how to use a timeline in Expression Blend to animate controls and effects.
  1. In the Objects and Timeline Inspector, click the "+" icon to create a new timeline.
  2. In the Create Storyboard Resource dialog, type the name ButtonClickStoryboard and click OK.
  3. Click the Float button in the Timeline panel (at the top right next to the close button) to open it for editing, and use the zoom selector at the bottom of the window to zoom to 1000%.
  4. Expand the LayoutRoot entry in the Objects and Timeline Inspector and select the glassRectangle control, then click the Record Keyframe icon immediately above the start of the timeline to create a new keyframe. This appears as an oval on the timeline next to the glassRectangle control. This keyframe will show the glassRectangle control with its current properties.
  5. Drag the yellow timeline marker line to 0.2 seconds.
  6. Open the Transform section of the Properties window and click the Rotate tab icon. Change the value of the Angle to 360.
  7. Click the Scale tab icon in the Transform section of the Properties window and change both the X and Y values to 0.5.
  8. In the timeline window, drag the yellow timeline marker to 0.4 seconds. Right-click the white keyframe oval at 0 seconds and click Copy then right-click the* glassRectangle* entry and click Paste. This creates a copy with the same property settings as the first glassRectangle keyframe.
  9. Click the Dock button in the Timeline panel (at the top right next to the close button) to dock it back into the workspace.
  10. Click the XAML tab at the side of the designer surface to open the XAML code editor.
  11. Add the following attribute to the definition of the Grid control (as you did with the MouseEnter and MouseLeave attributes in the previous step).
MouseLeftButtonDown="ButtonMouseClick"
  1. In the Project window, expand the MyControl.xaml item and double-click the file named MyControl.xaml.cs or MyControl.xaml.vb (depending on the language you selected when you created the project). The file opens in the Visual Studio code editor.
  2. Add the following code to the file immediately below the code you added in the previous step:
public void ButtonMouseClick(object sender, EventArgs e)
{
    ButtonClickStoryboard.Begin();
}
  1. Save and close the file, then close Visual Studio.
  2. Back in Blend, press F5 to run the project.

When you click on the rectangle the control spins and then resets itself back to the original position. The event handler for the ButtonMouseClick event you added to the XAML code-behind file causes Silverlight to execute the animation you defined in ButtonClickStoryboard.

Additional Resources

Last edited Dec 17, 2008 at 9:54 PM by prashantbansode, version 1

Comments

No comments yet.