WPF实现仅选中标签页时加载对应UserControl的方法

下面提供三种常用的实现方式，可根据项目场景选择：

方法一：代码后台监听SelectionChanged事件 #

思路是先仅为TabItem设置Header，不直接嵌入UserControl，待标签第一次被选中时再动态创建并加载控件。

修改后的XAML #

<TabControl x:Name="MainTabControl" SelectionChanged="MainTabControl_SelectionChanged">
    <TabItem Header="General" Tag="UserControl1" />
    <TabItem Header="Security" Tag="UserControl2" />
    <TabItem Header="Details" Tag="UserControl3" />
</TabControl>

后台代码 #

private void MainTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.AddedItems.Count == 0) return;
    
    var selectedTab = e.AddedItems[0] as TabItem;
    if (selectedTab == null || selectedTab.Content != null) return;
    
    // 根据Tag创建对应UserControl实例
    switch (selectedTab.Tag.ToString())
    {
        case "UserControl1":
            selectedTab.Content = new UserControl1();
            break;
        case "UserControl2":
            selectedTab.Content = new UserControl2();
            break;
        case "UserControl3":
            selectedTab.Content = new UserControl3();
            break;
    }
}

该方式简单直接，适合小型项目或非MVVM架构场景，仅在标签首次激活时初始化控件。

方法二：MVVM模式下的延迟加载 #

通过绑定ViewModel与DataTemplate，利用ViewModel的选中状态触发View的延迟创建，符合MVVM架构规范。

定义ViewModel类 #

public class TabViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class GeneralViewModel : TabViewModelBase { }
public class SecurityViewModel : TabViewModelBase { }
public class DetailsViewModel : TabViewModelBase { }

public class MainViewModel : TabViewModelBase
{
    private ObservableCollection<TabViewModelBase> _tabItems;
    public ObservableCollection<TabViewModelBase> TabItems
    {
        get => _tabItems;
        set
        {
            _tabItems = value;
            OnPropertyChanged(nameof(TabItems));
        }
    }

    private TabViewModelBase _selectedTab;
    public TabViewModelBase SelectedTab
    {
        get => _selectedTab;
        set
        {
            _selectedTab = value;
            OnPropertyChanged(nameof(SelectedTab));
        }
    }

    public MainViewModel()
    {
        TabItems = new ObservableCollection<TabViewModelBase>
        {
            new GeneralViewModel(),
            new SecurityViewModel(),
            new DetailsViewModel()
        };
    }
}

绑定后的XAML #

<Window.DataContext>
    <local:MainViewModel />
</Window.DataContext>

<TabControl ItemsSource="{Binding TabItems}" SelectedItem="{Binding SelectedTab}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock>
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <DataTrigger Binding="{Binding}" Value="{x:Type local:GeneralViewModel}">
                            <Setter Property="Text" Value="General" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding}" Value="{x:Type local:SecurityViewModel}">
                            <Setter Property="Text" Value="Security" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding}" Value="{x:Type local:DetailsViewModel}">
                            <Setter Property="Text" Value="Details" />
                        </DataTrigger>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <ContentControl>
                <ContentControl.Style>
                    <Style TargetType="ContentControl">
                        <DataTrigger Binding="{Binding}" Value="{x:Type local:GeneralViewModel}">
                            <Setter Property="Content" Value="{local:UserControl1}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding}" Value="{x:Type local:SecurityViewModel}">
                            <Setter Property="Content" Value="{local:UserControl2}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding}" Value="{x:Type local:DetailsViewModel}">
                            <Setter Property="Content" Value="{local:UserControl3}" />
                        </DataTrigger>
                    </Style>
                </ContentControl.Style>
            </ContentControl>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

该方式通过DataTrigger关联ViewModel与View，仅在标签选中时创建对应UserControl实例，适合大型MVVM项目。

方法三：纯XAML触发器实现 #

无需编写后台代码，通过TabItem的IsSelected触发器动态加载Content。

修改后的XAML #

<TabControl>
    <TabItem Header="General">
        <TabItem.Style>
            <Style TargetType="TabItem">
                <Setter Property="Content" Value="{x:Null}" />
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <local:UserControl1 />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TabItem.Style>
    </TabItem>
    <TabItem Header="Security">
        <TabItem.Style>
            <Style TargetType="TabItem">
                <Setter Property="Content" Value="{x:Null}" />
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <local:UserControl2 />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TabItem.Style>
    </TabItem>
    <TabItem Header="Details">
        <TabItem.Style>
            <Style TargetType="TabItem">
                <Setter Property="Content" Value="{x:Null}" />
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <local:UserControl3 />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TabItem.Style>
    </TabItem>
</TabControl>

该方式完全通过XAML实现逻辑，适合无需后台交互的简单场景。

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