Silverlight 2 - Quickstart

Quick start with Silverlight 2

Page 1 of 33

Quick start with Silverlight 2

You can use Microsoft Expression Blend 2 with Service Pack 1 to quickly design stunning user interfaces for your Microsoft Silverlight 2 applications. Silverlight 2 provides the ability to deliver rich interactive applications and media experiences for the web. For more information about how to develop Silverlight 2, see Silverlight learning center.

In This Section Conceptual Overview of Silverlight 2

How to Create a project for a Silverlight 2 application Open an existing Silverlight 2 project Draw a shape or path in your Silverlight 2 project Draw a control in your Silverlight 2 project Create a reusable template for a system control Modify the appearance of a system control in different states Modify the transition time between state changes in system controls Create a new user control in your Silverlight 2 project Define different visual states and transition times for a user control Change state in response to user interaction Add animation that will play after a change in state Import a custom control by adding a reference Create a skin for a control in a Silverlight 2 project Load a new page dynamically in your Silverlight 2 application Customize an Expression Encoder template for Silverlight 2 Add a Silverlight 2 application to a website Install the Silverlight 2 tools and runtime Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Overview of Silverlight 2

Microsoft Silverlight 2 is a cross-browser, cross-platform plug-in for delivering rich applications over the web that incorporate video, animation, interactivity, and stunning user interfaces. Silverlight 2 applications look and behave the same on Microsoft Windows-based computers as they do on Apple Macintosh computers, in most browsers, and without any additional installation requirements. Silverlight 2 provides a consistent presentation model by using XAML. In Microsoft Expression Blend 2 with Service Pack 1 installed, you can quickly design stunning user interfaces for your Silverlight 2 applications and test the results.

What can you do in Silverlight 2? The best way to understand what you can create using Silverlight 2 is to see example applications. Expression Blend 2 Service Pack 1 includes sample

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 2 of 33

Silverlight 2 projects that you can open on the artboard by clicking Welcome Screen on the Help menu, and then clicking one of the following samples from the Samples tab: 

Memory



ImageGallery

Additionally, you can find other examples and samples online at the Silverlight Showcase and Silverlight Gallery. Back to top

Silverlight 2 support in Expression Blend 2 You can create and work with Silverlight 2 projects in Expression Blend 2 with Service Pack 1 installed. Silverlight 2 supports many features that are in common with Windows Presentation Foundation (WPF) that Silverlight 1 did not support. For example, more layout panels are available, and more controls such as the Button and TextBox control are available. Note: 3D objects, dynamic resources, external resource dictionaries, XML data sources, and element-to-element data binding are not supported in Silverlight 2 projects. Triggers are not supported, but a feature named States provides similar functionality.

Workspace When a Silverlight 2 project is open, the Expression Blend user interface shows only Silverlight 2-applicable controls, properties, and tools. For example, the controls that are not supported do not appear in the Toolbox or the Asset Library.

Controls To design the user interface of your Silverlight 2 application, you add controls and other elements to a XAML document (usually Page.xaml) in a Silverlight 2 project. The Controls tab of the Asset Library in Expression Blend lists the controls that are available in the Silverlight 2 runtime. For information about how to add controls to your project, see Draw a control in your Silverlight 2 project. For information about how to add more controls to the Asset Library, see Import a custom control by adding a reference.

Resources Static resources and templates are supported, which means that you can create reusable colors, brushes, and skins for controls. Dynamic resources are not supported. For more information about resources and templates, see Modify the appearance of a system control in different states and Create a skin for a control in a Silverlight 2 project.

States Controls can look different depending on which state they are in. For example, a button changes color slightly when you move the mouse pointer over it. "MouseOver" is one of the states of a button. You can customize the appearance of the different states of any system control that is included with Expression Blend or any imported custom Silverlight 2 control that inherits from the Control class. You can modify the states of these controls in a copy of the control's template. For more information, see Modify the appearance of a system control in different states. The length of time it takes to transition between states is also customizable. For more information, see Modify the transition time between state changes in system controls. You cannot create a template for a user control (a control that inherits from the UserControl class), but you can customize a user control by designing it from scratch and adding custom states. For more information, see Create a new user control in your Silverlight 2 project and Define different visual states and transition times for a user control.

Media Media files are supported in Silverlight 2 projects. When you insert a media file into an open XAML document, a MediaElement object is created to display the media file. MediaElement objects include an AutoPlay property that you can set to True to make the object start to play the media file as soon as the object loads in your application. The MediaElement also has events that relate to download progress and buffering that you can access in the Events view of the Properties panel. For more information about how to hook up to events, see Create a new event handler method.

Data Common Language Runtime (CLR) data sources are supported, but XML data sources and element-to-element data binding are not.

Code-behind files XAML document code-behind files are written in C# or Visual Basic .NET. For an example of using code-behind files in a Silverlight 2 application, see Load a new page dynamically in your Silverlight 2 application. Back to top

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 3 of 33

Cross-product support You can work with Silverlight 2 projects in other products in the following ways: 

Import Silverlight 2 projects and encoding templates from Microsoft Expression Encoder 2 with Service Pack 1 installed. For more information, see Customize an Expression Encoder template for Silverlight 2.



Publish Silverlight 2 applications by using the deployment features of Microsoft Expression Web 2 or Microsoft Visual Studio 2008. You can also copy the compiled application files to a web folder. For more information, see Add a Silverlight 2 application to a website.



Debug your Silverlight 2 project by opening it in Visual Studio 2008.

Back to top

The files in a Silverlight 2 project Expression Blend creates the same set of files as Microsoft Visual Studio 2008 when you create a project for a Silverlight 2 application and select the Dynamically generate an HTML test page to host Silverlight within this project option in the Add Silverlight Application dialog box of Visual Studio 2008. The following files are generated when you create a Silverlight 2 project. File

Description

ProjectName.sln

A Visual Studio solution file that specifies configuration settings for the solution, and references all the projects in the solution.

ProjectName.csproj A project file that specifies configuration settings for the project (including the starting web page), and references all the source files in the project.

or ProjectName.vbproj

A file where application-level resources are defined. For example, if you customize a button template and select to define it at the application level, any document in your project can use the template to style a button.

App.xaml

App.xaml.cs or

The code-behind file for the App.xaml file.

App.xaml.vb A default XAML file in which to begin designing the user interface of your Silverlight 2 application.

Page.xaml Page.xaml.cs

The code-behind file for the corresponding content file. User interaction and application behavior is often programmed in the code-behind file.

or Page.xaml.vb

AppManifest.xml

Defines the assemblies that are included in the Silverlight 2 application. For example, a Silverlight 2 project created in Expression Blend 2 with Service Pack 1 installed will build a Silverlight 2 application in an assembly file (ProjectName.dll), so an AppManifest.xml will always list at least the assembly created by the project in which it resides.

AssemblyInfo.cs Defines properties for the application, such as the version number, description, loaded assemblies, and so on.

or AssemblyInfo.vb

Tip: The file that you will work with most often is Page.xaml, which is where you can design the user interface of your Silverlight 2 application. Other files you might modify are the App.xaml file and any other content files (.xaml) that you add to your project. When you build and test a Silverlight 2 project, the following files are created in the \bin\debug folder, and Expression Blend tries to open the starting web page. File

