wpf - ¿Cómo puedo vincular un TabControl a una colección de ViewModels?

mvvm tabitem

Question

Básicamente tengo en mi MainViewModel.cs:

ObservableCollection<TabItem> MyTabs { get; private set; }

Sin embargo, tengo que ser capaz de no solo crear las pestañas, sino también tener el contenido de pestañas cargado y vinculado a sus modelos de vista apropiados mientras mantengo MVVM.

Básicamente, ¿cómo puedo obtener un control de usuario para cargar como el contenido de un tabitem y tener ese control de usuario conectado a un modelo de vista apropiado? La parte que hace esto difícil es que ViewModel no debe construir los elementos de la vista real, ¿verdad? O puede?

Básicamente, ¿esto sería MVVM apropiado?

UserControl address = new AddressControl();
NotificationObject vm = new AddressViewModel();
address.DataContext = vm;
MyTabs[0] = new TabItem()
{
    Content = address;
}

Solo pregunto porque, bueno, estoy construyendo una View (AddressControl) desde dentro de ViewModel, lo que para mí suena como un MVVM no-no.

Answer 1

En Prism, generalmente haces que la pestaña controle una región para que no tengas que tomar el control de la colección de páginas de pestañas atadas.

<TabControl 
    x:Name="MainRegionHost"
    Regions:RegionManager.RegionName="MainRegion" 
    />

Ahora las vistas se pueden agregar registrándose en la región MainRegion:

RegionManager.RegisterViewWithRegion( "MainRegion", 
    ( ) => Container.Resolve<IMyViewModel>( ).View );

Y aquí puedes ver una especialidad de Prism. La Vista es instanciada por ViewModel. En mi caso, resuelvo ViewModel a través de un contenedor de inversión de control (por ejemplo, Unity o MEF). El ViewModel obtiene la Vista inyectada a través de la inyección del constructor y se establece como el contexto de datos de la Vista.

La alternativa es registrar el tipo de vista en el controlador de región:

RegionManager.RegisterViewWithRegion( "MainRegion", typeof( MyView ) );

El uso de este enfoque le permite crear las vistas más tarde durante el tiempo de ejecución, por ejemplo, mediante un controlador:

IRegion region = this._regionManager.Regions["MainRegion"];

object mainView = region.GetView( MainViewName );
if ( mainView == null )
{
    var view = _container.ResolveSessionRelatedView<MainView>( );
    region.Add( view, MainViewName );
}

Como ha registrado el tipo de Vista, la vista se coloca en la región correcta.

Answer 2

Esto no es MVVM. No debería crear elementos UI en su modelo de vista.

Debería vincular ItemsSource de la pestaña a su ObservableCollection, y eso debería contener modelos con información sobre las pestañas que deberían crearse.

Aquí están la VM y el modelo que representa una página de pestañas:

public sealed class ViewModel
{
    public ObservableCollection<TabItem> Tabs {get;set;}
    public ViewModel()
    {
        Tabs = new ObservableCollection<TabItem>();
        Tabs.Add(new TabItem { Header = "One", Content = "One''s content" });
        Tabs.Add(new TabItem { Header = "Two", Content = "Two''s content" });
    }
}
public sealed class TabItem
{
    public string Header { get; set; }
    public string Content { get; set; }
}

Y así es como se ven los enlaces en la ventana:

<Window x:Class="WpfApplication12.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <ViewModel
            xmlns="clr-namespace:WpfApplication12" />
    </Window.DataContext>
    <TabControl
        ItemsSource="{Binding Tabs}">
        <TabControl.ItemTemplate>
            <!-- this is the header template-->
            <DataTemplate>
                <TextBlock
                    Text="{Binding Header}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <!-- this is the body of the TabItem template-->
            <DataTemplate>
                <TextBlock
                    Text="{Binding Content}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Window>

^{(Tenga en cuenta que si desea elementos diferentes en pestañas diferentes, use DataTemplates . O bien el modelo de vista de cada pestaña debe ser de su propia clase, o cree un DataTemplateSelector personalizado para elegir la plantilla correcta).}

Oh, mira, un UserControl dentro de la plantilla de datos:

<TabControl
    ItemsSource="{Binding Tabs}">
    <TabControl.ItemTemplate>
        <!-- this is the header template-->
        <DataTemplate>
            <TextBlock
                Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <!-- this is the body of the TabItem template-->
        <DataTemplate>
            <MyUserControl xmlns="clr-namespace:WpfApplication12" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

Answer 3

Tengo un convertidor para desacoplar la interfaz de usuario y ViewModel, ese es el punto a continuación:

<TabControl.ContentTemplate>
    <DataTemplate>
        <ContentPresenter Content="{Binding Tab,Converter={StaticResource TabItemConverter}"/>
    </DataTemplate>
</TabControl.ContentTemplate>

La pestaña es una enumeración en mi TabItemViewModel y el TabItemConverter la convierte a la IU real.

En TabItemConverter, solo obtenga el valor y Devuelva el control de usuario que necesita.