Question

Well im trying to bind a TabControl to a datasource while using the MahApps.Metro style

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>

Codebehind:

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

This works some what but the TabControl looses some of its style (active selection style) and it gets hard to click a tab (you can’t click it directly you have to click right in front of it), does any one have a solution for this problem?

Answer 1

The DataTemplate for TabControl.ItemTemplate would be a TabItem already so no need to put that in.

This should work:

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