Description

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

AppManifest.xaml

A Silverlight 2 version of the AppManifest.xml file.

Default.html (or TestPage.html if the project was created with Visual Studio 2008)

A web page that loads the Silverlight 2 application (contained in ProjectName.xap) into the browser.

ProjectName.dll

The compiled assembly of the application that you designed in the content files of your project.

ProjectName.pdb

Debug information for the application.

ProjectName.xap

A compressed archive that includes all the content and resources for the Silverlight 2 application. Users download this file on their browsers and run it with the Silverlight 2 plug-in.

Page 4 of 33

References Assembly references are listed under Files in the Project panel of Expression Blend.

When you create a new project, default references to Silverlight 2 assemblies are added for you. It is in these referenced assemblies that the controls such as Button and TextBox are defined. You can add other Silverlight 2 assembly references as you need them. You can also add references to .dll files that are compiled from other Silverlight 2 projects. For more information, see Import a custom control by adding a reference. Back to top

Learning resources You can learn more about how to create Silverlight applications at the following websites: 

Silverlight learning center



Silverlight 2 QuickStarts

Back to top Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Create a project for a Silverlight 2 application

You can create a Microsoft Silverlight 2 project in Microsoft Expression Blend 2 with Service Pack 1 installed. In Expression Blend, a Silverlight 2 project builds a Silverlight 2 application and supporting files, which include an HTML test page named Default.html that will load your application in a browser window. Tip: The HTML test page is overwritten every time that you build or test your project. If you want to modify the test page for your own use, save it to a different location first.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 5 of 33

To create a Silverlight 2 project 1. On the File menu, click New Project (CTRL+SHIFT+N).

2. In the New Project dialog box, under Select a project type, select Silverlight 2 Application.

3. Next to Name, enter a name for your project. This will become the name of the project folder and the name of your application's namespace. Tip: Namespace is a Microsoft .NET Framework term for the name that identifies your application to other applications. For more information, see Understan and Using Assemblies and Namespaces in .NET. 4. Next to Location, verify the path where you want to save your project. To select a different folder, you can click Browse. Note: The Location box is available only if the Save new projects to the Expression Blend Projects folder (or a specified folder) option is selected in the Projec of the Options dialog box (Tools menu). Otherwise, projects are stored in memory until you click Save All on the File menu. 5. In the Language drop-down list, select the programming language for your code-behind files (Visual Basic or Visual C#). 6. Click OK. A Silverlight 2 project is created and opened for editing. You can now begin creating content (draw shapes and controls) in the main page (Page.xaml) of your project. For a list of the files that are generated by Expression Blend 2 and a description for each file, see "The files in a Silverlight 2 project" section in the Overview of Silverlight 2.

Next steps 

You can design the user interface of your Silverlight 2 application by adding objects to the main document (typically Page.xaml). For more information, see Draw a shape or path in your Silverlight 2 project and Draw a control in your Silverlight 2 project.

See also Concepts Open an existing Silverlight 2 project Create a Silverlight 1.0 project Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Open an existing Silverlight 2 project

You can open a Silverlight 2 project in Microsoft Expression Blend 2 with Service Pack 1 installed, whether the project was created in Expression Blend or in Microsoft Visual Studio 2008 with the Microsoft Silverlight Tools for Visual Studio 2008 installed.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 6 of 33

To open a Silverlight 2 project 1. On the File menu, point to Open, and then click Project/Solution (CTRL+SHIFT+O). Note: The Site option on the Open menu is for Silverlight 1 projects only. 2. In the Open Project dialog box, browse to the folder where your project is saved, and then double-click the solution file (.sln). The Silverlight 2 project opens for editing and displays the startup page on the artboard. Tip: You can also open a project by double-clicking the project file (.csproj or .vbproj).

To open a Silverlight 2 project that was created by Visual Studio 2008 1. On the File menu, point to Open, and then click Project/Solution (CTRL+SHIFT+O). 2. In the Open Project dialog box, browse to the folder where your Visual Studio 2008 project is saved, and then double-click the solution file (.sln). The Silverlight 2 project opens for editing. 

If the Visual Studio 2008 project was created by using the Dynamically generate an HTML test page to host Silverlight within this project option, the startup page appears on the artboard. The file structure of the Visual Studio 2008 project is the same as the file structure of an Expression Blend project, except that when you build the project, the test page in the Bin/Debug folder is named TestPage.html instead of Default.html.



If the Visual Studio 2008 project was created by using the Add a new Web to the solution for hosting the control option, the solution includes a website project and the Silverlight 2 control project. If the Silverlight 2 control project is the startup project for the solution, the startup page appears on the artboard. If the website project is the startup project, no page appears on the artboard. You can open your content page for editing by double-clicking the name of the file (typically Page.xaml) under Files in the Project panel. Important: If you build and test your project (F5), you will not see the content of your application unless the ProjectNameTestPage.aspx or ProjectNameTestP file is set as the starting web file. In Expression Blend, right-click one of these files in the website project, and then click Startup. Testing your proj will then display your content. This is a temporary change that you will have to do every time you open your project in Expression Blend unless th 2 control project is made the startup project for the solution. To change the startup project, open the solution in Visual Studio 2008, right-click the Silverlight 2 control project in Solution Explorer, and then click Set as StartUp Project.

To open a Silverlight 2 project in Visual Studio 2008 1. If you have not installed the Silverlight tools for developers, you will not be able to create or modify Silverlight 2 projects in Visual Studio 2008. Install the tools from Microsoft Silverlight Tools for Visual Studio 2008. 2. Open Visual Studio 2008. 3. On the File menu, point to Open, and then click Project/Solution (CTRL+SHIFT+O). 4. In the Open Project dialog box, browse to the folder where your project is saved, and then double-click the solution file (.sln).

To close an open project in Expression Blend 

On the File menu, click Close Solution (CTRL+SHIFT+C).

See also Concepts Open a Silverlight 1.0 project Install the Silverlight 2 tools and runtime Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Draw a shape or path in your Silverlight 2 project

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 7 of 33

All Windows Presentation Foundation drawing tools and features are available to Silverlight 2 projects in Microsoft Expression Blend 2 with Service Pack 1 installed. You can draw shapes, paths, and controls to design the user interface of your Silverlight 2 application. Items that you draw become objects in your application.

To draw a shape 1. In the Toolbox, select one of the shape tools: Rectangle

or Ellipse

.

Tip: To view all the drawing tools, right-click the tool that is visible in the Toolbox. The Line tool creates a path object, which is covered later in this topic.

2. On the artboard, draw the shape by dragging with your mouse. Notice that, as you draw the shape, the width and height dimensions appear as follows:

Tip: Holding SHIFT when you drag will keep the height and width the same. Doing so will produce a square when you draw a rectangle, or produce a perfect when you draw an ellipse. Tip: Holding ALT when you drag will put the center point at the first point where you click, instead of making the top-left corner of the shape the first point th you click. After you release the mouse button, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform on the shape object. The mouse pointer changes to indicate which action you can do, shown as follows.

3. Save your changes (CTRL+S).

