WPF：Material Design + dragablz tabItem header 样式

Question

我正在使用MaterialDesign Toolkit和Dragablz进行WPF开发。 在尝试样式化TabablzControl时，遇到了问题。 我已经为Windows默认的TabControl和TabItem标题创建了样式，如下图所示： http://i.imgur.com/2anl5rl.png 但是当我将默认的TabControl更改为TabablzControl时，它变成了这样： http://i.imgur.com/bhaaMVy.png 这是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>

当我将mdTabControl的样式目标类型更改为TargetType="dbz:TabablzControl"时，会出现错误。

我想保留我设置给TabControl的样式，但是希望能够添加TabablzControl的功能。

任何帮助都将不胜感激。

- Baruc Almaguer

Answer 1

首先需要注意的是，这是一个普遍的WPF特性，你没有正确使用样式继承。

由于你正在使用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>

同样地，对于选项卡头本身，您需要继承相关的样式：

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

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

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>

最后, 当你改变TabItem的样式时，你需要为TabablzControl指定正确的样式，或者在实际声明TabablzControl时使用它:

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

在演示解决方案中，SidePanels 项目是所有这些功能的很好的实例，位于以下网址：https://github.com/ButchersBoy/DragablzSamplez

- James Willock

---

谢谢，是我在App.xaml中没有正确调用dictionaryResources，我刚开始学习WPF，不知道如何正确设置样式。 - Baruc Almaguer

Answer 2

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

- Raj

---

使用在app.xml中获取Material Design。 - Raj