WPF:Material Design + dragablz tabItem 标题样式

本文关键字：tabItem 标题 样式 dragablz Material Design WPF | 更新日期: 2023-09-27 18:30:42

我在WPF中使用MaterialDesign Toolkit和Dragablz。我在尝试设置TabablzControl样式时遇到了问题。我已经有了 windows 默认TabControl和TabItem标题的样式，如图所示：https://i.stack.imgur.com/Pk6AO.png

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

以下是窗口资源：

    <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的附加功能

任何帮助将不胜感激

WPF:Material Design + dragablz tabItem 标题样式

首先

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

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

<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}" />

所有这一切的一个很好的例子是在演示解决方案中的侧面板项目中：https://github.com/ButchersBoy/DragablzSamplez

   <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}"/>
相关文章：