My Silverlight系列（5）—— Silverlight控件介绍之TabControl

TabControl这个控件想必大家都不陌生，无论是WinForm、Asp.net还是WPF中，这个通用控件都是非常有用的。

笔者最近在学习Silverlight中也应用到这个控件，发觉它与WPF中的TabControl是不尽相同的——这个事情让我非常的不解，主要是因为这个控件并不会涉及到安全因素，没有理由和WPF不一样（或许是我的类库版本有问题，也请大家有兴趣帮我验证一下）。

WPF的TabControl有ItemTemplate与ContentTemplate两个属性，前者可以为TabItem设置Header的模板，后者可以为TabItem设置Content模板。然而，在Silverlight的TabControl中，只有ItemTemplate这个属性（还有一个Template属性，但是一旦设置，就无法显示Header了）。于是退而求其次的，我只好为TabItem设置模板，幸运的是TabItem有HeaderTemplate与ContentTemplate两个属性，然而ContentTemplate并不Work，原因不明。。。

 

 1<UserControl xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"  x:Class="SilverlightApplication1.Page"
 2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 4    Width="800" Height="600">
 5    <Grid x:Name="LayoutRoot" Background="White">
 6        <Grid.RowDefinitions>
 7            <RowDefinition Height="30"/>
 8            <RowDefinition Height="*"/>
 9        </Grid.RowDefinitions>
        <Button x:Name="myButton" Content="Click" Click="myButton_Click"/>
        <my:TabControl x:Name="tab" Grid.Row="1">
            <my:TabControl.Resources>
                <Style x:Key="style" TargetType="my:TabItem">
                    <!--Template for the headers (buttons)-->
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Grid Margin="3">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{Binding HeaderText}"
                                               Grid.Column="0"
                                               FontSize="11"
                                               Margin="5 0 5 0"
                                               VerticalAlignment="Center" />
                                    <Button Content="x" Click="Button_Click"
                                            FontSize="11"
                                            VerticalAlignment="Center"
                                            Grid.Column="1"
                                            Width="16"
                                            Height="16" Tag="{Binding}"/>
                                </Grid>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter> 
                    <!--Template for the content, however, it doesn't work-->
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <Grid>
                                    <TextBlock Text="{Binding ContentText}"/>
                                </Grid>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </my:TabControl.Resources>
        </my:TabControl>
    </Grid>
</UserControl>

后台代码：

 

 1using System;
 2using System.Collections.Generic;
 3using System.Linq;
 4using System.Net;
 5using System.Windows;
 6using System.Windows.Controls;
 7using System.Windows.Documents;
 8using System.Windows.Input;
 9using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace SilverlightApplication1
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            this.tab.ItemsSource = source;
        }

        private ObservableCollection<TabItem> source = new ObservableCollection<TabItem>();
        /**//*
         * 这是一种比较强悍的手段，在内部直接维护了一个Dicionary
         * 当然也可以通过LINQ来查询source来找到相应的TabItem
         * 这样做的目的是为了在点击Header的"x"时，可以关掉相应的Tab
         */ 
        private Dictionary<Data, TabItem> hash = new Dictionary<Data, TabItem>();
        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            TabItem tabItem = new TabItem();
            Data data = new Data()
            {
                HeaderText = "myHeader",
                ContentText = "abcd"
            };
            tabItem.Style = (Style)(this.tab.Resources["style"]);
            tabItem.DataContext = data;
            source.Add(tabItem);
            hash[data] = tabItem;
            tab.SelectedItem = tabItem;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var btn = sender as Button;
            if (btn != null)
            {
                var data = btn.Tag as Data;
                source.Remove(hash[data]);
            }
        }

        public class Data
        {
            public string HeaderText { get; set; }
            public string ContentText { get; set; }
        }
    }
}

 

原本希望在Style中为TabItem设置它的HeaderTemplate与ContentTemplate，这样就可以在绑定DataContext的时候，对相应的控件属性进行绑定。然而运行的时候，可以发现ContentTemplate已经被赋值，但是却不会显示出来那个TextBlock。

 

至于上面这段代码最让我满意的，就是我为了TabItem的Header加入了一个Button，点击它的话，就可以将这个TabItem从TabControl中移除掉。

由于使用ContentTemplate的想法失败了，于是我只好动用TabItem的Content属性，代码做一下修改：

 

 1        private void myButton_Click(object sender, RoutedEventArgs e)
 2        {
 3            TabItem tabItem = new TabItem();
 4            Data data = new Data()
 5            {
 6                HeaderText = "myHeader",
 7                ContentText = "abcd"
 8            };
 9            tabItem.Style = (Style)(this.tab.Resources["style"]);
            tabItem.DataContext = data;
            Button button = new Button();
            button.Content= data.ContentText;
            tabItem.Content = button;
            source.Add(tabItem);
            hash[data] = tabItem;
            tab.SelectedItem = tabItem;
        }

这样就向TabItem的Content中加入了一人Button，Button的内容显示abcd。但是这样做有一个非常大的局限性，tabItem.Content属性虽然接受object类型，但是如果设置的不是ContentControl的子类，就会自动调用它的ToString()显示Content。于是这里有了一个权宜之计，就是加入一个Panel（如Canvas），这样向Pannel中就可以加入任何你想要的Control了。但是，我要说的是“但是”，这种方法无疑要求我们手写大量的cs代码而不是xaml代码，我认为这种方法是非常不好的。

我不知道我在设置TabItem的ContentTemplate的时候出了什么错，或者可以直接从TabControl的ItemTemplate（Template、ItemPanel等属性）中设置即可达到相应的效果，如果哪位做过类似的尝试或者有相关的资料可以告诉我，不胜感激。最后截一张运行时的效果图吧：