WPF中使用TabControl为每个页签添加不同窗体的方法。_wpf tab

注：每一个页签添加不同窗体，其实不能叫是窗体，只能叫做控件。我这么起标题主要是方便一些新手来搜索答案。

项目需求：

对于一些上位机控制程序来说，一个窗体根本放不下所有的功能，所以我们通常会使用TabControl控件来进行分类布局。通过选择分类选项卡，来展示不同的功能界面。

下面上一个简单Demo

一、先建立一个主窗口MainWindow.xaml

<Window x:Class="TabControlTest.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:TabControlTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        
    </Window.Resources>
    <Grid>
        <TabControl x:Name="tabControl" SelectionChanged="tabControl_SelectionChanged">
            <TabItem Header="第一">
                <Grid x:Name="p1" Background="Yellow" />
            </TabItem>
            <TabItem Header="第二">
                <Grid x:Name="p2" Background="Black"/>
            </TabItem>
            <TabItem Header="第三">
                <Grid x:Name="p3" Background="OrangeRed"/>
            </TabItem>
            <TabItem Header="第四">
                <Grid x:Name="p4" Background="Green"/>
            </TabItem>
        </TabControl>
 
    </Grid>
</Window>

效果如图：

 二、再创建4个子界面

我们可以右键项目名称，添加一个文件夹，取名为子窗口。然后右键子窗口，添加-用户控件(WPF).

win1.xaml子控件窗口代码

<UserControl x:Class="TabControlTest.子窗口.win1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:TabControlTest.子窗口"
             mc:Ignorable="d"  Background="Black" Foreground="Red"
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock Text="这是第一个页面"/>
    </Grid>
</UserControl>

我这里一共建了4个控件。

三、打开主窗口代码，对控件进行绑定

首先给TabControl创建一个SelectionChanged的事件，再加入事件代码

 private void tabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            int index = (sender as TabControl).SelectedIndex;
            win1 w1 = new win1();
            win2 w2 = new win2();
            win3 w3 = new win3();
            win4 w4 = new win4();
            switch (index)
            {
                case 0:
                    this.p1.Children.Add(w1);
                    break;
                case 1:
                    this.p2.Children.Add(w2);
                    break;
                case 2:
                    this.p3.Children.Add(w3);
                    break;
                case 3:
                    this.p4.Children.Add(w4);
                    break;
 
            }
        }