学步园

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拥有相同或者类似的属性时才有最好的效果，下次继续扩展。