WPF在MVVM模式中实现为TabControl动态添加标签页

最新推荐文章于 2025-03-18 14:29:50 发布

Kyle_Jehring

最新推荐文章于 2025-03-18 14:29:50 发布

阅读量3k

点赞数 14

文章标签： wpf c# visual studio

本文链接：https://blog.csdn.net/Kyle_Jehring/article/details/138270191

版权

本文介绍了如何在WPF项目中使用TabControl控件创建动态标签页，通过设置TabControl的ItemsSource为ObservableCollection<TabItem>，并为每个TabItem设置UserControl视图，实现子标签页的添加和管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在WPF项目遇到了需要使用标签页展示一些子页面的需求，搜索之后发现了TabControl控件，发现相当好用，于是在此处整理了一套（自认为）相对通用的解决方案。

标签页容器——TabControl简介

首先看微软官方文档，发现TabControl继承自ItemsControl，意味着TabControl中的子项TabItem可以通过可观测集合ObservableCollection<TabItem>进行增删，于是我们就把TabItem作为容器来放置子标签的页面。

xaml中添加TabControl并绑定到可观测集合

<Window 
        mc:Ignorable="d"
        Title="TabConWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:TabConViewModel></local:TabConViewModel>
    </Window.DataContext>
    <Grid>
        <TabControl ItemsSource="{Binding TabItems}" >
            
        </TabControl>
    </Grid>
</Window>

准备标签页——为UserControl设置DataContext

设置标签页视图——为TabItem的Content属性设置UserControl视图
通过实例化新的TabItem，并将一个实例化的UserControl赋值给TabItem的Content属性，就实现了将UserControl的视图绑定到这个新的TabItem中。

这里我准备了两个UserControl用来测试

UserControl1.xaml

<UserControl x:Class="TestBed.Views.UserControls.UserControl1"
             xmlns:local="clr-namespace:Te

最低0.47元/天解锁文章