第 72 页

project, which isn ’t included in the core Silverlight run time. Your .xap fi le will also be much smaller

because it will no longer contain these assemblies. The fi rst time the user runs your application all

the required pieces will be downloaded. Then when you update your project and compile it only the

.xap fi le will need to be downloaded again. The benefi ts of this include less bandwidth being used for

both the server and the client (updates will be much smaller to download), and updates will be much

quicker, meaning less time for the users to wait before they can continue to use your application.

Unfortunately, application library caching cannot be used in applications that

are configured to run in Out Of Browser mode (detailed later in this chapter),

because Out Of Browser mode requires all the assemblies to be in the .xap file.

If you attempt to set both options, a message box appears stating as such.

Now let’s return to see how the Silverlight project and the web project are linked together. This

project link is managed by the web project, and can be configured from its project properties page.

Open the properties for this project and select the Silverlight Applications tab to see the Silverlight

projects currently linked to the web project (Figure 22-5).

fiGure 22-5

Getting started with silverlight .

477

You will most likely only need to use this property page if the web project needs to host multiple

Silverlight applications, or you have added a Silverlight project to a solution already containing a web

project and you need to link the two. Project links can only be added or removed (not modified), so

you will generally find you will use this property page only when a Silverlight project has been added

or removed from the solution.

This property page displays the existing links in the list that this web project has to Silverlight projects

in the solution. You have three options here: you can add another link to a Silverlight project, you can

remove a project link, or you can change a project link (although this change option is not what you

might initially expect, as discussed shortly).

Click the Add button to link another Silverlight

project to the web project. Figure 22-6 shows

the window used to configure the new link.

You have two choices when adding a link to

a Silverlight project. The first is to link to a

Silverlight project already in the solution, where

you can simply select a project from the drop-

down list to link to. You also have the choice

to create a new Silverlight project and have it

automatically link to the current web project.

Unfortunately, you don’t have the ability to

select the project template to use, so it will only

generate a new project based upon the Silverlight

Application project template, somewhat limiting

its use.

The Destination Folder option enables you to

specify the folder underneath the web project

that this Silverlight project will be copied to when it has been compiled. The test pages that are

generated (if selected to be created) to host the Silverlight application will point to this location.

If the Copy to configuration specific folders option is set, the Silverlight application will not be

copied directly under the specified destination folder, but an additional folder will be created

underneath it with the name of the current configuration (Debug, Release, and so on)? and the

Silverlight application will be copied under it instead. Note that when this setting is turned on, the

test pages will still point to the destination folder, not the subfolder with the name of the current

configuration which will now be where the Silverlight application is located. If you want to use

this option you will need to manually update the test pages to point to the path as per the current

configuration, and update this each time you switch between configurations. By default, this option

is not set, and it is probably best not to use it unless necessary.

Selecting the Add a test page that references the control option adds both an HTML page and an

ASPX page to the web project, already configured to host the output of the Silverlight project being

linked (you can delete the one you don’t want to use).

The Enable Silverlight debugging option turns on the ability to debug your Silverlight application

(that is, stop on breakpoints, step through code, and so on). The downside to enabling this option is

fiGure 22-6

478 .

chaPter 22 SilVerlighT

that it disables JavaScript debugging for the web project, because enabling debugging for both at the

same time is not possible.

Returning to the list of linked Silverlight projects (Figure 22-5), the Remove button removes a link

as you’d expect, but the Change button probably won’t do what you’d initially assume it would. This

button is used simply to toggle between using

and not using configuration-specific folders

(described earlier).

Now that you have learned the structure of

the project you can try running it. You can

see that the Silverlight Navigation Application

project template gives you a good starting

point for your application and can form the

basis of your application framework (as shown

in Figure 22-7).

naViGation fraMework

Because you have used the Silverlight Navigation Application project template for your project

you should take a quick look at Silverlight’s Navigation Framework. The Navigation Framework

was introduced in Silverlight 3, and makes it easy to create an application with multiple views

and navigate between them. MainPage.xaml contains a Frame control (a part of the Navigation

Framework), which is used to host the individual views when they are required to be shown.

Views must inherit from the Page control in order to be hosted in the frame. If you take a look at

Home.xaml you will notice that the root element is navigation:Page instead of UserControl. To

create a new view, right-click the Views folder and select Add . New Item. Select the Silverlight

Page item template, give it a name (such as Test.xaml), and click OK. Add content to the view as

required.

Each view needs a URI to point to it, and this URI will be used when you want to navigate to that

view. You may want to set up a mapping from a chosen URI to the path (within the project) of

its corresponding view file. These mappings are defined on the UriMapper property of the Frame

control (in MainPage.xaml). These mappings allow wildcards, and a wildcard mapping has already

been created that allows you to simply use the name of the XAML file (without the .xaml on the

end). It will look for a XAML file with that name with a .xaml extension in the Views folder. This

means you don’t need to set up a mapping if you want to navigate to your Test.xaml file using

/Test as the URI.

Now you need to add a button that allows you to navigate to the new view. In MainPage.xaml you

will find some HyperlinkButton controls (named Link1 and Link2). Copy one of these and paste

it as a new line below it (you may want to create another divider element by copying the existing

one too). Change the NavigateUri to one that maps to your view (in this case it will be /Test), give

the control a new name, and set the text to display on the button (in the Content

property).

Now run the project. The new button will appear in the header area of the application, and clicking

