by Felix Andrew

Overview

In this article, I will outline the steps needed to customize a Silverlight Web Gallery template using Expression Blend 2. The steps to getting started are a little tricky, but it's good fun. First, you need to download the Button-Template gallery and try it out. Next, you will run Expression Blend 2 to make a few simple changes to the gallery and review the changes in your new gallery. Finally, you will make a few changes to the JavaScript and XAML to make use of more catalog information.

Getting a new gallery

Step 1

Make sure that Expression Media 2 is not running.

Step 2–Installing a new gallery

Install the new Silverlight Button gallery.

Assuming that you installed Expression Media 2 on your C: drive, you will want to copy the button-template folder to:

C:\Program Files\Microsoft Expression\Media 2\en\Plug-ins\HTML Templates

If you are running Windows Vista, you may be prompted to allow the copy to this folder.

Step 3–Checking the gallery works

Run Expression Media 2, and load a few images.

On the Make menu, click HTML Gallery, and find the button-template theme.

Click the Make... button. As usual, the resulting gallery should look something like this:

Making changes

Step 1—Running Expression Blend 2

If you are running Windows Vista, you will need to run Expression Blend 2 as an administrator. If you are not familiar with this, here's how to do it:

1. Press the Windows key, and then type Blend.
2. In the Programs list, you should see Expression Blend 2.
3. Right-click on the icon for Expression Blend 2 and select Run as Administrator.

You need to run Expression Blend 2 as an administrator so that it can save changes in the Program Files folder where you installed the template.

Step 2–Load the template

On the File menu in Expression Blend 2, click Open, and select Site….

Enter the location where you saved the HTML gallery:

C:\Program Files\Microsoft Expression\Media 2\en\Plug-ins\HTML Templates\button-template

Step 3–Understanding the Page

After the project has loaded, the Objects and Timeline panel should look like this:

Select each object to see the area on the page which it relates to. Block1 and block2 provide the shadow on the left and right of the gallery.

First select the frame, and then delete it.

Step 4—Adding a title

Add a TextBlock to the Header object, and size it.

Put in some default text such as your name. Make sure that the foreground color you pick is not black, or it will not show up. Set the font size, and perhaps opacity.

After you are happy with it, on the File menu, click Save.

Reviewing the change

Now you will review the changes you made by regenerating the gallery.

Step 1—Regenerate

Switch to Expression Media 2 again and on the Make menu, click HTML Gallery. Remember that you are using the button-template, so just click Make….

Step 2—Iterate

You can continue to switch between Expression Blend 2 and Expression Media 2 making changes and reviewing them in the browser as often as you like. Remember to save the file in Expression Blend 2 after you make the change, or Expression Media 2 will not use your latest changes.

Here's how mine ended up:

Step 3–Using tags

Expression Media 2 will only substitute tags in specific HTML files. The file you have been modifying is Page.xaml. Unfortunately, this file is not processed, so you cannot simply type (iView:Catalog) for the text of a control and have it replaced.

If you open the index.html file, you will see the following:

(iView:IndexStart)

{"Catalog":"(iView:Catalog)","filename":"(iView:Filename)",
"imageWidth":"(iView:Width)","imageHeight":"(iView:Height)",
"width": "(iView:OriginalWidth)","height":"(iView:OriginalHeight)"
,"Caption":"(iView:CaptionEncoded)","type":"(iView:MediaType)"
,"thumbWidth": "(iView:PreviewWidth)","thumbHeight":
"(iView:PreviewHeight)","imageUrl": "source/image/(iView:MediaFile)","previewUrl":"preview/(iView:PreviewFile)"},
(iView:IndexEnd)

This code sets up a JSON object, which holds a lot of information about each file, such as Catalog, filename, imageWidth, imageHeight, imageUrl, etc. This object is used in the page.xaml.js file to create the Silverlight controls.

Step 4–Changing the script

To update your TextBlock with the caption, you will need to change it using some JavaScript. To access the TextBlock, you need to give it a name. In Microsoft Blend 2, click on the TextBlock control, and name it caption. Remember to save the file.

Click on the Project tab, and double click on the Page.xaml.js file. Do not worry if you are not familiar with writing JavaScript.

At the top of the file, you will see this line:

handleLoad: function(control, userContext, rootElement)

This code constructs all of the images on the page. This is where you will add a customization to your caption control. At the bottom of the function, you will see this line:

this.leftArrow.Visibility = "Collapsed";

After this line, add these two lines:

this.caption = this.control.content.findName("caption");
this.caption.Text = this.image_data.images[0].Catalog + ", " +
(this.image_data.images.length - 1) + " images";

This code first finds the TextBlock control you created named caption. Next, set the Text property of that control to the Catalog property of the first image and the number of images in that catalog.

Summary

I hope this has helped demonstrate the use of Expression Blend 2 and Expression Media 2 to create and customize a simple Silverlight gallery.

If you have any galleries that you would like to show off, please do so at the Microsoft Expression Community site.