ItemsControl与Viewmodel的多个DataTemplates [英] ItemsControl with multiple DataTemplates for a viewmodel

问题描述

是否可以将items控件与canvas作为模板绑定到多个DataTemplates？

is it possible to bind an itemscontrol with canvas as template to multiple DataTemplates?

我有2个集合，具体取决于我想显示不同控件的类型在我的画布上。

I have 2 collections and depending on the type I would like to display a different control on my canvas.

我不确定，但我可以考虑一个具有2个ObservableCollections的Viewmodel。例如，如果我有形状和连接，我想在画布上显示它们？如果是一个图表场景...

I am not sure but I could think about a Viewmodel which has 2 ObservableCollections. For example if I would have "Shapes" and "connections" and I would like to display them both on the canvas? In case of a diagraming scenario...

我想以mvvm方式执行此操作，我不知道多个DataTemplate方法是否正确，但是我脑海。
但是我仍然有问题要把我的头绑在一起。如果我将DataContext设置为ViewModel，似乎无法将2个集合绑定到项目控件... =（
我也可以为其他创意开放....

I would like to do this in the mvvm manner and I am not sure if the multiple DataTemplate approach is correct but this came to my mind. But I am still having problems to get the binding straight in my head. If I set the DataContext to the ViewModel for me it seems not possible to bind 2 collections to the items control... =( I am also open for other ideas, too....

这可能吗？如果是这样，绑定如何看起来像一个

Is this possible? And if so, how would the binding look like an

推荐答案

你可以创建多个 ObservableCollections ，然后将您的 ItemsSource 绑定到 CompositeCollection 加入这些集合。

You can create multiple ObservableCollections and then bind your ItemsSource to a CompositeCollection which joins those collections.

然后在您的XAML中，您可以使用 DataType 属性为各种类型创建不同的 DataTemplates 如果它被放置在资源中，则样式将自动应用（您还可以在MSDN中显示的XAML中创建复合，如果 CollectionContainers 应该被绑定一点点很难，但是）

Then in your XAML you can create different DataTemplates for the respective types using the DataType property which like styles gets automatically applied if it is placed in the resources. (You can also create the composite in XAML which is shown on MSDN, if the CollectionContainers should be bound that is a bit more difficult though)

示例代码：

ObservableCollection<Employee> data1 = new ObservableCollection<Employee>(new Employee[]
{
    new Employee("Hans", "Programmer"),
    new Employee("Elister", "Programmer"),
    new Employee("Steve", "GUI Designer"),
    new Employee("Stefan", "GUI Designer"),
    new Employee("Joe", "Coffee Getter"),
    new Employee("Julien", "Programmer"),
});
ObservableCollection<Machine> data2 = new ObservableCollection<Machine>(new Machine[]
{
    new Machine("E12", "GreedCorp"),
    new Machine("E11", "GreedCorp"),
    new Machine("F1-MII", "CommerceComp"),
    new Machine("F2-E5", "CommerceComp")
});
CompositeCollection coll = new CompositeCollection();
coll.Add(new CollectionContainer() { Collection = data1 });
coll.Add(new CollectionContainer() { Collection = data2 });
Data = coll;

<ItemsControl ItemsSource="{Binding Data}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type local:Employee}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text=" ("/>
                <TextBlock Text="{Binding Occupation}"/>
                <TextBlock Text=")"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:Machine}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Model}"/>
                <TextBlock Text=" - "/>
                <TextBlock Text="{Binding Manufacturer}"/>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.Resources>
</ItemsControl>

这里我使用不同的面板，但对于画布应该是一样的。

Here i use a different panel but it should be the same for a canvas.

这篇关于ItemsControl与Viewmodel的多个DataTemplates的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！