Hi,

When using a UserControl within a DataTemplate it fails to render, in fact sometimes it takes down any other controls anywhere on the page.

In the following example where MyListOfStuff is just a simple collection of strings the first ListBox renders fine with a single string output from MyUserControl. The second ListBox using the exact same UserControl should render n items - one for each row in the MyListOfStuff collection but it renders nothing. If I replace <myApp:MyUserControl /> with <ContentControl Content="stuff" /> I get the n items as expected.

Is this a bug or have I just missed something, any ideas?

<UserControl x:Class="myApp.Problem"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:myApp="clr-namespace:myApp" >
    <UserControl.Resources>
        <myApp:MyListOfStuff x:Key="MyListOfStuffDS" />
    </UserControl.Resources>
    <StackPanel>
        <ListBox MinHeight="70">
            <ListBoxItem>
                <ListBoxItem.Content>
                    <myApp:MyUserControl />
                </ListBoxItem.Content>
            </ListBoxItem>
        </ListBox>
        <ListBox MinHeight="70" ItemsSource="{Binding '', Mode=OneWay, Source={StaticResource MyListOfStuffDS}}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <myApp:MyUserControl />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</UserControl>

// my user control
<UserControl x:Class="myApp:MyUserControl"
 xmlns="http://schemas.microsoft.com/client/2007"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <ContentControl Content="stuff" />
</UserControl>

You should not define a user control inside another user control. You need to define your control in another XAML file and reference it in your other control. You can refer to Scott Guthrie Silverlight tutorial part6 for more info about using user controls

http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-6-using-user-controls-to-implement-master-detail-scenarios.aspx 

Thanks
Yasser Makram
My Blog: http://www.silverlightrecipes.com
Sr. Architect
Santeon Inc. Microsoft Silverlight Partner, Solution Provider

Apologies for the confusion, I enclosed the usercontrol definition for completeness it does not represent the file structure; in my project it is in a separate file. Unfortunately Scott's examples do not include a UserControl from within the DataTemplate which is where the problems start, if I leave as is but replace the UserControl with just a ContentControl it works fine.

Does anyone have an example of a UserControl being used in a DataTemplate like my example? It just doesn't work. I know something is up because sometimes in VS2008 the design view renders fine, then if I rebuild the whole project or run it all the pages fail to render. If I remove just the UserControl and replace it with a simple control is all works fine.

I've created a test case:
1. create vs2008 silverlight application called: sl2datatemplateproblem
2. select 2nd option for application project: generate an html test page to host silverlight within this project
3. paste the following into Page.xaml:

<UserControl x:Class="sl2datatemplateproblem.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sl2datatemplateproblem="clr-namespace:sl2datatemplateproblem">
    <UserControl.Resources>
        <sl2datatemplateproblem:MyListOfStuff x:Key="MyListOfStuffDS" />
    </UserControl.Resources>
    <StackPanel>
        <ListBox x:Name="lstOne" MinHeight="70">
            <ListBoxItem>
                <ContentControl Content="unbound stuff" />
            </ListBoxItem>
        </ListBox>
        <ListBox x:Name="lstTwo" MinHeight="70" ItemsSource="{Binding MyListOfStuffItems, Mode=OneWay, Source={StaticResource MyListOfStuffDS}}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ContentControl Content="{Binding ''}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <ListBox x:Name="lstThree" MinHeight="70" ItemsSource="{Binding MyListOfStuffItems, Mode=OneWay, Source={StaticResource MyListOfStuffDS}}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ContentControl Content="{Binding ''}" />
                    <!-- <sl2datatemplateproblem:MyUserControl/> -->
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</UserControl>

4. add a new usercontrol called MyUserControl.xaml and paste in the following:

<UserControl x:Class="sl2datatemplateproblem.MyUserControl"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel Orientation="Horizontal">
        <ContentControl Content="{Binding ''}" />
        <ContentControl Content=" [From UserControl]" />
    </StackPanel>
</UserControl>

5. add a new class called MyListOfStuff.cs and paste in the following:

using System;

namespace sl2datatemplateproblem
{
    public class MyListOfStuff
    {
        public Array MyListOfStuffItems { get; set; }

        public MyListOfStuff()
        {
            MyListOfStuffItems = new string[] { "stuff 1", "stuff 2", "stuff 3" };
        }
    }
}

6. Rebuild project
7. show Page.xaml in the VS2008 xaml design view. This shows 3 listboxes, the 1st with 1 item called: "unbound stuff", the 2nd & 3rd listboxes contain 3 items from the databinding array (MyListOfStuffItems) called stuff 1, stuff 2 & stuff 3.
8. hit f5 and you get the same 3 listboxes correctly displayed in the browser.
9. in vs2008 using a split view of Page.xaml change the 3rd listbox (lstThree) by commenting out the ContentControl and uncommenting the usercontrol: <sl2datatemplateproblem:MyUserControl/>
10. reuild the project, all 3 listbox render correctly in the vs2008 xaml design view, the only difference being that the 3rd listbox is now using the UserControl and so suffixes the items with ' [From UserControl]' for clarity.
11. hit f5 and now nothing appears in the browser
12. reverse the changes in 9. (comment out the usercontrol leaving the contentcontrol uncommented), hit f5 and the listboxes reappear in the browser again.

help!

Any ideas/solutions would be greatly received as I've been banging my head for hours on this one.

 I've hit that too, I'm pretty sure it's a bug.

it's looking that way - there seem to be other similar problems with DataTemplates.

I'm looking for a workaround now, how can I vary the ListBox.ItemTemplate for each item in the ListBox? i.e. If I have a ShapeType property on the objects stored in the collection that's bound to the ListBox how do I show a square or circle in different listbox items?

I personally wanted to dispaly different images depending on the value of the enum it was bound to. Since i couldnt use dynamic templates, I used a converter that returned a different image url depending on the input, and that worked great.  Maybe you can create a converter that takes whatever your object is, and outputs a reference to the circle or square you want to display. Let me know if that helps or not.

I've thought about using converters but this is only really useful for simple mods on individual properties, I would like to potentially have completely different xaml markup depending on the enum. The ShapeType was just a simple example, my actual needs require different xaml structures for each enum value.

My best idea at the moment is to have one ContentControl per enum value and then use a converter to alter the visibility. Should work but very inefficient including multiple unused xaml per list item, don't know how well it will scale.

Hello, currently there're some problems with UserControl. Even if your UserControl is defined in the same assembly, you must add assembly=YourAssembly when mapping your namespace:

xmlns:sl2datatemplateproblem="clr-namespace:sl2datatemplateproblem;assembly=sl2datatemplateproblem"

Also, you must call InitializeComponent method in your UserControl's constructor. And finally, maybe it's a problem with this forum. But there're many mismatch semicolons in your markup...

shanaolanxing - Please mark the posts as answers if they help and unmark if they don't.

Thanks Yi-Lun, that's fixed it - simple when one has the answer. I learnt a lot about converters whilst working around the problem anyway!

With regards the mismatch semicolons in the markup I've just copy/paste my test case straight from IE into VS2008 and it worked first time. Maybe it's localisation issue on IE Happy to investigate if you want a dialogue somewhere else.

Many thanks for the solution.