Next steps 

Apply a brush to an object's fill or stroke



Round the corners of a rectangle



Convert a shape to a path



Combine shapes or paths



Make or release a compound path



Apply, modify, or remove a clipping path



Reposition or translate an object

To draw a path

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

1. In the Toolbox, select one of the path tools: Pen

Page 8 of 33

or Pencil

.

Tip: To view all the path tools, right-click the tool that is visible in the Toolbox.

2. On the artboard, draw a path by doing one of the following: 

With the Pencil tool, drag on the artboard to produce a pixel everywhere that your mouse pointer touches.



With the Pen tool, click the artboard to produce points (or vertices) that will make up a path object. Optionally, drag to produce curves at each point. To close the path, click the first point. To exit the Pen tool without closing the path, select another tool or select an object under Objects and Timeline.

After you finish drawing the path, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform on the path object. The mouse pointer changes to indicate which action you can do with the Selection

tool.

To modify individual points on the path, click the Direct Selection tool. The path object displays individual points and line segments that you can click and move. For a list of ways to modify paths, see Pen and direct selection usage.

3. Save your changes (CTRL+S).

Next steps 

Apply a brush to an object's fill or stroke



Draw a straight line



Draw a curve



Draw a freeform path



Delete part of a path



Add or remove a point on a path



Change the shape of a curve



Convert a shape to a path



Combine shapes or paths



Make or release a compound path



Apply, modify, or remove a clipping path



Reposition or translate an object



Animate the points on a path or clipping path

To draw a line

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

1. In the Toolbox, select the Line

Page 9 of 33

tool.

Tip: If you cannot see the Line tool, right-click the tool container in the Toolbox, and then select the Line tool.

2. On the artboard, draw the line by dragging with your mouse. Tip: Holding SHIFT when you drag will constrain the line to angles that are multiples of 15 degrees. Tip: Holding ALT when you drag will put the center point at the first point where you click, instead of making the starting point the first point that you click. After you release the mouse button, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform. The mouse pointer changes to indicate which action you can do with the Selection

tool.

To modify the starting or ending point of the line, click the Direct Selection tool. The line, which is a path object, displays individual points that you can click and move. For a list of ways to modify paths, see Pen and direct selection usage. 3. Save your changes (CTRL+S).

Next steps 

Add or remove a point on a path



Change the shape of a curve



Reposition or translate an object



Animate the points on a path or clipping path

See also Concepts Draw a control in your Silverlight 2 project Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Draw a control in your Silverlight 2 project

User interface controls such as buttons and textboxes enable your application to respond to user input. Versions of many of the Windows Presentation Foundation controls are available to Silverlight 2 projects in Microsoft Expression Blend 2 with Service Pack 1 installed.

To draw a system control 1. In the Toolbox, select a control. Tip: To view all the tools in a tool container, right-click the tool that is visible in the Toolbox.

Tip: To view all the available controls, click the Asset Library Library button in the Toolbox.

file://C:\Windows\Temp\~hhCE27.htm

button in the Toolbox. After you select a tool in the Asset Library, it will appear above the A

6/16/2009

Quick start with Silverlight 2

Page 10 of 33

2. On the artboard, draw the control by dragging with the mouse. The result will depend on the type of control that you draw. 

After you draw a text control, the resulting object enters text-editing mode so that you can change the content that is displayed in the object.

To exit text-editing mode, press ESC. To enter text-editing mode again, select the object by using the Selection tool, and then press F2. After you exit text-editing mode, translation handles appear that you can use to scale, rotate, or move the object or perform other actions.



Note: For more information about how to format text, see Format text. After drawing a nontext control, translation handles appear around the resulting object. By using these handles, you can scale, rotate, move, skew, and perform other actions. The mouse pointer changes to indicate which action you can do, shown as follows.

If the control displays text, such as the content of a button or check box, you can quickly change the text by pressing F2 to enter text-editing mode. To exit text-editing mode, press ESC. 3. Save your work (CTRL+S).

Next steps 

You can customize the appearance of the system control you have just drawn by modifying the template that is applied to the control. Controls look different depending on which state they are in. For example, a button changes color slightly when you move the pointer over the button. "MouseOver" is a state that you can customize. For more information, see Modify the appearance of a system control in different states.



You can extend the time it takes for a control to transition between states. For more information, see Modify the transition time between state changes in system controls.



You can add more animation to the state transitions of a control. For more information, see Add animation that will play after a change in state.

See also Concepts Create a new user control in your Silverlight 2 project Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Create a reusable template for a system control

You can customize the appearance of system controls by modifying a copy of the control's template. The following procedure uses a button, but you can create a template for any system control that is included with Microsoft Expression Blend 2 or any imported custom Silverlight 2 control that inherits from the Control class.

To create a copy of the template of a button 1. Draw a system control on the artboard. For example, select the Button

tool from the Toolbox, and then use your mouse to draw it on the artboard.

2. Use the breadcrumb bar at the top of the artboard to create a copy of the button's template. Click [Button], click Edit Control Parts (Template), and then click Edit a Copy.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 11 of 33

Tip: You create a copy because you cannot modify the default template for a system control. Alternatively, you could create an empty template and design yo button by importing art assets or drawing new objects. 3. In the Create Style Resource dialog box, enter a name for the template, such as ButtonStyle1.

4. Under Define in, select where you want the template to be defined: 

To make the template available to a button object in any document in your application, select Application.



To make the template available only to button objects in the current document, select This document.



To make the template available only to this button in this document, select Button from the drop-down box beside This document.

5. Click OK to exit the dialog box and open the template for editing. Tip: The breadcrumb bar makes it easy to switch between editing the template that is applied to an object, and editing the object itself. For example, to exit template-editing mode, click [Button] in the breadcrumb bar.

To return to template-editing mode, make sure that the button object is selected (to display the breadcrumb bar for the button), and then click Template in breadcrumb bar.

Troubleshooting 

If you do not see the option to Edit Control Parts (Template) in the breadcrumb bar, you might have selected a control that does not support templates. For example, layout panels such as Grid do not use templates. Only controls that inherit from the Control class use templates.



You cannot create a template for a user control (a control that inherits from the UserControl class), but you can customize a user control by designing it from scratch. For more information, see Create a new user control in your Silverlight 2 project.

Next steps 

You can customize the appearance of the system control by modifying properties in the template you just created. For more information, see Modify the appearance of a system control in different states.



You can change the time it takes the button to expand when the mouse pointer moves over it. For more information, see Modify the transition time between state changes in system controls.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2



Page 12 of 33

You can apply this template to another button in your project, or draw a new button that already has the template assigned. For more information, see Apply a style resource.

Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Modify the appearance of a system control in different states

Controls look different depending on which state they are in. For example, a button changes color slightly when you move the mouse pointer over it. "MouseOver" is one of the states of a button. You can customize the appearance of different states of system controls. The following procedure uses a button, but you can customize any system control that is included with Microsoft Expression Blend 2 or any imported custom Silverlight 2 control that inherits from the Control class.

To modify the appearance of a button in different states 1. Create a reusable template for a system control such as the Button

control.

