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