Inserting a Silverlight Navigation and Slideshow into Your Web Page

Expression Web makes it faster and easier to create standards-based Web sites with rich Silverlight content. With Expression Web 3, you can easily add Silverlight content, in this case from Expression Blend, to your Web sites.

In this example, we’ll be adding a navigation menu bar and interactive slide show to the Web site by inserting this Silverlight content into an Expression Web page.

Users who come to your site will see your Silverlight 3 content as long as they have the Silverlight 3 Plugin; users who do not have the Silverlight 3 Plugin will be prompted to download it.

Modifying the Layout to Fit the Silverlight Content

HTML and CSS layouts are based on a box model and it’s important to keep this in mind when you plan to add Silverlight content. Silverlight content is imported into your pages with a fixed width and height and if the size of the Silverlight file is larger than the container it’s being added to it, may break the layout, become clipped or in some way create visual problems. Therefore, when possible, you should set the width and height of the container area in your web page to match the width and height of the Silverlight content.

In this case, we’ll modify the topnav div container for the page so that it is sized the same as the Silverlight content. First, I’ll select the div.

With Expression Web’s CSS Properties tab, I can display the CSS properties for this div. Although there are dozens of possible CSS properties, many of them will be empty; to make it easier to find the values for this particular container, I can change the way Expression Web displays the properties.

In the CSS Properties panel, I can click the third icon to show just the Set properties on top. This will sort only those properties that have a value to the top, in this case: background-color, height and width.

I’ll change the value for the div’s height by just clicking on it and typing, in this case, 418px. The Silverlight content has dimensions of 980 pixels wide by 418 pixels high. So this area now matches in size.

Inserting Silverlight Content

Now, I can choose Insert> Media> Silverlight from Expression Web’s menu and a window appears asking to select a Silverlight XAP file. In this case, I’ll select the Lucerne_navheader.xap file and then click Open.

I can also just drag and drop the Silverlight control from the Toolbox into the topnav div.

When you insert Silverlight content into a web page, Expression Web creates an inline frame to contain the Silverlight content and displays a blank placeholder.

Now, we need to set the width and height of that inline frame.

Click on the Silverlight placeholder to select it and then click on the tag Properties panel. You will see attributes for data, height, type and width. The height and width properties are set to default values of 480 and 640. This should be changed to match the size of the Silverlight content.

So, I’ll change the size of the placeholder to match the Silverlight content.

The Silverlight placeholder will now have expanded to fit the topnav section.

Once I’ve saved the Web page and CSS file, I can preview the Web page in the browser.

To preview your page in the browser press F12 or choose File > Preview in Browser.

Depending on which browser you are using and your security settings, you may need to allow the browser to run the Silverlight content.

The Silverlight content will appear in the top half of your page as an animated slide show as well as an interactive navigation bar.

For more information on how to add Silverlight content to your Web site, here is a set of tutorials that covers this example.

For a free 60-day trial of Expression Web 3, click here.

Please tell us what you think about Expression Web 3.