WPF：Material Design + dragablz tabItem標題樣式

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更改為： TargetType="dbz:TabablzControl"時出現錯誤

我想保留我設置為TabControl的樣式，但增加了TabablzControl功能

任何幫助將不勝感激

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可能是：

<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

Answer 2

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