Tabcontrol动态添加和移除TabItem

现在很多软件的主界面都流行设计成选项卡的模式，比如现在的IE浏览器，每打开一个新的页面，便增加一个选项卡，在选项卡的头部的右侧，放置一个关闭按钮。需要关闭的时候，直接点对应的选项卡的关闭按钮关闭。

先看一下实现以后的效果图：

左侧，是软件的功能列表，这个比较简单，用ListBox、Treeview或是Expander都可以实现。在此就不多说了，今天主要说一下，右边这个选项卡是如何实现的。如果是用Winform来实现的话，立马头就大了。要实现这样的效果，肯定得改写控件了。用WPF实现，那是相当快啊。只要重新写一个样式就可以了。

Tabcontrol的Header部分的Style如下：

<Style  TargetType="{x:Type TabItem}">
            <Setter  Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border x:Name="layout" BorderBrush="Gray" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}"
                                CornerRadius="3" Margin="2,0,2,0">
                        <Grid Height="20">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="25"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock  TextAlignment="Center" Text="{TemplateBinding Header}" Grid.Column="0" Margin="4,0,3,0"
                            VerticalAlignment="Center"    HorizontalAlignment="Center"/>
                            <Button Content="X" Grid.Column="1"  Height="8" Width="8" Margin="4,1,3,2" 
                            Tag="{TemplateBinding Header}" Click="Button_Click"
                            Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Center">
                            <Button.Template>
                                <ControlTemplate >
                                    <Grid>
                                        <Rectangle>
                                            <Rectangle.Fill>
                                                <VisualBrush>
                                                    <VisualBrush.Visual>
                                                        <Path x:Name="btnPath" 
                                                        Data="M0 0L10 10M0 10L10 0" Stroke="Gray"
                                                        StrokeThickness="1"/>
                                                    </VisualBrush.Visual>
                                                </VisualBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="btnPath" Property="Stroke" Value="Red"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Button.Template>
                            </Button>
                        </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">   
                                <Setter Property="Background" Value="White"/>                                                             
                                <Setter TargetName="layout" Property="Margin" Value="2,0,2,-1.5"/>
                            </Trigger> <Trigger Property="IsSelected" Value="false">
                                <Setter Property="Background" Value="LightBlue"/>                                
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

那么，如何动态添加TabItem呢？软件的功能界面一般是做成一个用户控件，在代码中根据所选择的功能进行判断，选择相对应的功能界面，把TabItem的Content属性设置成对应的用户控件就可以了。比如，我在左侧软件功能栏项目的双击事件中加入如下代码：（注：因只是演示，为了节省时间，我只做的用户管理的界面）

    //目录树双击
        private void TreeView_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            TreeView trv =sender as TreeView;
            TreeViewItem  tempItem= trv.SelectedItem as TreeViewItem;
            string header = tempItem.Header.ToString();
            TabItem temptb = new TabItem();
            temptb.Header = header;
            if (header == "用户管理")
            {
                UCUserManage uc = new UCUserManage();
                temptb.Content = uc;
            }
            this.MainPanel.Items.Add(temptb);
            MainPanel.SelectedIndex = MainPanel.Items.Count - 1;
        }

以上界面中，左侧是一个Treeview控件，代码中应该还要加一个判断，判断要添加的界面是否已经打开，如果打开了就直接跳转到那个界面，在这里我省略了这些代码。

关闭选项卡的代码如下，在Itemheader右边的Button的Click事件中加入如下代码：

//关闭选项卡
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
            string header = btn.Tag.ToString();
            foreach (TabItem item in MainPanel.Items)
            {
                if (item.Header.ToString() == header)
                {
                    MainPanel.Items.Remove(item);
                    break;
                }
            }
        }

小功造成！

虽然界面做得很粗糙，但是，希望通过以上的讲解可以帮助到大家。