WPF MahApps.Metro选项卡控件数据绑定？

Question

在使用MahApps.Metro样式的同时，我尝试将TabControl绑定到数据源

Window xaml：

<Controls:MetroWindow x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <TabControl ItemsSource="{Binding Collection}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TabItem Header="{Binding Title}">
                    <ContentControl Content="{Binding Content}" />
                </TabItem>
            </DataTemplate>
        </TabControl.ItemTemplate>
    </TabControl>
</Controls:MetroWindow>

代码背后：

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : MetroWindow
{
    public MainWindow()
    {
        InitializeComponent();
        Collection = new ObservableCollection<Item>() 
            {
                new Item("Test1", 1),
                new Item("Test2", 2),
                new Item("Test3", 3)
            };
        this.DataContext = this;
    }

    public ObservableCollection<Item> Collection
    { get; set; }
}

这是可行的，但是TabControl失去了一些样式(活动选择样式)，并且很难点击标签(你不能直接点击它，你必须在它前面点击)，有没有人有解决这个问题的办法？

​

​

Answer 1

TabControl.ItemTemplate的DataTemplate已经是一个TabItem了，所以不需要把它放进去。

这应该是可行的：

<TabControl ItemsSource="{Binding Collection}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Title}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Content}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>