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
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
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
A Visual Studio solution file that specifies
ProjectName.sln configuration settings for the solution, and references
all the projects in the solution.
ProjectName.csproj
A project file that specifies configuration settings for
or the project (including the starting web page), and
references all the source files in the project.
ProjectName.vbproj
A file where application-level resources are defined.
For example, if you customize a button template and
App.xaml select to define it at the application level, any
document in your project can use the template to style
a button.
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
Page.xaml
user interface of your Silverlight 2 application.
Page.xaml.cs
The code-behind file for the corresponding content
or file. User interaction and application behavior is often
programmed in the code-behind file.
Page.xaml.vb
Defines the assemblies that are included in the
Silverlight 2 application. For example, a Silverlight 2
project created in Expression Blend 2 with Service
AppManifest.xml 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
or version number, description, loaded assemblies, and
so on.
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
A Silverlight 2 version of the

AppManifest.xaml
AppManifest.xml file.
Default.html (or
A web page that loads the Silverlight 2
TestPage.html if the project
application (contained in ProjectName.xap)
was created with Visual
into the browser.
Studio 2008)
The compiled assembly of the application
ProjectName.dll that you designed in the content files of your
project.
ProjectName.pdb Debug information for the application.
A compressed archive that includes all the
content and resources for the Silverlight 2
ProjectName.xap application. Users download this file on their
browsers and run it with the Silverlight 2
plug-in.
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
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.
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

Create a Silverlight 1.0 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.
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

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.
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

Draw a shape or path in your Silverlight 2 project
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
1. In the Toolbox, select one of the path tools: Pen 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.
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
 Animate the points on a path or clipping path
To draw a line
1. In the Toolbox, select the Line 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.
Next steps
 Add or remove a point on a path
 Change the shape of a curve
 Animate the points on a path or clipping path
See also
Concepts
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 button in the Toolbox. After you select a tool in the Asset Library, it will appear above the A
Library button in the Toolbox.
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 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.
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.
 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.
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
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 template-
bound 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
 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.
See also
Concepts

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
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.
See also
Concepts

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.
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.
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
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.
3. Under States, click the Add State Group 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
 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 see real-life scenarios that use states and state groups in the "How Do I?" video tutorials at the Expression Community website.
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).
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;
}

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)
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 see real-life scenarios that use states and state groups in the "How Do I?" video tutorials at the Expression community website.
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 0-
second mark.
5. To add more animation, move the playhead 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.
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.
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
 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
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.
To restore the Properties panel, click the Clear button next to the Search text box.
3. Do one of the following:
 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 for the color you
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 button next to the property, and then click Convert to
New Resource.
4. In the dialog box that appears (titled Create <type> Resource), enter a meaningful name for your resource, and then click OK.
The resource is created and listed in the Resources panel.
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 view of the Properties panel, select the brush whose color you want to set to a resource. If the brush is a Gradient brush , select
the gradient stop for the color.
2. In the Color resources tab, select the name of the resource.
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 button, point to Local Resource, and then select the name of the template from the
drop-down list that appears.
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>
</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
<FontFamily x:Key="ApplicationFont">Segoe UI</FontFamily>
<LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFC64545" Offset="1"/>
</LinearGradientBrush>
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">
...
</Setter>
</Style>
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.
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.
7. 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.
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)
{

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 layout panel, the code would diffe
slightly.
C# Copy Code
private UserControl1 uc1 = new UserControl1();
private UserControl2 uc2 = new UserControl2();
private bool atUC2 = false;

{
if (atUC2)
{
this.PageContainer.Child = uc1;
}
else
{
this.PageContainer.Child = uc2;
}
atUC2 = !atUC2;
}

Private uc1 As UserControl1 = New UserControl1()
Private uc2 As UserControl2 = New UserControl2()
Private atUC2 As Boolean = False
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

The signature for a MouseLeftButtonDown event handler resembles the following:
C# Copy Code
private void Path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

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 view of the Properties panel to create a new
method with the correct signature in the code-behind file.
Next steps
 You can find other how-tos and videos about specific tasks on the Silverlight community website.
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
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
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 Description
A Silverlight 2 version of the
AppManifest.xaml
AppManifest.xml file.
Default.html (or
A web page that loads the Silverlight 2
TestPage.html if the project
application (contained in ProjectName.xap)
was created with Visual
into the browser.
Studio 2008)
The compiled assembly of the application
ProjectName.dll that you designed in the content files of your
project.
ProjectName.pdb Debug information for the application.
A compressed archive that includes all the
content and resources for the Silverlight 2
ProjectName.xap 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.
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.
 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

Silverlight 2 - Quickstart

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Silverlight 2 - Quickstart

Загружено:

Авторское право:

Доступные форматы

Quick start with Silverlight 2 Page 1 of 33

Quick start with Silverlight 2

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

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

What can you do in Silverlight 2?

Silverlight 2 support in Expression Blend 2

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

The files in a Silverlight 2 project

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

A Silverlight 2 version of the

 Silverlight learning center

Create a project for a Silverlight 2 application

To create a Silverlight 2 project

Open an existing Silverlight 2 project

Open an existing Silverlight 2 project

To open a Silverlight 2 project

To open a Silverlight 2 project that was created by Visual Studio 2008

The Silverlight 2 project opens for editing.

To open a Silverlight 2 project in Visual Studio 2008

2. Open Visual Studio 2008.

To close an open project in Expression Blend

Open a Silverlight 1.0 project

Draw a shape or path in your Silverlight 2 project

2. On the artboard, draw the shape by dragging with your mouse.

3. Save your changes (CTRL+S).

 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

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

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

3. Save your changes (CTRL+S).

 Apply a brush to an object's fill or stroke

 Draw a straight line

 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

1. In the Toolbox, select the Line tool.

2. On the artboard, draw the line by dragging with your mouse.

3. Save your changes (CTRL+S).