WPF :Material Design + dragablz tabItem header style

Question

I am working in WPF with the MaterialDesign Toolkit and Dragablz. I encountered a problem while trying to style a TabablzControl. I already have style for the windows default TabControl and TabItem header, as shown in the picture: http://i.imgur.com/2anl5rl.png

But when I change the default tabControl to TabablzControl, it turns into this: http://i.imgur.com/bhaaMVy.png

Here are the window.resources:

    <Style x:Key="mdTabControl" TargetType="TabControl">
        <Setter Property="TextElement.Foreground" Value="{DynamicResource MaterialDesignBody}"/>
        <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}"></Setter>
    </Style>
    <Style x:Key="mdTabHeader" TargetType="{x:Type TabItem}">
        <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}"></Setter>
        <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border"  Margin="1,0,1,0" CornerRadius="3 3 0 0">
                            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
                                              HorizontalAlignment="Center"
                                              ContentSource="Header" Margin="10,2,10,2"
                                              RecognizesAccessKey="True">
                            </ContentPresenter>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Panel.ZIndex" Value="100" />
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource SecondaryAccentBrush}" />
                            <Setter Property="Foreground" Value="{StaticResource SecondaryAccentForegroundBrush}"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter Property="Panel.ZIndex" Value="100" />
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource PrimaryHueMidBrush}" />
                            <Setter Property="Foreground" Value="{StaticResource PrimaryHueMidForegroundBrush}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource PrimaryHueDarkBrush}" />
                            <Setter Property="Foreground" Value="{StaticResource PrimaryHueDarkForegroundBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The error appears when I change the mdTabControl style targetType to: TargetType="dbz:TabablzControl"

I want to keep the style I set to the TabControl, but with the added functionality of the TabablzControl

Any help will be appreciated

Answer 1

First thing to note, which is a general WPF characteristic, you are not using style inheritance correctly.

As you are using Material Design with Dragablz, if you are restyling the tab control itself, you must inherit from the Material Design style in the Dragablz assembly using BasedOn:

<Style x:Key="mdTabControl" TargetType="TabControl" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}"> 
    <Setter Property="TextElement.Foreground" Value="{DynamicResource MaterialDesignBody}"/>
    <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}"></Setter>
</Style>

Again, with the tab header itself, you need to inherit from the relevant style:

<Style x:Key="mdTabHeader" TargetType="{x:Type TabItem}" BasedOn="{StaticResource MaterialDesignDragableTabItemStyle}">
    . . .
</Style>

Note, that (depending you your App.xaml setup) you probably need to make sure the correct resource dictionary is included in the same XAML file. For example a more complete XAML might be:

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <Style x:Key="NormalTabItemStyle" TargetType="{x:Type dragablz:DragablzItem}" BasedOn="{StaticResource MaterialDesignDragableTabItemStyle}">
            <Setter Property="Width" Value="280" />
            <Setter Property="Padding" Value="1" />
        </Style>
        . . .
    </ResourceDictionary>                
</Window.Resources>

Finally, as you are changing the TabItem style, you either need to the TabablzCOntrol style the correct style, or you could use it where you actually declare the TabablzControl itself:

<dragablz:TabablzControl ItemContainerStyle="{StaticResource mdTabHeader}" />

A good example of all this in action is in the SidePanels project in the demo solution at: https://github.com/ButchersBoy/DragablzSamplez