WPF中动态添加/移除带UserControl的选项卡——绑定选项卡名称

Got it, let's fix that tab header binding issue! The key here is to use a view model to represent each tab item (with both the header text and the content), then bind the TabControl to a collection of these view models. Here's a step-by-step solution:

1. Create a Tab Item View Model #

First, make a simple view model class to hold each tab's header and content. Implement INotifyPropertyChanged so changes to the header text update automatically in the UI:

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace WpfApp3
{
    public class TabItemViewModel : INotifyPropertyChanged
    {
        private string _headerText;
        public string HeaderText
        {
            get => _headerText;
            set
            {
                _headerText = value;
                OnPropertyChanged();
            }
        }

        // This can be either a UserControl instance or a view model for your UserControl
        public object Content { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

2. Create the Main View Model #

Next, make a main view model that holds a collection of your tab items. We'll use ObservableCollection so the TabControl automatically updates when tabs are added or removed:

using System.Collections.ObjectModel;

namespace WpfApp3
{
    public class MainViewModel
    {
        public ObservableCollection<TabItemViewModel> TabItems { get; } = new ObservableCollection<TabItemViewModel>();

        public MainViewModel()
        {
            // Add your tabs here - replace with your actual UserControls or their view models
            TabItems.Add(new TabItemViewModel
            {
                HeaderText = "User Control 1",
                Content = new YourFirstUserControl() // Replace with your UserControl
            });
            TabItems.Add(new TabItemViewModel
            {
                HeaderText = "User Control 2",
                Content = new YourSecondUserControl() // Replace with your UserControl
            });
        }
    }
}

3. Update MainWindow.xaml to Bind Everything #

Now wire up the XAML to use these view models. Set the window's DataContext to the main view model, then bind the TabControl's ItemsSource to the TabItems collection. We'll also set up bindings for the tab header and content:

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <!-- Set the data context to our main view model -->
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Grid>
        <TabControl ItemsSource="{Binding TabItems}">
            <!-- Bind the TabItem's Header to the HeaderText property -->
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="Header" Value="{Binding HeaderText}"/>
                </Style>
            </TabControl.ItemContainerStyle>
            <!-- Bind the Tab content to the Content property -->
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <ContentControl Content="{Binding Content}"/>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

Bonus: MVVM-Friendly Approach (No Direct UserControl Instantiation) #

If you want to stick strictly to MVVM (avoiding creating UserControls directly in code), you can define data templates that map view models to their corresponding UserControls:

1. Create view models for each of your UserControls (e.g., FirstUserControlViewModel, SecondUserControlViewModel).
2. Add data templates to your window resources:

<Window.Resources>
    <DataTemplate DataType="{x:Type local:FirstUserControlViewModel}">
        <local:YourFirstUserControl/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:SecondUserControlViewModel}">
        <local:YourSecondUserControl/>
    </DataTemplate>
</Window.Resources>

3. Update the MainViewModel to use view model instances instead of UserControls:

TabItems.Add(new TabItemViewModel
{
    HeaderText = "First Tab",
    Content = new FirstUserControlViewModel()
});

This way, WPF automatically uses the correct UserControl for each view model, keeping your code clean and testable.

内容的提问来源于stack exchange，提问作者Tomasz Filipek