ItemsControl with multiple DataTemplates for a viewmodel

by

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

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)

Example code:

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.

More Related Contents:

  1. INotifyPropertyChanged vs. DependencyProperty in ViewModel
  2. Pushing read-only GUI properties back into ViewModel
  3. How to correctly bind to a dependency property of a usercontrol in a MVVM framework
  4. How to add validation to view model properties or how to implement INotifyDataErrorInfo
  5. WPF Grid as ItemsPanel for a list dynamically bound to an ItemsControl
  6. WPF MVVM INotifyPropertyChanged Implementation – Model or ViewModel
  7. How to bind a command in WPF to a double click event handler of a control?
  8. Does WPF databinding marshall changes to the UI Thread?
  9. Weird problem where Button does not get re-enabled unless the mouse is clicked
  10. Binding [VisualStateManager] view state to a MVVM viewmodel?
  11. How can I tell my DataTemplate to bind to a property in the PARENT ViewModel?
  12. Difference between SelectedItem, SelectedValue and SelectedValuePath
  13. How to bind RadioButtons to an enum?
  14. Binding a WPF ComboBox to a custom list
  15. How do you bind a CollectionContainer to a collection in a view model?
  16. What is DataContext for?
  17. Open File Dialog MVVM
  18. Should a user control have its own view model?
  19. WPF MVVM TreeView SelectedItem
  20. How do I convert a Color to a Brush in XAML?
  21. VirtualizingStackPanel + MVVM + multiple selection
  22. How to format number of decimal places in wpf using style/template?
  23. WPF Animation “Cannot freeze this Storyboard timeline tree for use across threads”
  24. Is Josh Smith’s implementation of the RelayCommand flawed?
  25. Binding in WPF to element of array specified by property
  26. Prism Custom Confirmation Interaction
  27. MVVM and the TextBox’s SelectedText property
  28. WPF Context menu on left click
  29. WPF MenuItem.Command binding to ElementName results to System.Windows.Data Error: 4 : Cannot find source for binding with reference
  30. MenuItem style with icon creates only one icon

Leave a Comment