wpf - Diferentes vistas/controles de usuario en cada pestaña de un TabControl

mvvm

Question

Intento escribir un programa que use pestañas para contener diferentes controles de usuario. Lo que actualmente quiero que suceda es que el usuario haga clic en un botón de búsqueda, se crea una nueva pestaña y aparece una pantalla de búsqueda en su interior. Usando la pantalla de búsqueda, el usuario puede seleccionar clientes y estos se abren en sus propias pestañas nuevas, lo que permite al usuario editarlas. Entonces, si el usuario entra y selecciona tres clientes, la pantalla tendrá cuatro pestañas, una para la pantalla de búsqueda y tres pestañas para el cliente. También deberá cerrar la pestaña cuando el usuario haga clic en un botón de salida en el control de usuario en esa pestaña.

Mi problema es que no estoy seguro de cómo configurar esto en mi programa. Creé un TabControl y vinculé el ItemsSource a una colección de modelos de vista (que puedo agregar cada vez que un usuario agrega una nueva pantalla). Puedo usar un DataTemplateSelector para seleccionar la DataTemplate que contiene la vista correcta, pero no sé cómo configurar el recurso de la vista para mi viewmodel.

Estoy haciendo esto en WPF y actualmente estoy usando Bxf para poner mis viewmodels en las vistas, y esto normalmente funciona, pero no estoy seguro de cómo encaja con el TabControl.

Intento mantenerme en MVVM, por lo que no aparece una lista de vistas en mi modelo de vista.

¿Alguien ha hecho algo similar a esto antes?

Answer 1

Haría que mi ViewModel principal se vea así:

• ObservableCollection<ViewModelBase> OpenTabs
• ICommand AddTabCommand
• ICommand CloseTabCommand

En el Constructor, se crea un nuevo SearchViewModel y se agrega a OpenTabs , y su método de Search se conecta a algún método en MainViewModel

El método en MainViewModel que maneja el comando de búsqueda crearía un nuevo CloseCommand con el cliente especificado, configuraría CloseCommand y luego lo agregaría a OpenTabs

var vm = new CustomerViewModel(customer);
vm.CloseCommand = this.CloseTabCommand;
OpenTabs.Add(vm);

También puede usar un sistema de eventos como EventAggregator de PRISM o Messenger de Galasoft para pasar eventos AddTab / CloseTab en lugar de conectar los comandos del MainViewModel

Y, por supuesto, usaría DataTemplates para definir cómo se OpenTab cada objeto OpenTab en la Vista

<TabControl ItemsSource="{Binding OpenTabs}">
    <TabControl.Resources>
        <DataTemplate DataType="{x:Type local:SearchViewModel}">
            <local:SearchView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:CustomerViewModel}">
            <local:CustomerView />
        </DataTemplate>
    </TabControl.Resources>
</TabControl>

Answer 2

Acabo de responder mi propia pregunta.

Las pestañas que se crean dinámicamente se configuran con un contexto de datos del elemento individual de la propiedad de elemento de elemento tabcontrols, en este caso uno de mis modelos de vista.

La plantilla de datos que utilicé correctamente recoge la vista correcta para el tipo de modelo de vista y lo muestra.

Sin embargo, mi vista configuró el contexto de datos de la grilla en la vista de mi recurso y, por lo tanto, no apareció nada. Cambié esto para usar el contexto de datos en lugar del recurso y ahora todo está funcionando.

Así que mi principal problema fue que mis vistas se quedaran sin recursos y no con el contexto de datos. Todavía preferiría usar recursos, pero a medida que funcione el contexto de datos tendré que ir con eso.