WPF :Material Design + dragablz tabItem header style
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
Baruc Almaguer
Updated on June 24, 2022Comments
-
Baruc Almaguer almost 2 years
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 defaultTabControl
andTabItem
header, as shown in the picture: http://i.imgur.com/2anl5rl.pngBut 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 theTabablzControl
Any help will be appreciated
-
Baruc Almaguer over 8 yearsThanks, It was me not calling the correct dictionaryResources in my App.xaml, I just started learning WPF and didn't knew how to set the styles properly.
-
Raj almost 7 yearsuse inside app.xml to get material deign