logo标签列表

阻止TabControl重新创建其子控件。

c#wpfmvvmdatatemplatetabcontrol
47
我有一个视图模型的 IList，它绑定到一个 TabControl。这个 IList 在 TabControl 的生命周期内不会改变。
<TabControl ItemsSource="{Binding Tabs}" SelectedIndex="0" >
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="Content" Value="{Binding}" />
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

每个视图模型都有一个在ResourceDictionary中指定的DataTemplate。
<DataTemplate TargetType={x:Type vm:MyViewModel}>
    <v:MyView/>
</DataTemplate>

在DataTemplate中指定的每个视图都需要耗费大量资源来创建，因此我宁愿只创建每个视图一次，但是当我切换选项卡时，相关视图的构造函数会被调用。根据我所了解的，这是TabControl的预期行为，但我不清楚调用构造函数的机制是什么。

我已经查看了一个类似的问题，使用UserControl，但那里提供的解决方案需要我绑定到视图，这是不可取的。

1
@Silvermind 在你提到之前我还没有注意到，但它没有影响。由于选项卡是一个不会通知PropertyChanged的IList，所以我认为这实际上已经是这种情况了。 - Mike
1
你可以写自己的派生TabControl，在其中重新定义ItemsSource属性。我为Silverlight创建了这样的控件 http：//vortexwolf.wordpress.com/2011/04/09/silverlight-tabcontrol-with-data-binding/，因此我认为您可以为WPF编写类似的控件。这个想法是使用仅会被创建一次的“Items”属性。 - vortexwolf
@vorrtex 这是一个很有前途的建议。我会告诉你它的进展如何。 - Mike
这里有一个非常简单的解决方案（在类似的帖子中发布） - jsm
这是我非常简单的解决方案（发布在类似的帖子中） - jsm
显示剩余5条评论
5个回答
57

默认情况下，TabControl 共享一个面板来渲染其内容。为了实现您想要的效果（以及许多其他WPF开发人员），您需要像这样扩展 TabControl：

TabControlEx.cs

[TemplatePart(Name = "PART_ItemsHolder", Type = typeof(Panel))]
public class TabControlEx : TabControl
{
    private Panel ItemsHolderPanel = null;

    public TabControlEx()
        : base()
    {
        // This is necessary so that we get the initial databound selected item
        ItemContainerGenerator.StatusChanged += ItemContainerGenerator_StatusChanged;
    }

