wpf - Cómo preservar el estado de control dentro de los elementos de pestañas en un TabControl

mvvm binding

Question

Soy un recién llegado a WPF, intentando construir un proyecto que siga las recomendaciones del excelente artículo de Josh Smith que describe el patrón de diseño Model-View-ViewModel .

Usando el código de muestra de Josh como base, he creado una aplicación simple que contiene una cantidad de "espacios de trabajo", cada uno representado por una pestaña en un TabControl. En mi aplicación, un espacio de trabajo es un editor de documentos que permite manipular un documento jerárquico a través de un control TreeView.

Aunque he logrado abrir varios espacios de trabajo y ver el contenido de sus documentos en el control TreeView encuadernado, me parece que el TreeView "olvida" su estado al cambiar entre pestañas. Por ejemplo, si TreeView en Tab1 está parcialmente expandido, se mostrará como completamente colapsado después de cambiar a Tab2 y regresar a Tab1. Este comportamiento parece aplicarse a todos los aspectos del estado de control para todos los controles.

Después de algunos experimentos, me he dado cuenta de que puedo preservar el estado dentro de un TabItem vinculando explícitamente cada propiedad de estado de control a una propiedad dedicada en el ViewModel subyacente. Sin embargo, esto parece mucho trabajo adicional, cuando simplemente quiero que todos mis controles recuerden su estado al cambiar entre espacios de trabajo.

Supongo que me estoy perdiendo algo simple, pero no estoy seguro de dónde buscar la respuesta. Cualquier orientación sería muy apreciada.

Gracias, Tim

Actualizar:

Según lo solicitado, intentaré publicar algún código que demuestre este problema. Sin embargo, dado que los datos que subyacen a TreeView son complejos, publicaré un ejemplo simplificado que muestra los mismos símbolos. Aquí está el XAML desde la ventana principal:

<TabControl IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding Path=Docs}">
<TabControl.ItemTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Path=Name}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<view:DocumentView />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>

El XAML anterior se une correctamente a una ObservableCollection de DocumentViewModel, por lo que cada miembro se presenta a través de un DocumentView.

Por la simplicidad de este ejemplo, he eliminado TreeView (mencionado anteriormente) de DocumentView y lo reemplacé con un TabControl que contiene 3 pestañas fijas:

<TabControl>
<TabItem Header="A" />
<TabItem Header="B" />
<TabItem Header="C" />
</TabControl>

En este escenario, no hay ningún enlace entre DocumentView y DocumentViewModel. Cuando se ejecuta el código, el TabControl interno no puede recordar su selección cuando se cambia el TabControl externo.

Sin embargo, si unir explícitamente la propiedad InternalIndex de TabControl interno ...

<TabControl SelectedIndex="{Binding Path=SelectedDocumentIndex}">
<TabItem Header="A" />
<TabItem Header="B" />
<TabItem Header="C" />
</TabControl>

... a una propiedad ficticia correspondiente en DocumentViewModel ...

public int SelecteDocumentIndex { get; set; }

... la pestaña interior puede recordar su selección.

Entiendo que puedo resolver efectivamente mi problema aplicando esta técnica a cada propiedad visual de cada control, pero espero que haya una solución más elegante.

Answer 1

Basado en la respuesta de @ Arsen anterior, aquí hay otro comportamiento, que:

1. No necesita ninguna referencia adicional. (a menos que coloque el código en una biblioteca externa)
2. No usa una clase base.
3. Maneja los cambios Restablecer y Agregar colección.

Para usarlo

Declara el espacio de nombres en el xaml:

<ResourceDictionary
...
xmlns:behaviors="clr-namespace:My.Behaviors;assembly=My.Wpf.Assembly"
...
>

Actualiza el estilo:

<Style TargetType="TabControl" x:Key="TabControl">
...
<Setter Property="behaviors:TabControlBehavior.DoNotCacheControls" Value="True" />
...
</Style>

O actualice el TabControl directamente:

<TabControl behaviors:TabControlBehavior.DoNotCacheControls="True" ItemsSource="{Binding Tabs}" SelectedItem="{Binding SelectedTab}">

Y aquí está el código para el comportamiento:

