Silverlight - How to Dynamically Load a XAML File

This example is an updated version of an earlier post. With the release of the 1.0 Beta of Silverlight, dynamically loading a XAML file is easier. Now you only have to set the "Source" property of a SilverlightControl object. For information on how it used to be done, please review my previous post.

Here is a sample that dynamically loads XAML files based upon the selected shape.

Project Information
Source Code:	here
Developed For:	Silverlight 1.0 Beta

WPF/E - How to Create a Media Player

[Spoiler Alert] - This content will be presented at the Kentucky .NET User Group on March 8th, 2007 [/Spoiler Alert]

During the March 8th, 2007 Kentucky .NET User Group meeting I will be presenting an overview of WPF/E. In addition to the overview, I decided it would be helpful to provide a walkthrough of creating a media player to familiarize individuals with the platform.

While I was practicing presenting, I decided to record my presentation and try my hand at my first webcast. If you decide to watch the webcast, I would recommend waiting for the video to be 10% downloaded before clicking the "play" button. I apologize for the inconveniance, however, my presentation has a time limit and I was trying to focus on a lot of the core features of WPF/E. I will try to blog on an intelligent download/playback handler sometime in the near future. Please let me know if you have any questions.

Project Information
Presentation:	here
Duration:	44:23
Source Code:	here
Requirements:	WPF/E February 2007 CTP

WPF/E - How to dynamically load a XAML File

UPDATE - 05.05.2007: This content of this post is no longer valid with the 1.0 beta release of Silverlight. The updated post and source code can be found here.

Recently on the WPF/E forum someone was asking about how to dynamically load a XAML file. This post will explain how to accomplish this.

One of the great features of WPF/E is the fact that it is consistent with an established web architecture. At a high-level overview, within a webpage, a WPF/E component is hosted within an HTML element and you can use JavaScript to interact with the XAML content.

When working with XAML within the web architecture, it is important to remember both the Document Object Model (DOM) and the WPF/E Object Model.

Now let's get into the details of how to solve the problem of dynamically loading a XAML file. This really cool part is that we can do this in three easy steps.

1. Reference the WPF/E control via the Document Object Model (DOM).
   var wpfeControl = document.getElementById("wpfeControlID");
    
2. Use the "Source" property of the WPF/E control to specify a XAML file.
   wpfeControl.Source = "pathToXamlFile.xaml";
    
3. Reload the content of the WPF/E control with the contents of XAML file referenced by the "Source" property.
   wpfeControl.Reload();

For larger xaml files, it's generally recommended to use the Downloader object to enhance the user's experience. Here is a sample that loads a different .xaml file based upon the selected item. In addition the code for this sample is posted below. Thanks alot!

Project Information
Source Code:	here
Requirements:	WPF/E February 2007 CTP