停止TabControl重新创建其子项

Question

我有一个IList绑定到a的viewmodels TabControl.这IList不会改变整个生命周期TabControl.

<TabControl ItemsSource="{Binding Tabs}" SelectedIndex="0" >
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="Content" Value="{Binding}" />
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

每个viewmodel都有一个DataTemplate在a中指定的ResourceDictionary.

<DataTemplate TargetType={x:Type vm:MyViewModel}>
    <v:MyView/>
</DataTemplate>

DataTemplate中指定的每个视图都是资源密集型的,足以创建我只想创建每个视图一次,但是当我切换选项卡时,会调用相关视图的构造函数.从我所读到的,这是预期的行为TabControl,但我不清楚调用构造函数的机制是什么.

我已经看过一个使用UserControls 的类似问题,但是那里提供的解决方案需要我绑定到不受欢迎的视图.

Answer 1

默认情况下,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上的这个答案.

HTH,

Answer 2

答案Dennis非常棒,对我来说非常好.但是,他的帖子中提到的原始文章现在已经丢失,因此他的答案需要更多信息才能开箱即用.

这个答案是从MVVM的角度给出的,并在VS 2013下进行了测试.

首先,有点背景.第一个答案的Dennis工作方式是,每当用户切换标签时,它隐藏并显示标签内容,而不是销毁和重新创建所述标签内容.

这具有以下优点:

• 切换选项卡时,编辑框的内容不会消失.
• 如果在选项卡中使用树视图,则不会在选项卡更改之间折叠.
• 选项卡开关之间保留当前对任何网格的选择.
• 这段代码更适合MVVM编程风格.
• 我们不必编写代码来在选项卡更改之间的选项卡上保存和加载设置.
• 如果您使用的是第三方控件(如Telerik或DevExpress),则会在制表符开关之间保留网格布局等设置.
• 卓越的性能改进 - 选项卡切换几乎是即时的,因为我们不会在每次选项卡更改时重新绘制所有内容.

TabControlEx.cs

// 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友好的方式来执行此操作,它使用附加行为来实现相同的结果.请参阅代码项目:WPF TabControl:关闭选项卡虚拟化.我已将此添加为附加答案.

更新

如果您正在使用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具有相同的功能.

Answer 3

@Dennis 的这个现有解决方案（附有 @Gravitas 的附加说明）效果很好。

然而，还有另一种更模块化和 MVVM 友好的解决方案，因为它使用附加行为来实现相同的结果。

请参阅代码项目：WPF TabControl：关闭选项卡虚拟化。由于作者是路透社的技术负责人，因此代码可能是可靠的。

演示代码真的很好地组合在一起，它显示了一个常规的 TabControl，以及带有附加行为的那个。