using System.Collections;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Windows;
using System.Windows.Controls;
namespace My.Behaviors
{
/// <summary>
/// Wraps tab item contents in UserControl to prevent TabControl from re-using its content
/// </summary>
public class TabControlBehavior
{
private static readonly HashSet<TabControl> _tabControls = new HashSet<TabControl>();
private static readonly Dictionary<ItemCollection, TabControl> _tabControlItemCollections = new Dictionary<ItemCollection, TabControl>();
public static bool GetDoNotCacheControls(TabControl tabControl)
{
return (bool)tabControl.GetValue(DoNotCacheControlsProperty);
}
public static void SetDoNotCacheControls(TabControl tabControl, bool value)
{
tabControl.SetValue(DoNotCacheControlsProperty, value);
}
public static readonly DependencyProperty DoNotCacheControlsProperty = DependencyProperty.RegisterAttached(
"DoNotCacheControls",
typeof(bool),
typeof(TabControlBehavior),
new UIPropertyMetadata(false, OnDoNotCacheControlsChanged));
private static void OnDoNotCacheControlsChanged(
DependencyObject depObj,
DependencyPropertyChangedEventArgs e)
{
var tabControl = depObj as TabControl;
if (null == tabControl)
return;
if (e.NewValue is bool == false)
return;
if ((bool)e.NewValue)
Attach(tabControl);
else
Detach(tabControl);
}
private static void Attach(TabControl tabControl)
{
if (!_tabControls.Add(tabControl))
return;
_tabControlItemCollections.Add(tabControl.Items, tabControl);
((INotifyCollectionChanged)tabControl.Items).CollectionChanged += TabControlUcWrapperBehavior_CollectionChanged;
}
private static void Detach(TabControl tabControl)
{
if (!_tabControls.Remove(tabControl))
return;
_tabControlItemCollections.Remove(tabControl.Items);
((INotifyCollectionChanged)tabControl.Items).CollectionChanged -= TabControlUcWrapperBehavior_CollectionChanged;
}
private static void TabControlUcWrapperBehavior_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
var itemCollection = (ItemCollection)sender;
var tabControl = _tabControlItemCollections[itemCollection];
IList items;
if (e.Action == NotifyCollectionChangedAction.Reset)
{ /* our ObservableArray<T> swops out the whole collection */
items = (ItemCollection)sender;
}
else
{
if (e.Action != NotifyCollectionChangedAction.Add)
return;
items = e.NewItems;
}
foreach (var newItem in items)
{
var ti = tabControl.ItemContainerGenerator.ContainerFromItem(newItem) as TabItem;
if (ti != null)
{
var userControl = ti.Content as UserControl;
if (null == userControl)
ti.Content = new UserControl { Content = ti.Content };
}
}
}
}
}

Answer 2

He publicado una respuesta para una pregunta similar. En mi caso, al crear manualmente los TabItems he resuelto el problema de crear View una y otra vez. Verifique here

Answer 3

La aplicación de ejemplo Writer del WPF Application Framework (WAF) muestra cómo resolver su problema. Crea un nuevo UserControl para cada TabItem. Entonces, el estado se preserva cuando el usuario cambia la pestaña activa.

Answer 4

Tengo que resolverlo con este consejo WPF TabControl: Turning Off Tab Virtualization en http://www.codeproject.com/Articles/460989/WPF-TabControl-Turning-Off-Tab-Virtualization esta es una clase de TabContent con la propiedad IsCached.

Answer 5

Tuve el mismo problema y encontré una buena solución que puede usar como un TabControl normal en la medida en que lo probé. En caso de que sea importante para usted aquí, la licencia actual

Aquí el Código en caso de que el Enlace se caiga:

