Unable to Style TabControl

Question

Within my application, I have recently tried to jazz it up in terms of its appearance so I have tried using MahApps.Metro. But I've hit a little of a snag.

Within my application, I have a tabcontrol and I have used a style as the following ;

<Page.Resources>
    <ResourceDictionary>

      <ResourceDictionary.MergedDictionaries>
         <!--Resource dictionary for mahapps. -->
      </ResourceDictionary.MergedDictionaries>

      <Style TargetType="{x:Type TabItem}">
         <Setter Property="HeaderTemplate">
             <Setter.Value>
                 <DataTemplate> 
                     <StackPanel Orientation="Horizontal">
                        <!-- FormName is the name of the ViewModel-->
                        <TextBlock Text="{Binding FormName}" VerticalAlignment="Center" Margin="2" /> 
                     </StackPanel>
                     <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsValid}"
                                 Value="False">
                        </DataTrigger>
                     </DataTemplate.Triggers>
                 </DataTemplate>
             </Setter.Value>                    
         </Setter>                
     </Style>
 </ResourceDictionary>
</Page.Resources>

<!-- The itemsource that is bound to is a ObservableCollection of Forms that are used to validate for a Progress bar, It uses the ViewModels-->
<TabControl x:Name="tabcontrol" 
            Grid.Row="1"  
            ItemsSource="{Binding Forms}"
            SelectedIndex="0" BorderBrush="Black" />

Obviously, this isn't using the MahApps.Metro tabcontrol. However, within the style of the tabcontrol I changed the TargetType to the following but it causes everything within the Page to increase its size and combines effectively two tab contents into one;

<Style TargetType="{x:Type Controls:MetroTabItem}"  BasedOn="{StaticResource MetroTabItem}">

Any help would be grateful in regards to helping me implement the MahApps.Meto tab control and clearing up what I am doing wrong. Cheers.

Answer 1

Building on what Maverik said above (Don't have the reputation to just add a comment...) try using BasedOn="{StaticResources MetroTabItem}" to prevent the loop complaint.

<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/Controls.AnimatedSingleRowTabControl.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
    <ResourceDictionary>
        <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource MetroTabItem}">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate >
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding FormName}" VerticalAlignment="Center" Margin="2" />
                        </StackPanel>
                        <DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding IsValid}" Value="False" />
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</ResourceDictionary.MergedDictionaries>

Answer 2

The reason you're getting all mixed up result is because MetroTabItem doesn't have a Template of its own I think and uses TabItem style override instead. Your original approach is on the right path.

I can't tell how your actual style is configured (the cut paste of ResourceDictionary you've pasted here won't compile as it is) but if you use this block of resources (and add yours), it should work. Tested and working here.

<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/Controls.AnimatedSingleRowTabControl.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
        <ResourceDictionary>
            <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate >
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding FormName}" VerticalAlignment="Center" Margin="2" />
                            </StackPanel>
                            <DataTemplate.Triggers>
                                <DataTrigger Binding="{Binding IsValid}" Value="False" />
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Note: VS will complain with "A loop was detected in the property expressions." which is sort of true but works fine. You can ignore the error. The solution will build and run fine.