2. If you are not already in the editing mode of a template, right-click a control on the artboard, point to Edit Control Parts (Template), and then click Edit Template. Optionally, select the object and then click Template in the breadcrumb bar.

3. While in template-editing mode, the states of the button (such as Normal and MouseOver) are displayed under States in the Interaction panel. States are contained in state groups (such as CommonStates and FocusStates).

The parts of the template are displayed under Objects and Timeline. It is the appearance of these parts that you can modify for a selected state.

4. Click MouseOver under States. Notice that a red circle appears at the top of the artboard to let you know that state recording is on. This means that any property changes you make will be recorded for the selected state. Under Objects and Timeline, the parts of the template that have properties set

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 13 of 33

differently from when Base is selected are identified by red circles around the expander buttons.

5. To change the size of the button when in the MouseOver state, click [Grid] under Objects and Timeline. Tip: The Grid is a layout panel that arranges child objects according to horizontal alignment, vertical alignment, and margins. For more information about l panels, see Layout overview and Grid panel. 6. In the Properties panel, under Transform, click the Scale tab. Change the X and Y values to 1.1. 7. Save your work (CTRL+S), and then press F5 to build and test your application. After your application opens in a browser window, move your mouse pointer over the button to see it expand.

Troubleshooting 

Some template parts have properties that are bound to values outside the template. For example, the Fill property of the Background part is templatebound to the Background property of the button. This means that when you draw a button that uses this template, the template will take on the value that you set on the button itself. Template binding makes it possible to design a customized control, but still enable some changes when you include the controls in your application. Bound properties are identified in the template by an orange bounding box. If you want to change a template-bound property, first click the Advanced property options button next to the property, and then click Reset.



You cannot add custom states and state groups to the template of a system control. However, you can create a custom user control and then define custom states and add code to change states based on user interaction. For more information, see Create a new user control in your Silverlight 2 project, Define different visual states and transition times for a user control, and Change state in response to user interaction.



If you have trouble when you view your application in a browser, you might not have the correct Silverlight 2 runtime installed. For more information, see Install the Silverlight 2 tools and runtime.

Next steps

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 14 of 33



You can change the time it takes the button to expand when the mouse pointer moves over it. For more information, see Modify the transition time between state changes in system controls.



You can add animation, such as making the button spin around when the mouse pointer moves over it. For more information, see Add animation that will play after a change in state.



You can apply this template to another button in your project, or draw a new button that already has the template assigned. For more information, see Apply a style resource.

See also Concepts Draw a control in your Silverlight 2 project Modify the transition time between state changes in system controls Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Modify the transition time between state changes in system controls

Controls look different depending on which state they are in. For example, a button changes color slightly when you move the mouse pointer over it. "MouseOver" is one of the states of a button. You can customize the transition time between states of system controls by modifying a copy of the control's template. The following procedure uses a button, but you can customize any system control that comes with Microsoft Expression Blend 2 or any imported custom Silverlight 2 control that inherits from the Control class. Tip: You can also modify the states and transition times of user controls. For more information, see Define different visual states and transition times for a user control.

To modify the transition time between states 1. Create a reusable template for a system control such as the Button

control.

2. If you are not already in the editing mode of a template, right-click a control on the artboard, point to Edit Control Parts (Template), and the click Edit Template. Optionally select the object and then click Template in the breadcrumb bar.

3. While in template-editing mode, the states of the button (such as Normal and MouseOver) are displayed under States in the Interaction panel. States are contained in state groups (such as CommonStates and FocusStates).

Next to CommonStates a text box with the value of 0 seconds ("0s"). This is the default transition duration for all the transitions between the states in

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 15 of 33

the state group. For example, it takes 0 seconds to transition from any state to the Normal state. You can change this default transition duration.

This value is overridden with the value "0.1s" when transitioning to the MouseOver state and to the Pressed state. The star and the arrow indicate "from any state to this one."

4. Click the Add Transition

button for the MouseOver state under States, and then click the MouseOver to Normal transition.

5. In the new line for the MouseOver to Normal transition, change the value in the text box from "0s" to "0.5s."

6. Save your work (CTRL+S), and then press F5 to build and test your application. After your application opens in a browser window, move your mouse pointer over the button to see how slowly it transitions back to its previous state when the mouse leaves the button.

Troubleshooting 

If you have trouble viewing your application in a browser, you might not have the correct Silverlight 2 runtime installed. For more information, see Install the Silverlight 2 tools and runtime.

Next steps 

You can change the appearance of your button in different states. For more information, see Modify the appearance of a system control in different states.



You can add animation, such as making the button spin around when the mouse pointer moves over it. For more information, see Add animation that will play after a change in state.



You can apply this template to another button in your project, or draw a new button that already has the template assigned. For more information, see Apply a style resource.

See also Concepts Draw a control in your Silverlight 2 project Add animation that will play after a change in state Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Create a new user control in your Silverlight 2 project

You can design your own customized controls that you can reuse multiple times in a Silverlight 2 project. These controls inherit from the UserControl class and therefore do not use templates. However, you have full control over the appearance of your user control by designing it from the ground up.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 16 of 33

To create an empty user control 1. Open a Silverlight 2 project. 2. On the File menu, click New Item (CTRL+N).

3. In the New Item dialog box, under Installed templates, select UserControl. 4. Next to Name, enter a descriptive name for your user control. 5. If you want a code-behind file to be generated for this user control, select Include code file. Tip: You will need a code-behind file if you want the user control to respond to user interaction, or if a developer will be creating custom behavior for the use control. 6. Click OK to close the dialog box and open the user control for editing. You can now design the look of your user control.

To create a user control from existing objects 1. Select the existing objects that you want to make part of the new user control. Tip: To select multiple objects, hold the CTRL key when you click each object. 2. On the Tools menu, click Make Control (F8).

3. In the Make Control dialog box, enter a descriptive name for your user control. 4. If you want to leave the selected objects where they are and created duplicates in the user control, select Leave original content as is and create duplicates as necessary. 5. Click OK to create the user control files and open the XAML file on the artboard for editing.

To draw a new instance of your user control in a document in your project 1. Save all your files (CTRL+SHIFT+S). 2. Build your project (CTRL+SHIFT+B) to make the user control appear in the Asset Library. 3. In the Toolbox, click Asset Library

.

4. In the Asset Library, in the Custom Controls tab, select your user control.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 17 of 33

5. Using your mouse, draw your user control on the artboard. Tip: Use the Make Button command in Silverlight 2 projects to make a button from selected objects. You can select objects on the artboard, group them into a layout panel such as a Grid, and then click Make Button on the Tools menu. Make Button does not create a user control. Instead, it creates a button style that contains a template made up of the objects that you selected. To draw another button of the same kind, select your style in the Local Styles tab of the Asset Library and then draw on the artboard.

Troubleshooting 

When you use the Make Control command, if the objects that you selected include factored content such as event handlers or triggers, you may need to restore those event handler methods and triggers in the newly created user control.

Next steps 

You can add more objects to your user control. For more information, see Draw a shape or path in your Silverlight 2 project, Draw a control in your Silverlight 2 project, or Add an image, audio, or video file to a project.



You can define custom states that your user control can be in, and change the appearance of your user control in each state. For more information, see Define different visual states and transition times for a user control.



