Binding ObservableCollection items to UserControl in WrapPanel?

Question

I may just be missing something obvious here, so I apologize if this is a really dumb question. I have a WrapPanel in a view that I need to bind to an ObservableCollection on the ViewModel. This ObservableCollection contains a different type of ViewModel that needs to be bound to another type of view when displayed in the WrapPanel. The goal is to create a wrappable list of items, each of which displays via an instance of a smaller view which should be added to the WrapPanel.

I am using MVVM, and the ViewModel does not have direct access to the View. I would rather not create a binding between the ViewModel and the View if at all possible, so manually adding items to the WrapPanel.Children collection is not a viable option. I am at a loss as to how I can bind a collection of child ViewModel objects to the WrapPanel in such a way that it will create instances of another view and add them to itself. Am I simply approaching the problem incorrectly? I figure there is probably a DataTemplate involved, but it doesn't appear that a WrapPanel has a DataTemplate, nor is it bindable.

Thanks for any insight.

It sounds to me like your have a situation where you have different viewmodels all in the same Collection. Each of those viewmodels have its own associated view. When you display these VMs in a container, you want each view to be wrapped one additional level? (Like a commond border around each seperate element?) — Pieter Breed, Oct 16 '09 at 07:05
The collection contains all the same type, in this case, ServiceMonitorViewModel. I just need to display them in a wrappable container in their parent View. — jrista, Oct 16 '09 at 08:31

Andrew Shepherd · Accepted Answer · 2009-10-16T01:32:04.317

20

What you need is a ListView that uses a WrapPanel to host all of the items.

<ListView ItemsSource={...}>
   <ListView.ItemsPanel>
     <ItemsPanelTemplate>
       <WrapPanel IsItemsHost="True" />
     </ItemsPanelTemplate>
   </ListView.ItemsPanel>
   <ListView.ItemTemplate>
      <DataTemplate>
        <!-- Fill in how you want each item to look here -->
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

edited Oct 16 '09 at 01:32

answered Oct 16 '09 at 01:21

Andrew Shepherd

44,254
30
139
205

Thanks for the insight Andrew. I've done this, and have encountered another problem. I'm hoping you can help with this one too, otherwise I'll start another question. I threw , my UserControl, in the DataTemplate. I'm getting the following error: Could not create an instance of type 'ServiceMonitorView'. The user control has zero code outside of the default, generated constructor...so there should not be any constructor code throwing an exception. – jrista Oct 16 '09 at 01:26
@jrista: I would say that that's a separate problem which belongs in an independent question. (I don't know the answer, but I'm interested in what it would be) – Andrew Shepherd Oct 16 '09 at 01:52

score 16 · Answer 2 · answered Oct 16 '09 at 01:17

Use an ItemsControl, and set its ItemsPanel to a WrapPanel:

<ItemsControl ItemsSource="{Binding Something}" ItemTemplate="{StaticResource YourDataTemplate}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
</ItemsControl>

Binding ObservableCollection items to UserControl in WrapPanel?

2 Answers2

Linked