I've been learning a bit of WPF lately and found the DataTemplates to be very useful. I've put together a small example of how to use these to create a simple but tasty design template for a list of items.

I began by creating an extremely simple Employee class:

class Employee
{
    public string Firstname { get; set; }
    public string Lastname { get; set; }
    public string Username { get; set; }
    public string Role { get; set; }
}

Then, in my WPF window xaml, I created a DataTemplate for my Employee class in the Window.Resources section :

<DataTemplate DataType="{x:Type WpfDataTemplates:Employee}">
    <Border Background="White" 
        Margin="5" 
        BorderBrush="Gray" 
        BorderThickness="1" 
        CornerRadius="3,3,3,3"
        Width="300">
        <Border.BitmapEffect>
            <DropShadowBitmapEffect Color="Black" 
                                Direction="0" 
                                Opacity="0.5" 
                                ShadowDepth="5"/>
        </Border.BitmapEffect>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="90"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>
            <Image Width="60" 
               Height="60" 
               Grid.Column="0" 
               Source="Resources\User.png"></Image>
            <StackPanel Orientation="Vertical" 
                    Grid.Column="1">
                <TextBlock Text="{Binding Path=Username}" 
                           FontSize="16" 
                           FontWeight="Bold" 
                           Foreground="Gray"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Name:"/>
                    <TextBlock Margin="5,0,0,0" 
                           Text="{Binding Path=Firstname}"/>
                    <TextBlock Margin="5,0,0,0" 
                           Text="{Binding Path=Lastname}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Role:"/>
                    <TextBlock Margin="5,0,0,0" 
                               Text="{Binding Path=Role}" 
                               FontWeight="Bold" 
                               Foreground="Black"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Border>
</DataTemplate>

This xaml describes a fairly simple DataTemplate. The DataType attribute tells WPF which type I am creating the template for. Inside the template, there is a rounded border with a simple drop-shadow effect that is used to contain the rest of the template content. Inside the bordr, there is a grid with one row and two columns. There is an icon image displayed in the first column, and the Employee properties are displayed in the second column.

You can use an image file in your project and use the file's relative path as the image source, such as "Resources\User.png" if the image file is part of your project and its build action is set to "Resource". You can do this in Visual Studio by changing the build action in the file’s property section.

Now to actually use the template... In the content section of my WPF Window, I added the following:

<StackPanel Orientation="Vertical" Height="Auto">
    <Label Content="Employees:" 
           FontSize="16" 
           FontWeight="Bold"/>
    <ScrollViewer Height="320">
        <ItemsControl x:Name="PersonItems" 
                      HorizontalAlignment="Left">
        </ItemsControl>
    </ScrollViewer>
</StackPanel>

This section is where the list of Employees will be shown. I am using an ItemsControl with the name "PersonItems" to contain my Employee objects.

In my Window codebehind, I added a CreatePeople method to generate some dummy Employee instances for the demo, and set the ItemsControl's ItemSource to a list of Employees.

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        PersonItems.ItemsSource = CreatePeople();
    }

    List<Employee> CreatePeople()
    {
        Employee person1 = new Employee()
        {
            Firstname = "John",
            Lastname = "Smith",
            Role = "Manager",
            Username = "JSmith"
        };
        Employee person2 = new Employee()
        {
            Firstname = "Bob",
            Lastname = "Johnson",
            Role = "Developer",
            Username = "BobbyJohnson"
        };
        Employee person3 = new Employee()
        {
            Firstname = "Jim",
            Lastname = "Jackson",
            Role = "Developer",
            Username = "JimmyJack"
        };
        Employee person4 = new Employee()
        {
            Firstname = "Sally",
            Lastname = "Smith",
            Role = "Designer",
            Username = "TheSalster"
        };
        return new List<Employee>() { person1, person2, person3, person4 };
    }
}

You don’t need to tell it to use the DataTemplate you've created - it will automatically be used to display elements of type Employee within your window. On starting the application, the final result looks like this:

You can download the source for this DataTemplate samplehere.