Bind Usercontrol contained in a ObservableCollection in a WrapPanel

Question

I have a class defined this way:

    public class CustomClass
    {
        string Name;
        int Age;
        Usercontrol usercontrol;
    }

where Usercontrol is a visual element that I want to insert in a WrapPanel.

CustomClass is organized in a static ObservableCollection.

    public static class CollectionClass
    {
        public static ObservableCollection<CustomClass> MyCollection = new ObservableCollection<CustomClass>();
    }

I am looking to bind the usercontrol property of the CustomClass in the collection to be visualized in the WrapPanel, so I have the visual elements showed in the same order as the elements in the collection.

Right now I am populating the WrapPanel manually by code, but I figured that there has to be a way to do it quickly and easily through databinding. I am trying to do it with a ItemsControl defined this way:

    <ItemsControl Name="SensorMenuWrap"  ItemsSource="{Binding }">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

but I don't know how to make the magic happen.

EDIT:

I tried the solution proposed by ChrisO, implemented like that:

1 - I made the collection a property

2 - I made the UserControl a property

3 - I set DataContex from code:

SensorMenuWrap.Datacontext = CollectionClass.MyCollection

4 - The binding:

         <ItemsControl Name="SensorMenuWrap"  ItemsSource="{Binding }">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ContentControl Content="{Binding usercontrol}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Now I can visualize the first element of the collection. If the first element changes, I visualize the new first element. How can I visualize the entire collection?

ChrisO · Accepted Answer · 2014-09-09T11:33:18.560

I haven't tested this. Also, make sure that userControl is a property rather than a field. I'm assuming you know how to set the DataContext up correctly to refer to the MyCollection property.

<ItemsControl Name="SensorMenuWrap"  ItemsSource="{Binding MyCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding userControl}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

You should also consider referring directly to the UserControl in the DataTemplate rather than binding to it as a property on the class. That would look like this

<ItemsControl Name="SensorMenuWrap"  ItemsSource="{Binding MyCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Edit:

In response to your edit, you would be much better tackling this with a reusable UserControl with DataBindings on the properties of CustomClass. Here's what I have to achieve that:

CollectionClass

public static class CollectionClass
    {
        public static ObservableCollection<CustomClass> MyCollection { get; set; }

        static CollectionClass()
        {
            MyCollection = new ObservableCollection<CustomClass>();

            MyCollection.Add(new CustomClass { Age = 25, Name = "Hamma"});
            MyCollection.Add(new CustomClass { Age = 32, Name = "ChrisO"});
        }
    }

CustomClass

public class CustomClass
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }

UserControl contents

<StackPanel>
        <TextBlock Background="Tan" Text="{Binding Name}" />
        <TextBlock Background="Tan" Text="{Binding Age}" />
    </StackPanel>

MainWindow

<ItemsControl Name="SensorMenuWrap"  ItemsSource="{Binding }">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <so25728310:Usercontrol Margin="5" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Here, instead of having the Usercontrol baked into your data, you're keeping it in the view. It's always good to have a separation between your view and data. You could even do away with the Usercontrol and have the two TextBoxes directly in the DataTemplate but it depends on whether you would want to reuse that view elsewhere.

It will not be working. MyCollection is not itself a property. His DataContext needs to be an object, static class will not provide this. — Maximus, Sep 08 '14 at 16:10
Not necessarily, you can set the DataContext of an element to a static class if you want to. MyCollection will have to be a property on that static class though. — ChrisO, Sep 08 '14 at 16:15
Your solution works partially. Could you please see the edit and help me fix it? — Hamma, Sep 09 '14 at 10:58
I cannot use your approach because I have several userControls inside the class. The one that I wrote is an oversimplified example to make it easy to understand how the elements are interacting, but at this point I cannot change the structure. — Hamma, Sep 09 '14 at 11:46
I've just found out that the "partially working" solution was my bad: I assumed the WrapPanel to get the Width of its parent without explicitly declare it, while children were expanding horizontally beyond the Width of the parent. That is why I didn't see them and I thought that only the fist element of the collection was showing. The solution is working, so I mark it as answer. — Hamma, Sep 09 '14 at 15:44

Bind Usercontrol contained in a ObservableCollection in a WrapPanel

1 Answers1

Linked