Defining your Objects with XAML in Resources to enhance your Design Time Experience

Please follow and share!

XAML is an extremely powerful markup tool.  A less known fact is that it is possible to instantiate instances of your classes directly in markup.  This is useful in more than one way

  1. it allows you to define sample data for use in your application without reliance on external data sources.
  2. it gives you a much richer design-time experience when laying out your application (data defined in resources will automatically be displayed in the designer, for instance, when defining Data Templates, you will see the data render in the data template at design-time and not only at run-time)

In order to define your objects in resources, you’ll need to define the class of the object you will be instantiating in XAML.  In this sample the class is defined as:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace SimpleDataTemplate
public class ImageFavorite
public int ImageId { get; set; }
public string ImageName { get; set; }
public int ImageRating { get; set; }
public string ImageHref { get; set; }

Next, in the XAML file where you will be using objects of this class, you will need to add an XML namespace to the assembly in which your class definition resides. In the sample below the namespace "local" is added that references a namespace in the current project assembly (if your class is located in a separate assembly, follow the namespace with a semicolon, and the name of the assembly without extension) where the ImageFavorite class is located:

<Window x:Class="SimpleDataTemplate.FancierTemplate"
Title="FancierTemplate" Height="335" Width="500"
<!-- the line above adds the namespace "local" to represent the local assembly -->

In Resources you can now define instances of the ImageFavorite class.  In this example, an array of instances of the ImageFavorite class is created:

<x:Array x:Key="FavoriteImages" Type="{x:Type local:ImageFavorite}">
<local:ImageFavorite ImageId="1" ImageName="Internet Loss" ImageRating="2" ImageHref="Images/internetloss.bmp" />
<local:ImageFavorite ImageId="2" ImageName="Magic Well" ImageRating="4" ImageHref="Images/magicwell.bmp" />
<local:ImageFavorite ImageId="3" ImageName="ET" ImageRating="2" ImageHref="Images/ET.jpg" />
<local:ImageFavorite ImageId="4" ImageName="Laser" ImageRating="4" ImageHref="Images/lazer.bmp" />
<local:ImageFavorite ImageId="5" ImageName="Rims" ImageRating="5" ImageHref="Images/rims.bmp" />
<local:ImageFavorite ImageId="6" ImageName="Not Ripe" ImageRating="5" ImageHref="Images/cheeznotripe.bmp" />
<local:ImageFavorite ImageId="7" ImageName="Kibbles" ImageRating="3" ImageHref="Images/kibbles.bmp" />
<local:ImageFavorite ImageId="8" ImageName="Commuting" ImageRating="2" ImageHref="Images/failcommute.bmp" />
<local:ImageFavorite ImageId="9" ImageName="Huh?" ImageRating="5" ImageHref="Images/huhfail.bmp" />
<local:ImageFavorite ImageId="10" ImageName="Bubble Gum" ImageRating="5" ImageHref="Images/bubblegum.bmp" />

This data can now be used in this XAML window.  To access this data, for example, if using a list box control you can assign the ItemsSource="{StaticResource FavoriteImages}" where FavoriteImages is the key assigned to the array of objects in the Resources.  The data defined in resources will now render at run-time in the list box control.

Please follow and share!