Recently learned a nifty trick from Pete Blois about how to use a UserControl as a DataTemplate in Silverlight 2.  This is real handy, because it allows for a more WPF-like workflow, allowing a designer to create data templates in Blend. With this workflow, the designer can go ahead and build out the data template as a UserControl. He/she may need some help from the developer to wire up the data fields -- in fact, the recommendation would be that the developer maybe create a dummy project with all the fields for the designer and then the designer can party on. (I modeled this technique here for WPF and reskinning Flotzam.)

So, here's a real simple data template from a user control:

<UserControl
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="SilverlightApplication1.DataView"
    d:DesignWidth="149" d:DesignHeight="36" Width="153" >

    <Grid x:Name="LayoutRoot" Background="#FFFF0000" >
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top"
Text="{Binding}" TextWrapping="Wrap"/> </Grid> </UserControl>

 

Note the use of the {Binding} syntax, which will just default bind to the single property on my data class. You could of course name the property you are binding to in the more likely case that you had more properties in your class.

Then, the xaml file that actually uses this as a data template looks like this:

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" 
    xmlns:SilverlightApplication1="clr-namespace:SilverlightApplication1;assembly=SilverlightApplication1"
    xmlns:d=http://schemas.microsoft.com/expression/blend/2008
    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable="d"> <UserControl.Resources> <SilverlightApplication1:DataSource x:Key="DataSourceDS" d:IsDataSource="True"/> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <ListBox Margin="8,8,165,8" ItemsSource="{Binding Items, Mode=OneWay,
Source={StaticResource DataSourceDS}}"
> <ListBox.ItemTemplate> <DataTemplate> <Grid Background='Blue' HorizontalAlignment='Stretch'> <SilverlightApplication1:DataView /> </Grid> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> </UserControl>

Note that in the attribute where I register the namespace for the datasource, I explicitly refer to the assembly.  This is a gotcha when doing this; normally you don't need to refer to the assembly if it is in the same class, but in this case you do.

And there you have it.  Download the code here if you'd like.

Posted on March 31, 2008 14:00
Actions: E-mail | Comments (4)

Comments


Alan Cobb

Alan Cobb

May 4, 2008 04:41

Thanks for this great tip.  I just used it.  The "gotcha" you mention at the end also got me.

Alan Cobb
          


Tom Carver

Tom Carver

May 4, 2008 17:16

Thanks so much, I've been going round and round with this one for 2 weeks now, I was about to abandon the user control idea when I did one last google...

Tom Carver
          


Lee

Lee

January 24, 2009 23:35

I've been doing this for a while and would like to have the template change when the item is selected - no idea where to start!
          


steve

steve

February 9, 2009 22:23

Can someone explain to me why is xmlns:d=http://schemas.microsoft.com/expression/blend/2008" rel="nofollow">http://schemas.microsoft.com/expression/blend/2008 " target="_blank" >http://schemas.microsoft.com/expression/blend/2008" rel="nofollow">http://schemas.microsoft.com/expression/blend/2008
used in the xaml file? What would happen it was removed from the xaml file?
          


Add comment

Enter your name, handle, alias, or email.

We'll incarnate your avatar from the services below.