使用（Items？）控件通过MVVM管理UserControl的集合

Question

Question:

Is there a way to achieve what I'm looking for; to simply add a collection of views (UserControls) to a control whilst having a consistent MVVM structure? Is an ItemsControl the way to go, or should be have a different approach?

Problem

I have a collection of MVVM projects (with usercontrol mainviews) that I want to present in another control that can animate transitions between them. I have a horizontal listbox across the top of the control functioning as 'tabs' which are bound to the collection of views. The main body of the control shows a single view bound to the selected item of the list box and animates transitions when a new tab is selected.

My concern is having the collection of views as part of the new control's viewmodel doesn't make much sense in the MVVM paradigm and it would be more usable if the usercontrols could simply by added straight into the control almost as if it was a panel. This would lead me to think something like ItemsControl is the way to go and could be used like this:

<CustomItemsControl>
    <UserControl1>
    <UserControl2>
    <UserControl3>
    <UserControl4>
</CustomItemsControl>

Then have content that looked something like this.

<ItemsControl.Template>

<StackPanel>
    <ListBox x:Name="Tabs" Height="35" SelectedIndex="0"
        ItemsSource= >> The binding for the ItemsControls Collection <<
        SelectionChanged="Tabs_TabSelected">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="1" 
                             Columns= >> Binding to Collection.Count <<
                />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

    <TransitionCtrl Name="TransitionControl" CurrentView="{Binding SelectedItem, ElementName=Tabs}" />

</StackPanel>

</ItemsControl.Template>

From the examples I've looked at the ItemsControl isn't intended to be used in this way. Any suggestions to point me in the direction of what I'm trying to achieve?

Answer 1

You should be using PRISM view injection technique. The best approach would be using TabControl as a region and inject the main view when each module loaded. Since tab is not built as a region, you may need a custom region adapter as explained here .

<TabControl Grid.Row=”1″ Grid.Column=”1″
        cal:RegionManager.RegionName=”TabRegion” Name=”TabRegion”>

From every module,

public void Initialize()
{
    regionManager
        .AddToRegion(“TabRegion”, new FirstView())
        .AddToRegion(“TabRegion”, new SecondView());
}