You can make your user control respond to a mouse click by changing its appearance. For more information, see Change state in response to user interaction.



You can make your user control change its appearance in a more elaborate way when it is clicked. For more information, see Add animation that will play after a change in state.



You can make your user control appear at runtime in response to a button click or other user interaction. For more information, see Load a new page dynamically in your Silverlight 2 application.

See also Concepts Make an object into a button Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Define different visual states and transition times for a user control

When you create your own user control, you can add custom states and state groups to define a different appearance for each state of your user control. For example, if your user control represents a playing card, you might want to have a FaceUp and FaceDown state. Note: When you modify the template of a system control, such as a button, default state groups and states are already present. You cannot add new state groups or add states.

To define a state group for your user control 1. If you do not already have a user control, you can Create a new user control in your Silverlight 2 project, and open the XAML file for editing. Tip: You can also define state groups for your main document (typically Page.xaml). 2. The States pane in the Interaction panel shows the default appearance of the objects in your user control. You can select Base whenever you want to exit state-recording mode, such as when you want to add more objects to your document.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

3. Under States, click the Add State Group

Page 18 of 33

button.

A new state group is added, and the name is highlighted so that you can enter a new name.

You can now add states to the state group, or add more state groups.

To add states to a state group 1. Next to the name of a state group under States, click the Add State

button.

A new state is added to the state group, and the name is highlighted so that you can enter a new name.

2. Select the state to turn on state recording. Changes you make to the appearance of objects in your document will be recorded for the selected state.

Tip: When you specify states and state groups, consider all the visual states that you want your user control to display, and then identify the states that you do want to be displayed at the same time. Those states should be listed in the same state group, because only one state in a state group can be displayed at a t For example, the following image shows a user control that represents a card in a card game. Two state groups are defined: MouseInteraction and SideDisplayed. The MouseInteraction state group includes states for Click, MouseOver, and Normal—states that are not displayed at the same time. The SideDisplayed state group includes states that display the card face up (FaceUp) and face down (FaceDown). A card can be face up and have the mouse pointer move over it at the same time, so those states are in different state groups.

To set the transition time for your user control to change between states

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 19 of 33



To set the transition time for your user control to change between any two states in a state group, click inside the Default Transition Duration text box and enter a new time. This will set how long it takes for your user control to transition to or from any of the states in the state group.



To override the default transition time for specific transitions, click the Add Transition button next to a state, and then select the specific transition from the list that appears. The list item that is highlighted by the mouse pointer in the following image indicates "from the Click state to any other state" where the arrow corresponds to "to" and the star (*) corresponds to "any state."

Click inside the Transition Duration text box, and enter a new time.

Troubleshooting 

If you have trouble when you build your application, you might not have the correct version of Silverlight installed. For more information, see Install the Silverlight 2 tools and runtime.

Next steps 

You can make your user control respond to mouse clicks. For more information, see Change state in response to user interaction.



You can add animation, such as making the button spin around when the mouse pointer moves over it. For more information, see Add animation that will play after a change in state.



You can see real-life scenarios that use states and state groups in the "How Do I?" video tutorials at the Expression Community website.

Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Change state in response to user interaction

When you create your own user control, you can add states and state groups to change the appearance of your user control depending on which state it is in. To change these states in response to user interaction (such as a mouse click), you add event handler methods to call the GoToState method. Note: When you modify the template of a system control, such as a button, default states are already defined, in addition to the response of the control to user interaction. You cannot add or remove the default states. However, you can change the appearance of the control in those different states, and you can use the following procedure to change states.

To change state in response to a mouse click 1. If you have not already created state groups and states, you can Define different visual states and transition times for a user control. For example, the following image shows a user control that represents a card in a card game. The SideDisplayed state group includes a state that displays the card face up (FaceUp), and a state that displays the card face down (FaceDown).

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 20 of 33

2. Under States, select Base to turn off state recording. 3. Under Objects and Timeline, select the [UserControl] object to hook up an event that will respond to action over the surface area of the whole user control. 4. In the Properties panel, click the Events

button to switch from the properties view to the events view.

Tip: To switch the Properties panel back to the properties view, click the Properties button. 5. Next to the MouseLeftButtonDown event, enter a name for the event handler method, such as "goClick."

Tip: Alternatively, you can simply double-click in the event text box to generate a default name for the event handler method. After you press ENTER, Microsoft Expression Blend opens your project in Microsoft Visual Studio 2008 if you have it installed. If you do not have a code editor installed, Expression Blend copies the code for the event handler method to the Clipboard so that you can open the code-behind file for the user control in a text editor and paste in the code from the Clipboard. C#

Copy Code

private void goClick(object sender, MouseButtonEventArgs e) { }

Visual Basic

Copy Code

Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) End Sub

For more information about Visual Studio 2008 interoperability with Expression Blend, see Edit a code-behind file. 6. To make your user control change state, call the GoToState method with the name of the state. For example, paste the following boldfaced code into your code-behind file: C#

Copy Code

private bool isFaceUp = false; private void goClick(object sender, MouseButtonEventArgs e) { if (isFaceUp) { VisualStateManager.GoToState(this, "FaceDown", true); } else { VisualStateManager.GoToState(this, "FaceUp", true); } isFaceUp = !isFaceUp; }

Visual Basic

Copy Code

Private isFaceUp As Boolean = False Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) If isFaceUp Then VisualStateManager.GoToState(Me, "FaceDown", True)

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 21 of 33

Else VisualStateManager.GoToState(Me, "FaceUp", True) End If isFaceUp = Not (isFaceUp) End Sub

7. Build your project (CTRL+SHIFT+B). 8. Test your project (F5), and then click your user control to see it change states.

Troubleshooting 

If you get the error "Cannot change the code-behind file. The following class was not found" when you type a name into the Events panel in Expression Blend, you may have to switch to your external code editor (typically Microsoft Visual Studio) to reload the solution. Reloading will include the new files that define the missing class. If you get the error "Cannot load the solution" in Visual Studio 2008, you might not have the Microsoft Silverlight Tools for Visual Studio 2008 installed. Install the tools and then try to type a name into the Events panel in Expression Blend.



If you do not see your user control when you test your project (F5), and the browser window does not indicate an error, you might not have drawn an instance of your user control in the startup document. The startup document is the first document that appears when you run your application. If you created a user control in a separate document, you have to build your project (CTRL+SHIFT+B), open your startup document (typically Page.xaml) open the Asset Library , select your user control from the Custom Controls tab, and then draw the user control on the artboard.



If you have trouble building your application, you might not have the correct version of Microsoft Silverlight installed. For more information, see Install the Silverlight 2 tools and runtime.

Next steps 

You can add animation, such as making the button spin around when the mouse pointer moves over it. For more information, see Add animation that will play after a change in state.



You can see real-life scenarios that use states and state groups in the "How Do I?" video tutorials at the Expression community website.

Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Add animation that will play after a change in state

You can add animation to a state that will play after the control transitions to that state. For example, a button changes color when you move the mouse pointer over it, which is a result of the transition to the MouseOver state. If you add animation to the MouseOver state, such as making the button spin around, that animation will run after the button changes color.

