More Resources Microsoft Silverlight 2.0 MSDN: Microsoft Visual Studio 2008     Downloads

Loading Card Data
The application retrieves the data for the card list from a standard ASP.NET AJAX Web service. You need to add the ScriptService attribute to the Web service class and the ScriptMethod attribute to the methods of that class to allow Silverlight to call the service methods.

Currently, Silverlight does not allow cross-domain service calls, so any services you wish to consume must be hosted on the same domain as your Silverlight application. However, you can get around this restriction by simply employing an intermediary service hosted on the same domain as your Silverlight application that calls out to a remote Web service.

User Settings
It's useful to let users control the maximum number of cards to display in the rolodex view. The application supports that feature via a simple class that exposes a publicly assessable property. Rather than making a web service call every time the application needs these settings, it's much more efficient to read them from the client. This technique is where isolated storage comes to the rescue.

Silverlight 2.0 provides access to Microsoft's isolated storage functionality. The isolated storage functionality provided by Silverlight is based on the isolated storage functionality in the .NET framework.

Author's Note: Isolated storage access is available only in Silverlight 2.0 version through managed code; there is no JavaScript equivalent, so Silverlight 1.0 does not have this ability.

Each Silverlight application has access to its own unique location in isolated storage. As its name implies, isolated storage is sectioned off from the rest of the file system in a low-trust area. Within an application's isolated storage area, the application pretty much has full reign to manipulate files and directories. The only restriction is that the amount of data stored in isolated storage may not exceed 1 MB for a single application.

To access isolated storage, the application first obtains a reference to an IsolatedStorageFile object, which then provides access to a special IsolatedStorageFileStream type:

 IsolatedStorageFile isoStore =
IsolatedStorageFile.GetUserStoreForApplication();
IsolatedStorageFileStream isoStream =
new IsolatedStorageFileStream(_settingsFilename,
FileMode.Open, isoStore))

Using that file stream you can read the isolated storage data; in this case the application reads that data into a string:

 JavaScriptSerializer jsonSerializer =
new JavaScriptSerializer();
String buffer = reader.ReadToEnd();
_currentUserSettings = jsonSerializer.Deserialize
<UserManagementSettings>(buffer);

The application serializes data in the settings file using JavaScript object notation (JSON), a format that's much less verbose than XML. ASP.NET AJAX Web services use the JSON serializer to decrease the size of data sent over the wire.

Previewing Cards
Because all user cards are initially displayed stacked, partially transparent, and with only part of their information visible, users need a simple way to preview a single card without having to actually select it. Therefore, whenever a user hovers the mouse pointer over a card, the application increases the opacity of that card until it appears solid. You can achieve this result via a combination of event handlers and animations.

Specifically, the application employs two animations: one to increase the card's opacity and another to reduce the opacity when it is no longer being hovered over. These animations are started by card's MouseEnter and MouseLeave events, respectively:

 protected void frontSide_MouseEnter(
object sender, MouseEventArgs e)
{
// Start the animation that raises the
// opacity of the card.
_animShowCard.Begin();
_control.SetValue<double>(
Canvas.ZIndexProperty, 99);
}
protected void frontSide_MouseLeave(
object sender, EventArgs e)
{
// Start the animation that lowers the opacity of the card.
_animHideCard.Begin();
_control.SetValue<double>(
Canvas.ZIndexProperty, ZIndex);
}

To start an animation, you simply get a reference to the appropriate StoryBoard object and then call the Begin method. (Storyboard objects also bubble up notification events when an animation begins or completes.)

There are two different ways to store animations: inline or as resources. The user viewer application stores animations as resources. Note that you must control animations stored as resources from code as opposed to markup.

Figure 2. Enlarged Card: When clicked, a "fly-out" animation enlarges the card, providing additional screen space for detail information.

Viewing Cards
The user viewer also uses animations to control the fly-out and fly-in effects when a user selects a card. While the minimized/rolodex view is sufficient for selecting a card, you want it to enlarge when a user clicks on it. The enlargement provides a "master/detail" effect because enlarging the card increases the space available for displaying user information (see Figure 2).

The left button click event handler begins the card fly-out animation that enlarges the card and shifts it to the right. The application hooks the fly-out animation's Completed event, at which point you can can unsubscribe from the card's mouseover and left mouse button click events, because you don't want to react to those events when a card is enlarged. Instead, you want to hook a different event handler up to the left mouse button click event of the user card. This new event handler starts an animation that shrinks the user card and shifts it to the left, moving it back to its original position.