it navigates to the new view.

fiGure 22-7

theMinG

Like WPF, Silverlight has extensive styling and theming capabilities, although their styling models are

implemented slightly differently from one another. Silverlight introduced the Visual State Manager

(VSM), a feature that WPF did not originally have (until WPF 4), which enables a control contract to

be explicitly defi ned for the boundary between the control ’ s behavior (that is, the code) and its look

(that is, the XAML). This permits a strict separation to be maintained between the two. This contract

defi nes a model for control templates called the Parts and States model, which consists of parts, states,

transitions, and state groups. Further discussion of this is beyond the scope of this chapter, however

the VSM in Silverlight manages this model. This is considered a much better way of managing

styles than WPF ’ s original method of using triggers, and thus the VSM has been incorporated into

WPF 4. However, until Silverlight 4, Silverlight did not support implicit styling (unlike WPF, which

did), where it could be specifi ed that all controls of a given type should use a particular style (making

applying a theme to your project somewhat diffi cult). To make theming easier, Microsoft created the

ImplicitStyleManager control, which shipped in the Silverlight Toolkit control library. Silverlight 4

fi nally introduced implicit styling, making the ImplicitStyleManager control somewhat redundant, but

you ’ ll still use it here to demonstrate theming that works across all versions of Silverlight.

Note how the bookmark on the URL (the part after the # in the URL in the

address bar of the browser) changes as you navigate between pages. You can also

use the browser ’ s Back and Next buttons to navigate backward and forward

through the history of which views were previously navigated to. It also enables

deep linking, such that views have a unique URL that can automatically be

opened to. The Navigation Framework provides all of this functionality.

You can download the free Silverlight Toolkit from CodePlex here: http://

silverlight.codeplex.com . It also contains numerous useful controls that

aren ’ t included in the Silverlight SDK (such as charts, tab control, TreeView,

and so on).

So despite their differences, WPF and Silverlight both have controls in their respective toolkit

projects that enable similar styling and theming behavior between the two.

Now take a look at applying a different theme to your project in order to completely change the

way the controls look. Silverlight has the same themes available as demonstrated in Chapter 18

(in fact, the themes were originally developed for Silverlight and ported to WPF), and can be found

in the Silverlight Toolkit. You will call these control themes to separate them from the application

themes that are discussed shortly.

You have a couple of ways to use these control themes. One is to take one of the XAML theming

fi les from the Silverlight Toolkit, copy it into your project ’ s root folder, and include it in your

Theming . 479

480 .

chaPter 22 SilVerlighT

project (setting its Build Action to Content at the same time). For this example you will use the

System.Windows.Controls.Theming.ExpressionDark.xaml theme file. Now add a reference

to the System.Windows.Controls.Theming.Toolkit.dll from the Silverlight Toolkit (which

enables you to use the ImplicitStyleManager control). Unfortunately, you can’t specify the theme

at the application level because the ImplicitStyleManager control has some limitations imposed by

Silverlight, therefore in the root element of all of the views to be themed you will need to add the

following namespace prefix and property value definitions:

xmlsn:theming="clr-namespace:System.Windows.Controls.Theming; assembly=

System.Windows.Controls.Theming.Toolkit"

theming:ImplicitStyleManager.ResourceDictionaryUri=

"System.Windows.Controls.Theming.ExpressionDark.xaml"

theming:ImplicitStyleManager.ApplyMode="OneTime"

Now when you compile and run your project you will find all the controls in the views that have had

their themes set are now using the themes from the specified theme file.

You may find that the project doesn’t compile due to missing references that the

theme file is using. Because the theme file has styles for many different controls,

it is referencing the assemblies that contain those controls. You can either add

a reference to the required assemblies, or if you don’t want to use them, you

can remove the styles for those controls (and their related namespace prefix

definitions) from the theme file.

If you create your project using the Silverlight Navigation Application template or the Silverlight

Business Application template you can also take advantage of some alternative application themes that

have been created to give your application a whole new look. You can find the application theme styles

in the Styles.xaml file under the Assets folder in your Silverlight project. The App.xaml file merges

the styles from this file into its own if your project is based on the Silverlight Navigation Application

project template. MainPage.xaml uses the styles that have been defined in Styles.xaml to specify its

layout and look. Therefore, all you need to do is replace this file with one with the same styles defined

but with different values in order to completely change the way the application looks. A number of

alternative application theme files for projects

based upon the Silverlight Navigation Application

project template have been created by Microsoft

and the community, and can be downloaded from

http://gallery.expression.microsoft.com

(look in the Themes category). For example,

simply replacing the Styles.xaml file for the

project shown in Figure 22 - 7 with the theme file

from the gallery called “Frosted Cinnamon Toast”

completely changes the way it looks, as shown in

Figure 22 - 8. fiGure 22-8

enabling running out of Browser .

481

enablinG runninG out of browser

Though Silverlight was initially designed as a browser-based plug-in, Silverlight 3 introduced the

ability to run a Silverlight application outside the browser as if it were a standard application,

and it was no longer necessary to run your Silverlight application within a browser. In fact, you

don’t even need to be online to run a Silverlight application once it has been installed to run in

Out-Of-Browser mode. Out-Of-Browser applications are delivered initially via the browser, and

can then be installed on the machine (if enabled by the developer). This install process can be

initiated from the right-click menu or from code — the only criteria being that the install process