绑定包含在ObservableCollection< CustomClass>中的Usercontrol.在WrapPanel中 [英] Bind Usercontrol contained in a ObservableCollection<CustomClass> in a WrapPanel

问题描述

我有一个这样定义的类:

I have a class defined this way:

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

其中Usercontrol是我要插入WrapPanel的可视元素.

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

CustomClass是在静态ObservableCollection中组织的.

CustomClass is organized in a static ObservableCollection.

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

我希望将CustomClass的usercontrol属性绑定到集合中，以便在WrapPanel中可视化，因此我以与集合中的元素相同的顺序显示视觉元素.

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.

现在，我通过代码手动填充WrapPanel，但我认为必须有一种方法可以通过数据绑定快速而轻松地完成此操作. 我试图用这样定义的ItemsControl来做到这一点:

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.

我尝试了ChrisO提出的解决方案，其实现方式如下:

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

1-我将集合设为属性

1 - I made the collection a property

2-我将UserControl设置为属性

2 - I made the UserControl a property

3-我通过代码设置了DataContex:

3 - I set DataContex from code:

SensorMenuWrap.Datacontext = CollectionClass.MyCollection

4-绑定:

         <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?

推荐答案

我尚未对此进行测试.另外，请确保userControl是属性而不是字段.我假设您知道如何正确设置DataContext以引用MyCollection属性.

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>

您还应该考虑直接在DataTemplate中引用UserControl，而不是将其绑定为类的属性.看起来像这样

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>

作为对您的编辑的回应，您最好在CustomClass属性上使用具有DataBindings的可重用UserControl来解决此问题.这是我要实现的目标:

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"});
        }
    }

自定义类

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

UserControl内容

<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>

在这里，您无需将Usercontrol烘焙到您的数据中，而是将其保留在视图中.在视图和数据之间保持分隔始终是一件好事.您甚至可以取消UserControl，直接在DataTemplate中拥有两个TextBox，但这取决于您是否要在其他地方重用该视图.

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.

这篇关于绑定包含在ObservableCollection< CustomClass>中的Usercontrol.在WrapPanel中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！