具有多个 DataTemplates 的 ItemsControl 用于视图模型 [英] ItemsControl with multiple DataTemplates for a viewmodel

问题描述

是否可以将一个以画布为模板的项目控件绑定到多个数据模板?

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.

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