Loading XAML at runtime?

Viewed 74183

First some background: I'm working on an application and I'm trying to follow MVVM conventions writing it. One thing I'd like to do is to be able to give the application different "skins" to my application. The same application, but show one "skin" for one client and a different "skin" for another.

And so my questions are:
1. Is it possible to load a xaml file at run time and "assign" it to my app?
2. Can the xaml file be an external file residing in a different folder?
3. Can the application switch to another xaml file easily, or only at startup time?

So where should I start looking at for information on this? Which WPF methods, if they exist, handle this functionality?

Thanks!

Edit: the type of "skinning" I'm wanting to do is more than just changing the look of my controls. The idea is having a completely different UI. Different buttons, different layouts. Kinda like how one version of the app would be fully featured for experts and another version would be simplified for beginners.

6 Answers

As Jakob Christensen noted, you can load any XAML you want using XamlReader.Load. This doesn't apply only for styles, but UIElements as well. You just load the XAML like:

UIElement rootElement;
FileStream s = new FileStream(fileName, FileMode.Open);
rootElement = (UIElement)XamlReader.Load(s);
s.Close();

Then you can set it as the contents of the suitable element, e.g. for

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Foo Bar">
    <Grid x:Name="layoutGrid">
        <!-- any static elements you might have -->
    </Grid>
</Window>

you could add the rootElement in the grid with:

layoutGrid.Children.Add(rootElement);
layoutGrid.SetColumn(rootElement, COLUMN);
layoutGrid.SetRow(rootElement, ROW);

You'll naturally also have to connect any events for elements inside the rootElement manually in the code-behind. As an example, assuming your rootElement contains a Canvas with a bunch of Paths, you can assign the Paths' MouseLeftButtonDown event like this:

Canvas canvas = (Canvas)LogicalTreeHelper.FindLogicalNode(rootElement, "canvas1");
foreach (UIElement ui in LogicalTreeHelper.GetChildren(canvas)) {
    System.Windows.Shapes.Path path = ui as System.Windows.Shapes.Path;
    if (path != null) {
        path.MouseLeftButtonDown += this.LeftButtonDown;
    }
}

I've not tried switching XAML files on the fly, so I cannot say if that'll really work or not.

You can load any XAML that you want using XamlReader.Load.

If you style all your controls in your application and define those styles in your applications resource dictionary you can load new styles defined in XAML somewhere else using XamlReader.Load and replace parts of your resource dictionary with the loaded XAML. Your controls will change appearance accordingly.

As it's already mentioned in other answers, you can use XamlReader.Load.

If you are looking for a more straightforward example, here is an example showing how easily you can create a control from a string variable containing the XAML:

public T LoadXaml<T>(string xaml)
{
    using (var stringReader = new System.IO.StringReader(xaml))
    using (var xmlReader = System.Xml.XmlReader.Create(stringReader))
        return (T)System.Windows.Markup.XamlReader.Load(xmlReader);
}

And as the usage:

var xaml = "<TextBox xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation\'>" +
            "Lorm ipsum dolor sit amet." +
            "</TextBox>";
var textBox = LoadXaml<System.Windows.Controls.TextBox>(xaml);
Related