¿Cómo crear contenido tabtable en WPF/C#?

Question

Tengo un TabControl en mi aplicación WPF. Quiero que mi aplicación sea básicamente compatible con varias "instancias" dentro del único programa. Por ejemplo, piense en los navegadores web, le permiten tener múltiples instancias de sitios web en diferentes pestañas, quiero lograr una funcionalidad similar donde mi aplicación contiene varias instancias de "subaplicaciones".

El problema al que me enfrento actualmente es que tengo que copiar y pegar el mismo XAML en cada pestaña, porque cada pestaña tiene exactamente el mismo marcado y la misma IU, pero datos diferentes. Otro problema es que necesito funcionalidad para crear dinámicamente esas pestañas.

Aquí hay una captura de pantalla de mi aplicación en su estado actual. Como puede ver, hay 2 pestañas en la parte superior y la segunda tiene fondo transparente, ya que está inactivo.

Entonces, ¿cómo puedo crear un sistema de tabuladores que puedan, en la interfaz de usuario de la pestaña sigue siendo el mismo para cada pestaña y yo sólo necesito desarrollar con una interfaz de usuario XAML y duplicados que para cada ficha?

Requisitos:

• Cada pestaña tiene la misma interfaz de usuario.
• Cada pestaña tiene datos diferentes para los elementos de la interfaz de usuario.
• Como desarrollador, quiero trabajar en el XAML de la pestaña una sola vez y directamente en Visual Studio.

Idealmente, me encantaría un simple proyecto de muestra/código donde hay un control de pestaña sin estilo y la aplicación al inicio crea dinámicamente 2 n pestañas que tienen la misma IU, pero con datos diferentes.

Answer 1

Como se señaló en otra respuesta Probablemente hay un montón de maneras de hacer esto, pero aquí es mi manera simple:

definir un DataTemplate que define el contenido de cada una de las pestañas idénticas. Los controles en la plantilla de datos se vincularán al modelo de vista de la pestaña seleccionada actualmente. He puesto un solo TextBlock en mi ejemplo, pero puedes ampliarlo fácilmente.

usar este Xaml:

<Page.DataContext> 
    <Samples:TabBindingViewModels /> 
</Page.DataContext> 

<Grid> 
    <Grid.Resources> 
     <DataTemplate x:Key="ContentTemplate" 
         DataType="{x:Type Samples:TabBindingViewModel}"> 
      <TextBlock Text="{Binding Content}"/> 
     </DataTemplate> 
    </Grid.Resources> 
    <TabControl ContentTemplate="{StaticResource ContentTemplate}" 
       DisplayMemberPath="Header" ItemsSource="{Binding Items}" /> 
</Grid> 

y este código vista del modelo:

public class TabBindingViewModels 
{ 
    public TabBindingViewModels() 
    { 
     Items = new ObservableCollection<TabBindingViewModel> 
        { 
         new TabBindingViewModel(1), 
         new TabBindingViewModel(2), 
         new TabBindingViewModel(3), 
        }; 
    } 

    public IEnumerable<TabBindingViewModel> Items { get; private set; } 
} 

public class TabBindingViewModel 
{ 
    public TabBindingViewModel() : this(0) 
    { 
    } 

    public TabBindingViewModel(int n) 
    { 
     Header = "I'm the header: " + n.ToString(CultureInfo.InvariantCulture); 
     Content = "I'm the content: " + n.ToString(CultureInfo.InvariantCulture); 
    } 

    public string Header { get; set; } 
    public string Content { get; set; } 
} 

obtenemos:

me gusta bastante este tutorial en el estilo del control de ficha . Puede colocar fácilmente contenido más complejo en los encabezados de las pestañas, así como en el contenido.

Debe examinar la plantilla completa del control de pestañas para obtener una idea de cómo funciona. Use Blend o VS11 beta para extraer la plantilla.

Para agregar/eliminar pestañas dinámicamente, ahora todo lo que necesita hacer es agregar/eliminar elementos a los modelos ObservableCollection of view.

Answer 2

Esto podría convertirse en una respuesta bastante grande porque hay muchos caminos diferentes que puede tomar.

Es importante comprender que un TabControl es un ItemsControl, lo que significa que puede contener una colección de objetos, como los UserControls que componen cada módulo. Como tal, puede comenzar vinculando la propiedad Items a ObservableCollection{T} de algunos objetos UserControl que viven dentro de algún proyecto de módulo que implementa una interfaz como IModule de Prism. La interfaz define el punto de partida de cualquier módulo que pueda cargarse dentro de una pestaña. A medida que se soliciten módulos, simplemente cargue el ensamblaje y agregue una pestaña que contenga una referencia a la región definida en el módulo.

De hecho, no es muy difícil, pero le recomiendo que lea en Prism, ya que se encargará de muchos de los trabajos pesados ​​para usted. Recientemente he creado una interfaz exactamente igual a la que describes usando Prism.

Answer 3

Eche un vistazo a Caliburn.Micro para una solución basada en el marco MVVM. La pregunta exacta que está haciendo se resuelve en una de las soluciones de muestra.

http://caliburnmicro.codeplex.com/

Answer 4

Sin más información, mi enfoque sería la puesta en servicio de un proveedor de MVVM en el interior de un ApplicationDomain para cada instancia o pestaña. Cuando matas/cierras la pestaña, descargas el dominio de la aplicación.