To add animation to a state 1. Press F6 to change to the Animation Workspace. This moves the Interaction panel beneath the artboard to provide more room to display the timeline. 2. Under States, select the state to which you want to add animation. 3. Under Objects and Timeline, click the Show Timeline

button.

Note: When Base is selected under States, the Show Timeline button does not appear because you are not in state-recording mode. 4. If you made the appearance of the control in this state different from its default appearance (when Base is selected), a keyframe is already set at the 0second mark.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

5. To add more animation, move the playhead

Page 22 of 33

to another time on the timeline, and then make a change to an object on the artboard.

For example, to make a playing card spin around, move the playhead to the 1-second mark, select the LayoutRoot object under Objects and Timeline, and then, under Transform in the Properties panel, select the Rotate tab, and set the Angle property to 360.

6. Preview your animation by clicking the Play

button.

7. Press F5 to test your in-state animation. Tip: If you do not want your control to rotate backward to 0 degrees when the state changes again, you can set the transition time to 0 seconds for this state wh transitions to all other states. For a procedure to follow, see Modify the transition time between state changes in system controls.

Next steps 

You can make your in-state animation loop multiple times or forever, or reverse when it reaches the last keyframe. For more information, see Modify a storyboard to repeat or reverse at the end of its cycle.



You can adjust how fast the animation occurs between keyframes to create a more natural animation. For more information, see Change animation interpolation between keyframes.



If you are modifying a system control template, you can press F5 to see the changes in your application. If you are working with a user control, you can see the modified animation in action by making your user control respond to mouse clicks. For more information, see Change state in response to user interaction.

Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Import a custom control by adding a reference

As a designer, you might receive an assembly file (DLL) that contains a custom control that you have to use in your project. Or, you might want to use the controls that are available in the Silverlight 2 Software Development Kit (SDK) in your project. To be able to draw these kinds of controls on the artboard, you must first add a reference to the assembly.

To draw a custom control on the artboard 1. On the Project menu, click Add Reference (ALT+SHIFT+R). 2. In the Add Reference dialog box, browse to the DLL file that contains the custom control, and then click Open. In the Project panel, under References, the DLL file appears in the list of default project references.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 23 of 33

Tip: To be able to use the controls that come with the Silverlight 2 SDL, add a reference to the correct assembly located in the C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Client folder. For example, to draw a TabControl, add a reference to the System.Windows.Controls.dll assembly. 3. Build your project (CTRL+SHIFT+B) to incorporate the classes from the DLL into your project. 4. Open a XAML file on the artboard (such as Page.xaml) by double-clicking the name of the file in the Projects panel. 5. Click the Asset Library

button in the Toolbox.

6. In the Asset Library, select the Custom Controls tab, and then select your new control.

Tip: The controls that come with the Silverlight 2 SDK are listed in the Controls tab. Your new control appears above the Asset Library button in the Toolbox as the selected tool. 7. Using your mouse, draw the custom control on the artboard. The control appears on the artboard and under Objects and Timeline.

8. Test your project (F5) to see the new control. Tip: You can add a reference to an uncompiled project by first adding the project to your solution and then adding the project reference to the first project. Th useful if you want to work on both projects at the same time in the same Expression Blend window. For more information, see Add a new or existing pro to a solution.

Troubleshooting

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 24 of 33



If you cannot see the custom control displayed in the Custom Controls tab of the Asset Library, try to build the project before you open the Asset Library again.



After you draw your new control on the artboard, if it appears clipped, it might be because the control has default layout properties that are incompatible with the size of the control when you first drew it. With the new control selected under Objects and Timeline, reset the Margin properties to 0 under Layout in the Properties panel, and then try to resize the control again.

See also Concepts Add a new or existing project to a solution Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Create a skin for a control in a Silverlight 2 project

You can customize the look of system controls in Microsoft Silverlight 2 by using static resources to define templates that are applied to the controls. For example, you could create a template for a button that used images instead of rectangles to construct the appearance of the button. To create a common look among different control templates or among different user controls, you can convert individual properties to static resources and then apply them to templates and user controls. For example, you could convert the border color of a button template to a resource and then apply that color resource to the border property of a check box template or a custom user control. To reuse your templates and resources in other projects, you can move the resources into the App.xaml file, and then paste them into the App.xaml file of other projects. By moving your resources to the App.xaml file, it becomes a repository for the skin of your application.

To create a template of a control 

To customize the template of any control, you can use the procedures in Modify the appearance of a system control in different states and Modify the transition time between state changes in system controls. The template becomes a resource that is listed in the Resources panel. For information about how to modify a resource after you create it, see Modify a resource.

To create a user control 

To create a custom user control that you can design from scratch, you can use the procedures in Create a new user control in your Silverlight 2 project.

To convert a property to a static resource 1. Select an object on the artboard that has a property value that you want to reuse in other controls. 2. In the properties

view of the Properties panel, locate the property that you want to reuse.

Tip:

You can use the Search text box in the Properties panel to quickly locate a property by characters in the property name.

The text that you enter will filter the list of properties.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

To restore the Properties panel, click the Clear 3. Do one of the following:

Page 25 of 33

button next to the Search text box.



If you want to reuse a Brush, select the brush, and then click the Convert brush to resource

button.



If you want to reuse a color that is applied to a brush, select the brush if it is a Solid color brush , or select the gradient stop want to reuse if the brush is a Gradient brush . Then, click the Convert color to resource button.



If you want to reuse a numeric or other value type, click the Advanced property options New Resource.

for the color you

button next to the property, and then click Convert to

4. In the dialog box that appears (titled Create Resource), enter a meaningful name for your resource, and then click OK. The resource is created and listed in the Resources panel.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 26 of 33

For information about how to modify a resource after you create it, see Modify a resource.

To apply a resource to another property You have many ways to apply a resources to a property.

To apply a resource by dragging it from the Resources panel 1. From the Resources panel, drag a resource onto a control on the artboard. Dragging a font family resource onto a check box control

2. From the drop-down menu that appears, select which property of the control you want to apply the resource to. Applying a font family resource to the FontFamily property of the check box

To apply a resource by using the Advanced property options menu 1. In the properties

view of the Properties panel, locate the property that you want to set to a resource.

2. Click the Advanced property options

button, point to Local Resource, and then select the resource name from the drop-down list that appears.

To apply a brush resource 1. In the properties

view of the Properties panel, select the brush that you want to set to a resource.

2. In the Brush resources

tab, select the name of the resource.

To apply a color resource 1. In the properties the gradient stop

view of the Properties panel, select the brush whose color you want to set to a resource. If the brush is a Gradient brush for the color.

, select

2. In the Color resources tab, select the name of the resource.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 27 of 33

To apply a template to another control of the same type You have many ways to apply templates to controls.

To apply a template by selecting it in the Asset Library and drawing a new control 1. From the Toolbox, open the Asset Library

.

2. In the Local Styles tab of the Asset Library, select the template you created. 3. On the artboard, use your mouse pointer to draw a bounding box. A new control is drawn that matches the selected template, and the template is automatically applied.

To apply a template by dragging it from the Resources panel 1. From the Resources panel, drag a template resource onto a control on the artboard. 2. From the drop-down menu that appears, select the Style property.