using System;
using System.Collections.Specialized;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
namespace CefSharp.Wpf.Example.Controls
{
/// <summary>
/// Extended TabControl which saves the displayed item so you don''t get the performance hit of
/// unloading and reloading the VisualTree when switching tabs
/// </summary>
/// <remarks>
/// Based on example from http://.com/a/9802346, which in turn is based on
/// http://www.pluralsight-training.net/community/blogs/eburke/archive/2009/04/30/keeping-the-wpf-tab-control-from-destroying-its-children.aspx
/// with some modifications so it reuses a TabItem''s ContentPresenter when doing drag/drop operations
/// </remarks>
[TemplatePart(Name = "PART_ItemsHolder", Type = typeof(Panel))]
public class NonReloadingTabControl : TabControl
{
private Panel itemsHolderPanel;
public NonReloadingTabControl()
{
// This is necessary so that we get the initial databound selected item
ItemContainerGenerator.StatusChanged += ItemContainerGeneratorStatusChanged;
}
/// <summary>
/// If containers are done, generate the selected item
/// </summary>
/// <param name="sender">The sender.</param>
/// <param name="e">The <see cref="EventArgs"/> instance containing the event data.</param>
private void ItemContainerGeneratorStatusChanged(object sender, EventArgs e)
{
if (ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
{
ItemContainerGenerator.StatusChanged -= ItemContainerGeneratorStatusChanged;
UpdateSelectedItem();
}
}
/// <summary>
/// Get the ItemsHolder and generate any children
/// </summary>
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
itemsHolderPanel = GetTemplateChild("PART_ItemsHolder") as Panel;
UpdateSelectedItem();
}
/// <summary>
/// When the items change we remove any generated panel children and add any new ones as necessary
/// </summary>
/// <param name="e">The <see cref="NotifyCollectionChangedEventArgs"/> instance containing the event data.</param>
protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e)
{
base.OnItemsChanged(e);
if (itemsHolderPanel == null)
return;
switch (e.Action)
{
case NotifyCollectionChangedAction.Reset:
itemsHolderPanel.Children.Clear();
break;
case NotifyCollectionChangedAction.Add:
case NotifyCollectionChangedAction.Remove:
if (e.OldItems != null)
{
foreach (var item in e.OldItems)
{
var cp = FindChildContentPresenter(item);
if (cp != null)
itemsHolderPanel.Children.Remove(cp);
}
}
// Don''t do anything with new items because we don''t want to
// create visuals that aren''t being shown
UpdateSelectedItem();
break;
case NotifyCollectionChangedAction.Replace:
throw new NotImplementedException("Replace not implemented yet");
}
}
protected override void OnSelectionChanged(SelectionChangedEventArgs e)
{
base.OnSelectionChanged(e);
UpdateSelectedItem();
}
private void UpdateSelectedItem()
{
if (itemsHolderPanel == null)
return;
// Generate a ContentPresenter if necessary
var item = GetSelectedTabItem();
if (item != null)
CreateChildContentPresenter(item);
// show the right child
foreach (ContentPresenter child in itemsHolderPanel.Children)
child.Visibility = ((child.Tag as TabItem).IsSelected) ? Visibility.Visible : Visibility.Collapsed;
}
private ContentPresenter CreateChildContentPresenter(object item)
{
if (item == null)
return null;
var cp = FindChildContentPresenter(item);
if (cp != null)
return cp;
var tabItem = item as TabItem;
cp = new ContentPresenter
{
Content = (tabItem != null) ? tabItem.Content : item,
ContentTemplate = this.SelectedContentTemplate,
ContentTemplateSelector = this.SelectedContentTemplateSelector,
ContentStringFormat = this.SelectedContentStringFormat,
Visibility = Visibility.Collapsed,
Tag = tabItem ?? (this.ItemContainerGenerator.ContainerFromItem(item))
};
itemsHolderPanel.Children.Add(cp);
return cp;
}
private ContentPresenter FindChildContentPresenter(object data)
{
if (data is TabItem)
data = (data as TabItem).Content;
if (data == null)
return null;
if (itemsHolderPanel == null)
return null;
foreach (ContentPresenter cp in itemsHolderPanel.Children)
{
if (cp.Content == data)
return cp;
}
return null;
}
protected TabItem GetSelectedTabItem()
{
var selectedItem = SelectedItem;
if (selectedItem == null)
return null;
var item = selectedItem as TabItem ?? ItemContainerGenerator.ContainerFromIndex(SelectedIndex) as TabItem;
return item;
}
}
}

Licencia en Copietime

// Copyright © 2010-2016 The CefSharp Authors
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
//
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
//
// * Neither the name of Google Inc. nor the name Chromium Embedded
// Framework nor the name CefSharp nor the names of its contributors
// may be used to endorse or promote products derived from this software
// without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Answer 6

Usando la idea de WAF llego a esta solución simple que parece resolver el problema.

Uso el comportamiento de interactividad, pero lo mismo se puede hacer con la propiedad adjunta si no se hace referencia a la biblioteca de interactividad

/// <summary>
/// Wraps tab item contents in UserControl to prevent TabControl from re-using its content
/// </summary>
public class TabControlUcWrapperBehavior
: Behavior<UIElement>
{
private TabControl AssociatedTabControl { get { return (TabControl) AssociatedObject; } }
protected override void OnAttached()
{
((INotifyCollectionChanged)AssociatedTabControl.Items).CollectionChanged += TabControlUcWrapperBehavior_CollectionChanged;
base.OnAttached();
}
protected override void OnDetaching()
{
((INotifyCollectionChanged)AssociatedTabControl.Items).CollectionChanged -= TabControlUcWrapperBehavior_CollectionChanged;
base.OnDetaching();
}
void TabControlUcWrapperBehavior_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
if (e.Action != NotifyCollectionChangedAction.Add)
return;
foreach (var newItem in e.NewItems)
{
var ti = AssociatedTabControl.ItemContainerGenerator.ContainerFromItem(newItem) as TabItem;
if (ti != null && !(ti.Content is UserControl))
ti.Content = new UserControl { Content = ti.Content };
}
}
}

Y uso

<TabControl ItemsSource="...">
<i:Interaction.Behaviors>
<controls:TabControlUcWrapperBehavior/>
</i:Interaction.Behaviors>
</TabControl>