Bind Usercontrol contained in a ObservableCollecti

问题:

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?

回答1:

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.