To apply a template by using the Advanced property options menu 1. Select the object to which you want to apply a template. 2. In the properties

view of the Properties panel, locate the Style property.

3. Next to the Style property, click the Advanced property options drop-down list that appears.

button, point to Local Resource, and then select the name of the template from the

To move resources to the App.xaml file 

If you did not define your resources in the App.xaml file when you created them, you can move your resources to the App.xaml file by dragging them in the Resources panel. Tip: If you do not see your resources, you might have to expand the nodes under the document node (typically Page.xaml).

To copy resources to other projects 1. From the Projects panel, double-click the App.xaml file to open it on the artboard. 2. The App.xaml file cannot be viewed in Design view, so select the XAML tab on the right side of the artboard. 3. Resources are defined between <Application.Resources> tags. Copy Code <Application.Resources>

Within these tags, property resources are defined in tags that represent the type of property they are. The Key attribute represents the name that you gave to the resource. Copy Code Segoe UI

Templates are defined between <Style> tags. The Key attribute represents the name that you gave to the template. Copy Code <Style x:Key="ImageButton" TargetType="Button"> <Setter Property="Background" Value="#FF1F3B53"/> <Setter Property="Template"> ...

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 28 of 33



4. Highlight the XAML that represents the resources that you want to move to another project and then press CTRL+C to copy them. 5. Open the other project in Expression Blend, open the App.xaml file on the artboard in XAML view, insert the pointer right after the <Application.Resources> tag, and then press CTRL+V to paste the resources. 6. Make sure no key names are duplicated in any preexisting resources. 7. Build your project (CTRL+SHIFT+B) to make sure that the new resources were copied correctly. Tip: Alternatively, you could copy the complete App.xaml file into a new project and then just change the name in the x:Class attribute to the name of the new project. <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ProjectName.App" ...

Next steps 

You can watch how to create a control skin for a button and a check box in the "How Do I?" video tutorials at Expression Community website.

Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Load a new page dynamically in your Silverlight 2 application

You have many ways to dynamically load content in a Silverlight 2 application. This procedure creates objects for content pages and then loads one of the objects to display the content when a user clicks a button. You can find other solutions in the Silverlight documentation on MSDN, and on the Silverlight community website.

To load a page at runtime 1. In a Silverlight 2 project that has multiple content pages, open the startup page (typically Page.xaml). For this tutorial, assume that you have two content pages named UserControl1.xaml and UserControl2.xaml. Tip: To add new content pages, click New Item on the File menu. 2. In the Toolbox, click the Asset Library

button, and then select the Border

layout panel. Draw a border object on the artboard using your mouse.

Tip: While the new border object is selected, you can change its appearance by setting properties under Brushes and Appearance in the Properties panel. For example, you can set the BorderBrush property to a Solid color brush , and set the BorderThickness property to 2. 3. Under Objects and Timeline, right-click the [Border] object, select Rename, and then change the name of the object to PageContainer. This lets you refer to this object in the code-behind file later. 4. Under Objects and Timeline, double-click the LayoutRoot object to make it the active object. A yellow border appears around the LayoutRoot, and any new object you draw on the artboard will become a child of LayoutRoot. 5. In the Toolbox, click Button

, and then draw a button on the artboard outside the PageContainer object.

Tip: After you draw a control that displays text, you can modify the text by pressing F2 to enter text-editing mode. To exit text-editing mode, press ESC. 6. Under Objects and Timeline, select the [Button] object.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

7. In the Properties panel, click the Events

Page 29 of 33

button to switch from the properties view to the events view.

Tip: To switch the Properties panel back to the properties view, click the Properties button. 8. Double-click the text box next to the Click event. Microsoft Expression Blend generates a name (Button_Click) for an event handler that will be called when the user clicks the button in your running application.

Expression Blend copies the code for the event handler to the Clipboard, and then opens your project in Microsoft Visual Studio 2008 if you have it installed. If you do not have a code editor installed, open the code-behind file for the user control in a text editor and paste in the following code: C#

Copy Code

private void Button_Click(object sender, RoutedEventArgs e) { }

Visual Basic

Copy Code

Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) End Sub

For more information about Visual Studio 2008 interoperability with Expression Blend, see Edit a code-behind file. 9. To switch between your two content pages that will be displayed in the PageContainer border object, create instances of the pages in memory, and then, in the event handler, add one of the pages to the PageContainer. For example, paste the following bold code into your code-behind file. "UserControl1" and "UserControl2" are the names of two other content pages in your project. Tip: A border control can have only one child object. For a control that could contain more than one child, such as a Grid slightly. C# Copy Code

layout panel, the code would diffe

private UserControl1 uc1 = new UserControl1(); private UserControl2 uc2 = new UserControl2(); private bool atUC2 = false; private void Button_Click(object sender, RoutedEventArgs e) { if (atUC2) { this.PageContainer.Child = uc1; } else { this.PageContainer.Child = uc2; } atUC2 = !atUC2; }

Visual Basic

Copy Code

Private uc1 As UserControl1 = New UserControl1() Private uc2 As UserControl2 = New UserControl2() Private atUC2 As Boolean = False Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 30 of 33

If atUC2 Then Me.PageContainer.Child = uc1 Else Me.PageContainer.Child = uc2 End If atUC2 = Not atUC2 End Sub

10. Test your project (F5), and then click your button to see UserControl1 and UserControl2 loaded into the PageContainer border.

Troubleshooting 

If you get the error "Cannot change the code-behind file. The following class was not found" when you double-click in the Events panel in Expression Blend, you may have to switch to your external code editor (typically Microsoft Visual Studio) to reload the solution. Reloading will include the new files that define the missing class. If you get the error "Cannot load the solution" in Visual Studio 2008, you might not have the Microsoft Silverlight Tools for Visual Studio 2008 installed. Install the tools and then try to double-click in the Events panel in Expression Blend.



If you cannot see the content of your dynamically loaded pages, the PageContainer border might be too small to fit all the loaded content. Try to make the PageContainer border larger, or set the layout properties in the dynamically loaded pages to the following settings: 

Width = Auto



Height = Auto



Margin properties = 0



If your button disappears when you click it, you might have added the button object as a child of the PageContainer border instead of as a child of LayoutRoot. (The code that you added will replace the child of the PageContainer border object.) Under Objects and Timeline, you can drag the button object to the LayoutRoot panel to move it out of the PageContainer border.



If you create a new object to trigger the page load (instead of a button), and then in Expression Blend copy the name of the Button_Click event handler to the new object in Events view of the Properties panel, you might get an error in your web browser when you test (F5) your project. This may be caused by an incorrect signature for the event handler that does not match the new object type. For example, the signature for a button Click event handler resembles the following: C#

Copy Code

private void Button_Click(object sender, RoutedEventArgs e)

Visual Basic

Copy Code

Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

The signature for a MouseLeftButtonDown event handler resembles the following: C#

Copy Code

private void Path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

Visual Basic

Copy Code

Private Sub Path_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)

You can fix this issue by double-clicking in the text box next to the correct event handler in Events method with the correct signature in the code-behind file.

view of the Properties panel to create a new

Next steps 

