在 WrapPanel 中绑定 ObservableCollection<CustomClass> 中包含的用户控件

Question

我有一个这样定义的类：

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

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

CustomClass 被组织在一个静态的 ObservableCollection 中。

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

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

现在我正在通过代码手动填充 WrapPanel，但我认为必须有一种方法可以通过数据绑定快速轻松地完成它。 我正在尝试使用以这种方式定义的 ItemsControl 来做到这一点：

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

但我不知道如何让魔法发生。

编辑：

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

1 - 我将集合设为属性

2 - 我将 UserControl 设为属性

3 - 我从代码中设置 DataContex：

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>

现在我可以可视化集合的第一个元素。如果第一个元素发生变化，我将可视化新的第一个元素。如何可视化整个集合？

Answer 1

我没有测试过这个。此外，请确保 userControl 是属性而不是字段。我假设您知道如何正确设置 DataContext 以引用 MyCollection 属性。

<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，而不是将其作为类的属性绑定。应该是这样的

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

编辑：

作为对您的编辑的回应，您最好使用可重用的 UserControl 来解决这个问题，该控件在 CustomClass 的属性上带有 DataBindings。这是我必须实现的目标：

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

用户控件内容

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

主窗口

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

在这里，您将用户控件保留在视图中，而不是将用户控件烘焙到您的数据中。将视图和数据分开总是好的。您甚至可以取消 Usercontrol 并直接在 DataTemplate 中使用两个 TextBox，但这取决于您是否要在其他地方重用该视图。