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;
                }
            }
        }

小功造成！

雖然界面做得很粗糙，但是，希望通過以上的講解可以幫助到大家。