You can find other how-tos and videos about specific tasks on the Silverlight community website.

Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Customize an Expression Encoder template for Silverlight 2

Microsoft Expression Encoder 2 uses templates to create video experiences by encoding video and displaying it in a media player. The player can be skinned

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

Page 31 of 33

by using a template. Expression Encoder templates are a collection of HTML, JavaScript, and XAML that together define the video player user interface (UI) and interactivity. Expression Encoder 2 with Service Pack 1 installed includes a Microsoft Silverlight 2 template that you can use to present your videos. However, you are not restricted to using the default template. Because of the extensibility of Expression Encoder 2, you can create your own Silverlight 2 video player using such tools as Microsoft Expression Blend 2, and then make the player available for Expression Encoder 2 to use as a custom template.

To modify a Silverlight 2 template from Expression Encoder 2 with Service Pack 1 installed 1. If you cannot see the Output panel in Expression Encoder 2, click Output on the Window menu. 2. In the Output panel, under Job Output, select the Standard Silverlight 2 template from the drop-down list next to Template. An image appears next to Preview to show you what the media player template will resemble. 3. Click the property marker

to the right of the Template menu, and then click Edit copy in Expression Blend.

4. In the Rename Template box, type a file name and click Open. This opens a copy of the template in Expression Blend 2, which preserves the original template. 5. Once you are working in Expression Blend 2, you can begin to change the visual design of the template by adding, modifying, or deleting objects. You can also skin controls by editing the template of the control. For more information, see the following topics: 

Draw a shape or path in your Silverlight 2 project



Appearance



Transformations



Modify the appearance of a system control in different states



Modify the transition time between state changes in system controls



Add animation that will play after a change in state

6. Make your changes in Expression Blend 2 and then save your files (click Save on the File menu). When you return to Expression Encoder 2, the Preview window will display the edited template. You can then use the template for future encoding.

Next steps 

You can use the modified template to encode video in an Expression Encoder 2 project. For more information, see the topics in the "Encode your video for Microsoft Silverlight and the web" section of the Expression Encoder 2 User Guide (F1).



You can deploy your encoded video and Silverlight 2 player to a website. After encoding your video in Expression Encoder 2 using the modified Silverlight 2 template, you can deploy the output to a website. For more information, see Add a Silverlight 2 application to a website.

See also Concepts Import a Silverlight 1.0 site from Expression Encoder 2 Modify a Silverlight template for Expression Encoder 2 in Expression Blend Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Add a Silverlight 2 application to a website

To deploy your Silverlight 2 application, all you need to do is copy the compiled .xap file to a web folder, and call the .xap file from a web page in the same way that the test page (Default.html or TestPage.html) calls the .xap file. To copy the files, you can use xcopy or the import and deployment tools of a website creation tool such as Microsoft Expression Web 2 or Microsoft Visual Studio 2008. When someone browses to your web page, your Silverlight 2 application will be displayed. Alternatively, if users do not have the Silverlight 2 runtime installed, they will see an installation message and a link.

To deploy a Silverlight application using xcopy 1. Build and test (F5) your Silverlight 2 project. When you build and test a Silverlight 2 project, the following files are created in the \bin\debug folder, and Expression Blend tries to open the starting web page.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2

File

Page 32 of 33

Description

AppManifest.xaml

A Silverlight 2 version of the AppManifest.xml file.

Default.html (or TestPage.html if the project was created with Visual Studio 2008)

A web page that loads the Silverlight 2 application (contained in ProjectName.xap) into the browser.

ProjectName.dll

The compiled assembly of the application that you designed in the content files of your project.

ProjectName.pdb

Debug information for the application.

ProjectName.xap

A compressed archive that includes all the content and resources for the Silverlight 2 application. Users download this file on their browsers and run it with the Silverlight 2 plug-in.

2. Copy the ProjectName.xap file to a folder on a website. For example, if you have Internet Information Services installed, you could copy the .xap file to a virtual directory in the default site that is typically mapped to C:\Inetpub\wwwroot. Note: If your application includes Microsoft Expression Encoder 2 files or media files, you'll have to copy those files also. 3. To test your deployment, you can copy the test page (Default.html or TestPage.html), or you could code from the test page to an existing web page in the web folder. Be sure to change the name of the .xap file to match the .xap file in your application. 4. Browse to the web page that calls your Silverlight 2 application to test how it appears.

Next steps 

For more information about deployment, see Silverlight 2 Deployment on MSDN.

Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Install the Silverlight 2 tools and runtime

To create a Silverlight 2 project in Microsoft Visual Studio 2008, or to open a Silverlight 2 project in Visual Studio 2008 that was created in Microsoft Expression Blend 2 with Service Pack 1, install the Silverlight tools for Visual Studio. To view Silverlight 2 applications in your browser, install the runtime viewer.

To install the Silverlight tools for Visual Studio 2008 1. Make sure Visual Studio 2008 is already installed. 2. Uninstall any previous versions of the Silverlight tools. 3. On the Microsoft Download Center, locate the download page for the Microsoft Silverlight Tools for Visual Studio. 4. Click the Download button and follow the installation instructions. Note: The Silverlight 2 runtime viewer and the Silverlight 2 SDK are installed as part of this install.

To install the Silverlight runtime viewer 1. Browse to the Get Started with Silverlight website. 2. On the right side under Install Silverlight, click the button that corresponds to your version of Silverlight and your operating system.

Troubleshooting 

If you get an error about using Silverlight in browsers that run in 64-bit mode, open a new instance of your browser, either from the Start menu, the desktop, or from the 32-bit program files folder (for example, C:\Program Files (x86)\Internet Explorer\iexplore.exe). You can then visit the same page in the new browser window.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009

Quick start with Silverlight 2



Page 33 of 33

If you cannot view your Silverlight 2 application in your browser, you might not have the version of the Silverlight runtime viewer that is required by your application. Important: The Silverlight 2 runtime viewer is installed along with the Silverlight 2 SDK when you install Expression Blend 2 SP1. Expression Blend uses this versi the runtime to display your project in Design view, but when you test your Silverlight 2 application, the application will be rendered using the version of Silverlight that your browser uses. Your browser might use a version of the runtime that is more recent than the version that was installed with the servic pack if you have visited a website that required a newer version of the runtime.

To compare the version of the Silverlight runtime viewer with the version required by your application 1. Find the version of the Silverlight runtime viewer that is used by your browser by looking at the name of the subfolder under C:\Program Files\Microsoft Silverlight (or C:\Program Files (x86)\Microsoft Silverlight on a 64-bit computer). 2. Find the version of Silverlight that your application requires by opening the AppManifest.xaml file in the bin/Debug subfolder that appears in your project folder after you build your project. The version of Silverlight required by your application is identified in the RuntimeVersion attribute in the AppManifest.xaml file. If your browser is using an older runtime than the version that is required by your application, update the Silverlight 2 runtime at the Get Started with Silverlight website. You might be asked to reboot your computer for the changes to take effect. Tip: For more help with Silverlight applications, see the Silverlight Forums website.

See also Concepts Open an existing Silverlight 2 project Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved.

file://C:\Windows\Temp\~hhCE27.htm

6/16/2009