WPF :Material Design + dragablz tabItem 标题样式

WPF :Material Design + dragablz tabItem header style

提问by Baruc Almaguer

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 TabControland TabItemheader, as shown in the picture: http://i.imgur.com/2anl5rl.png

我正在使用 MaterialDesign Toolkit 和 Dragablz 在 WPF 中工作。我在尝试设置TabablzControl. 我已经有了windows默认TabControl和TabItemheader的样式，如图：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

但是当我将默认的 tabControl 更改为 TabablzControl 时，它变成了这样：http://i.imgur.com/bhaaMVy.png

Here are the window.resources:

这是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 mdTabControlstyle targetType to: TargetType="dbz:TabablzControl"

当我将mdTabControl样式 targetType更改为： TargetType="dbz:TabablzControl"

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

我想保留我设置的样式TabControl，但是增加了 的功能TabablzControl

Any help will be appreciated

任何帮助将不胜感激

回答by James Willock

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

首先要注意，这是一般 WPF 特性，您没有正确使用样式继承。

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:

当您在 Dragablz 中使用 Material Design 时，如果您要重新设计选项卡控件本身的样式，则必须使用BasedOn从 Dragablz 程序集中的 Material Design 样式继承：

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

请注意，（取决于您的 App.xaml 设置）您可能需要确保在同一个 XAML 文件中包含正确的资源字典。例如，更完整的 XAML 可能是：

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

最后，当您更改 TabItem 样式时，您需要将 TabablzCONtrol 样式设置为正确的样式，或者您可以在实际声明 TabablzControl 本身的地方使用它：

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

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

演示解决方案中的SidePanels项目是所有这一切的一个很好的例子，网址为：https: //github.com/ButchersBoy/DragablzSamplez

回答by Raj

   <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}"/>