    /// <summary>
    /// If containers are done, generate the selected item
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void ItemContainerGenerator_StatusChanged(object sender, EventArgs e)
    {
        if (this.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
        {
            this.ItemContainerGenerator.StatusChanged -= ItemContainerGenerator_StatusChanged;
            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"></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)
                    {
                        ContentPresenter 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
        TabItem 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;

        ContentPresenter cp = FindChildContentPresenter(item);

        if (cp != null)
            return cp;

        // the actual child to be added.  cp.Tag is a reference to the TabItem
        cp = new ContentPresenter();
        cp.Content = (item is TabItem) ? (item as TabItem).Content : item;
        cp.ContentTemplate = this.SelectedContentTemplate;
        cp.ContentTemplateSelector = this.SelectedContentTemplateSelector;
        cp.ContentStringFormat = this.SelectedContentStringFormat;
        cp.Visibility = Visibility.Collapsed;
        cp.Tag = (item is TabItem) ? item : (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()
    {
        object selectedItem = base.SelectedItem;
        if (selectedItem == null)
            return null;

        TabItem item = selectedItem as TabItem;
        if (item == null)
            item = base.ItemContainerGenerator.ContainerFromIndex(base.SelectedIndex) as TabItem;

        return item;
    }
}

XAML

<Style TargetType="{x:Type controls:TabControlEx}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid Background="{TemplateBinding Background}" ClipToBounds="True" KeyboardNavigation.TabNavigation="Local" SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="ColumnDefinition0" />
                        <ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="RowDefinition0" Height="Auto" />
                        <RowDefinition x:Name="RowDefinition1" Height="*" />
                    </Grid.RowDefinitions>
                    <DockPanel Margin="2,2,0,0" LastChildFill="False">
                        <TabPanel x:Name="HeaderPanel" Margin="0,0,0,-1" VerticalAlignment="Bottom" Panel.ZIndex="1" DockPanel.Dock="Right"
                                  IsItemsHost="True" KeyboardNavigation.TabIndex="1" />
                    </DockPanel>
                    <Border x:Name="ContentPanel" Grid.Row="1" Grid.Column="0"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                        <Grid x:Name="PART_ItemsHolder" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

注意: 这个解决方案不是我想出来的。它已经在编程论坛上分享了几年，我相信现在它已经成为那些WPF食谱书籍中的一部分了。我认为最古老或最初的来源是PluralSight .NET博客文章和这个StackOverflow上的答案。

希望对你有所帮助，

5
我曾经遇到过这个问题，但我从未找到它附带的“ControlTemplate”，这是使它正常工作所必需的。谢谢！ - Mike
我已经添加了一个额外的答案，旨在支持此答案中提供的信息。 - Contango
2
非常好。我正在尝试在VS2017，.NET 4.6.1中进行此操作，并且我必须将DockPanel模板移动到Border之后，以便它位于顶部并隐藏所选选项卡标题下面的顶部线。我还能够删除Tabpanel上的边距；使用默认的TabPanel样式，我已经通过一个像素/单位/任何东西向下扩展了所选项目。 - 15ee8f99-57ff-4f92-890c-b56153
从代码后台更新放置在选项卡项内的数据网格的滚动条是否可行？例如 dataGrid.ScrollIntoView(log)？目前布局已缓存，但UI更改的代码后台处理程序无法工作。 - Ankush Madankar
1
谢谢，这对我很有帮助。一个改进：在OnItemsChanged中，将UpdateSelectedItem()移出switch语句。我遇到了一个问题，初始选定的选项卡为空，因为TabControl的ItemsSource绑定更新了几次，触发了NotifyCollectionChangedAction.Reset。OnSelectionChanged没有触发，所以当选定一个选项卡时，_itemsHolderPanel被清除了。在每次OnItemsChanged之后强制执行UpdateSelectedItem可以解决这个问题。 - Coder14
显示剩余3条评论
15
< p > Dennis的答案非常出色，对我非常有效。但是，在他的帖子中提到的原始文章现在已经丢失了，因此他的答案需要更多信息才能直接使用。< /p > < p > 这个答案是从MVVM的角度给出的，并在VS 2013下进行了测试。< /p > < p > 首先，一些背景知识。Dennis的第一个答案的工作方式是隐藏并显示选项卡内容，而不是每次用户切换选项卡时销毁和重新创建所述选项卡内容。< /p > < p > 这具有以下优点：

  • 编辑框的内容在切换选项卡时不会消失。
  • 如果您在选项卡中使用树视图，则它在选项卡更改时不会折叠。
  • 任何网格的当前选择在选项卡切换之间保留。
  • 此代码更符合MVVM编程风格。
  • 我们不必编写代码来保存和加载选项卡之间的设置。
  • 如果您正在使用第三方控件（如Telerik或DevExpress），则像网格布局这样的设置在选项卡切换之间保留。
  • 大大提高了性能-选项卡切换几乎是即时的，因为我们不是在每次选项卡更改时重新绘制所有内容。

TabControlEx.cs< /p >

// Copy C# code from @Dennis's answer, and add the following property after the 
// opening "<Style" tag (this sets the key for the style):
// x:Key="TabControlExStyle"
// Ensure that the namespace for this class is the same as your DataContext.

这个和DataContext指向的类属于同一类。

XAML

// Copy XAML from @Dennis's answer.

这是一个样式，它放在XAML文件的头部。这种样式永远不会改变，并被所有选项卡控件引用。

原始选项卡

你的原始选项卡可能看起来像这样。如果你切换标签，你会注意到编辑框的内容会消失，因为选项卡的内容正在被删除并重新创建。

<TabControl
  behaviours:TabControlBehaviour.DoSetSelectedTab="True"
  IsSynchronizedWithCurrentItem="True">
<TabItem Header="Tab 1">
  <TextBox>Hello</TextBox>
</TabItem>
<TabItem Header="Tab 2" >
  <TextBox>Hello 2</TextBox>
</TabItem>

自定义选项卡

使用我们的新自定义C#类更改选项卡，并使用 Style 标签将其指向我们的新自定义样式：

<sdm:TabControlEx
  behaviours:TabControlBehaviour.DoSetSelectedTab="True"
  IsSynchronizedWithCurrentItem="True"
  Style="{StaticResource TabControlExStyle}">
<TabItem Header="Tab 1">
  <TextBox>Hello</TextBox>
</TabItem>
<TabItem Header="Tab 2" >
  <TextBox>Hello 2</TextBox>
</TabItem>

现在，当你切换标签时，你会发现编辑框的内容被保留了下来，这证明一切都运行良好。

更新

这个解决方案非常有效。然而，有一种更模块化和MVVM友好的方法可以实现相同的结果，它使用了一个附加的行为。请参见Code Project: WPF TabControl: Turning Off Tab Virtualization。我已经将其作为额外的答案添加进来。

更新

如果你正在使用DevExpress，你可以使用CacheAllTabs选项来达到相同的效果（这将关闭选项卡虚拟化）：

<dx:DXTabControl TabContentCacheMode="CacheAllTabs">
    <dx:DXTabItem Header="Tab 1" >
        <TextBox>Hello</TextBox>
    </dx:DXTabItem>
    <dx:DXTabItem Header="Tab 2">
        <TextBox>Hello 2</TextBox>
    </dx:DXTabItem>
</dx:DXTabControl>

声明一下，我与DevExpress没有关联，我相信Telerik也有类似的功能。

更新

Telerik确实有相应的功能：IsContentPreserved。感谢下方评论区的@Luishg。

1
干得好，@contango。谢谢你的分享。我已经有将近18个月没有写过WPF了。 - Dennis
@Dennis 再次感谢您的出色帖子，它非常干净地解决了问题。 - Contango
3
由于使用了DependencyPropertyDescriptor.AddValueChanged，CodeProject中的实现存在大量内存泄漏。可以删除该行代码而不会破坏任何功能，除了一些显然体现在代码中的安全检查。 - zmechanic
1
谢谢。由于我正在使用DevExpress，这个解决方案非常好用且简单。 - JJ_Coder4Hire
1
Telerik 的等效选项是：IsContentPreserved。 - Luishg
1
@Luishg 很好，感谢您的更新！我已经更新了我的答案。 - Contango
6
这个已有的解决方案由@Dennis（附加注释由@Gravitas）提供，非常有效。
然而，还有另一种更模块化和MVVM友好的解决方案，它使用了附加行为来实现相同的结果。
请参见Code Project: WPF TabControl: Turning Off Tab Virtualization。由于作者是路透社的技术领导，所以代码可能很可靠。
演示代码真的做得很好，它展示了一个常规的TabControl和一个带有附加行为的TabControl。 enter image description here
5
CodeProject上的实现（答案中的链接）由于使用了DependencyPropertyDescriptor.AddValueChanged而导致内存泄漏严重。可以删除那行代码而不破坏任何功能，除了一些明显从代码中看出来的安全检查。 - zmechanic
似乎无法处理简单情况，例如<TabControl ikriv:TabContent.IsCached="True"><TabItem Header="Tab1"></TabItem></TabControl>。错误：“在将指定的子项从当前父 Visual 断开并连接到新父 Visual 之前，必须先断开连接”。 - Vimes
0

有一个不是很明显但优雅的解决方案。主要思路是通过自定义转换器手动为TabItem的Content属性生成VisualTree。

定义一些资源。

<Window.Resources>
    <converters:ContentGeneratorConverter x:Key="ContentGeneratorConverter"/>

    <DataTemplate x:Key="ItemDataTemplate">
        <StackPanel>
            <TextBox Text="Try to change this text and choose another tab"/>
            <TextBlock Text="{Binding}"/>
        </StackPanel>
    </DataTemplate>

    <markup:Set x:Key="Items">
        <system:String>Red</system:String>
        <system:String>Green</system:String>
        <system:String>Blue</system:String>
    </markup:Set>
</Window.Resources>

在哪里

public class ContentGeneratorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var control = new ContentControl {ContentTemplate = (DataTemplate) parameter};
        control.SetBinding(ContentControl.ContentProperty, new Binding());
        return control;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) =>
        throw new NotImplementedException();
}

而 Set 就是像这样的东西

public class Set : List<object> { }

然后，不再使用ContentTemplate属性的传统方法

    <TabControl
        ItemsSource="{StaticResource Items}"
        ContentTemplate="{StaticResource ItemDataTemplate}">
    </TabControl>

我们应该按照以下方式指定ItemContainerStyle。
    <TabControl
        ItemsSource="{StaticResource Items}">
        <TabControl.ItemContainerStyle>
            <Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
                <Setter Property="Content" Value="{Binding Converter={StaticResource ContentGeneratorConverter}, ConverterParameter={StaticResource ItemDataTemplate}}"/>
            </Style>
        </TabControl.ItemContainerStyle>
    </TabControl>

现在，尝试比较这两种变体，看看在选项卡切换期间的 ItemDataTemplate 的 TextBox 行为差异。

0

@Dennis的回答对我很有帮助。

唯一的小“问题”是Windows Automation在实现自动化UI测试时无法与TabControlEx配合使用。 症状将是AutomationElement.FindFirst(TreeScope, Condition) Method始终返回null

为了解决这个问题，我会添加

public class TabControlEx : TabControl
{
// Dennis' version here
...
    public Panel ItemsHolderPanel => _itemsHolderPanel;
    protected override AutomationPeer OnCreateAutomationPeer()
    {
        return new TabControlExAutomationPeer(this);
    }
}

随着这些新的类型的添加：

public class TabControlExAutomationPeer : TabControlAutomationPeer
{
    public TabControlExAutomationPeer(TabControlEx owner) : base(owner)
    {
    }
    protected override ItemAutomationPeer CreateItemAutomationPeer(object item)
    {
        return new TabItemExAutomationPeer(item, this);
    }
}

public class TabItemExAutomationPeer : TabItemAutomationPeer
{
    public TabItemExAutomationPeer(object owner, TabControlExAutomationPeer tabControlExAutomationPeer) 
        : base(owner, tabControlExAutomationPeer)
    {
    }
    
    protected override List<AutomationPeer> GetChildrenCore()
    {
        var headerChildren = base.GetChildrenCore();

        if (ItemsControlAutomationPeer.Owner is TabControlEx parentTabControl)
        {
            var contentHost = parentTabControl.ItemsHolderPanel;
            if (contentHost != null)
            {
                AutomationPeer contentHostPeer = new FrameworkElementAutomationPeer(contentHost);
                var contentChildren = contentHostPeer.GetChildren();
                if (contentChildren != null)
                {
                    if (headerChildren == null)
                        headerChildren = contentChildren;
                    else
                        headerChildren.AddRange(contentChildren);
                }
            }
        }


        return headerChildren;
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接