Best Control to add Multiple UserControl in WPF MVVM?

Question

I have a MainWindow in which i want to add my others Views. Users can open Mutliple number of different Views to the MainWindow.

So for adding all those Views(UserControls), which is the best control to use.

Current I am using Canvas, but its not supporting MVVM.

So how can i add multiple control.

This is what i have done till now

Note: The control should host multiple UserControl by the same time i should be able to drag One UserControl here and there in that control and then on a click on UserControl should bring it to Front(Focused), which i did in Canvas using ZIndex.

Answer 1

Proper MVVM solution migh be to use ItemsControl class and bind collection of view-models as an ItemsSource.

In DataTemplate of that ItemsControl, I would specify proper view for child view-models (sort of tool-window in your case).

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <views:ToolWindow DataContext={Binding} />
    </DataTemplate>
</ItemsControl.ItemTemplate>

To achieve window-like behavior as on your picture I would specify custom panel based on Canvas which would allow drag and drop behavior.

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <panels:MyCustomMdiPanel />
    </ItemsPanelTemplate>
<ItemsControl.ItemsPanel>

I suppose that you have already working canvas solution.