Silverlight-TabControl扩展

TabControl是平常用的比较多的布局控件，虽然它是继承自ItemsControl，但是它的ItemsSource实在是很不好用，谁用谁知道。

prism里为TabControl提供了TabControlRegionAdapter和TabControlRegionSyncBehavior，参考其部分实现方式让我们也来实现个TabControl的扩展来更好的MVVM。

看代码：

    public class TabControlExtensions
    {
        public static IEnumerable GetItemsSource(DependencyObject d)
        {
            return (IEnumerable)d.GetValue(ItemsSourceProperty);
        }

        public static void SetItemsSource(DependencyObject d, IEnumerable value)
        {
            d.SetValue(ItemsSourceProperty, value);
        }

        public static readonly DependencyProperty ItemsSourceProperty =
            DependencyProperty.RegisterAttached("ItemsSource", typeof(IEnumerable), typeof(TabControl),
            new PropertyMetadata(OnItemsSourceChanged));

        private static void OnItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var source = d as TabControl;
            var items = e.NewValue as IEnumerable;

            source.Items.Clear();

            if (items != null)
            {
                var headerTemplate = GetHeaderTemplate(source);
                var contentTemplate = GetContentTempalte(source);

                foreach (var item in items)
                {
                    var tabItem = new TabItem
                    {
                        DataContext = item,
                        Header = item,
                        HeaderTemplate = headerTemplate,
                        Content = item,
                        ContentTemplate = contentTemplate,
                    };
                    source.Items.Add(tabItem);
                }
            }
        }



        public static DataTemplate GetHeaderTemplate(DependencyObject d)
        {
            return (DataTemplate)d.GetValue(HeaderTemplateProperty);
        }

        public static void SetHeaderTemplate(DependencyObject d, DataTemplate value)
        {
            d.SetValue(HeaderTemplateProperty, value);
        }

        public static readonly DependencyProperty HeaderTemplateProperty =
            DependencyProperty.RegisterAttached("HeaderTemplate", typeof(DataTemplate), typeof(TabControl),
            new PropertyMetadata(OnHeaderTemplateChanged));

        private static void OnHeaderTemplateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var source = d as TabControl;
            var template = e.NewValue as DataTemplate;

            foreach (TabItem item in source.Items)
            {
                item.HeaderTemplate = template;
            }
        }


        public static DataTemplate GetContentTempalte(DependencyObject d)
        {
            return (DataTemplate)d.GetValue(ContentTempalteProperty);
        }

        public static void SetContentTempalte(DependencyObject d, DataTemplate value)
        {
            d.SetValue(ContentTempalteProperty, value);
        }

        public static readonly DependencyProperty ContentTempalteProperty =
            DependencyProperty.Register("ContentTempalte", typeof(DataTemplate), typeof(TabControl),
            new PropertyMetadata(OnContentTempalteChanged));

        private static void OnContentTempalteChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var source = d as TabControl;
            var template = e.NewValue as DataTemplate;

            foreach (TabItem item in source.Items)
            {
                item.ContentTemplate = template;
            }
        }
    }

扩展类TabControlExtensions提供了三个附加属性：

ItemsSource用于设置TabControl的数据源（摒弃自身的ItemsSource不用了）。

HeaderTemplate和ContentTempalte方便设置数据的显示模板（ItemsControl也有ItemTemplate属性，为了清晰，此处就单独拎出来了）。

在三个回调方法里的操作很简单，一看就明白。

来个Model类：

    public class Animal
    {
        public string Name { get; set; }
        public int Count { get; set; }
        public string From { get; set; }
    }

再来个简单的ViewModel类：

    public class Zoo
    {
        public IEnumerable<Animal> Animals { get; private set; }

        public Zoo()
        {
            this.Animals = new List<Animal>
            {
                new Animal{Name="斑马",Count=10,From="塞伦盖提"},
                new Animal{Name="企鹅",Count=23,From="加拉帕戈斯"},
                new Animal{Name="环尾狐猴",Count=8,From="马达加斯加"},
            };
        }
    }

看下Xaml里的具体设置和最后的效果：  

<UserControl x:Class="TabControlExtensions.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
             xmlns:local="clr-namespace:TabControlExtensions">
    
    <UserControl.DataContext>
        <local:Zoo/>
    </UserControl.DataContext>

    <UserControl.Resources>
        <DataTemplate x:Key="HeaderTempalte">
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
        <DataTemplate x:Key="ContentTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Count,StringFormat='数量:\{0\}'}"/>
                <TextBlock Text="{Binding From,StringFormat='来自:\{0\}'}"/>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:TabControl Margin="30"
                        local:TabControlExtensions.ItemsSource="{Binding Animals}"
                        local:TabControlExtensions.HeaderTemplate="{StaticResource HeaderTempalte}"
                        local:TabControlExtensions.ContentTempalte="{StaticResource ContentTemplate}"/>
    </Grid>
</UserControl>

只要想的到，其实一切都很简单。

另外现在的方式只能在ItemsSource里的每个Item拥有相同或者类似的属性时才有最好的效果，下次继续扩展。