WPF :Material 设计 + dragablz tabItem header 样式
WPF :Material Design + dragablz tabItem header style
我在 WPF 中使用 MaterialDesign 工具包和 Dragablz 工作。
我在尝试设置 TabablzControl
样式时遇到问题。
我已经有了windows默认TabControl
和TabItem
header的样式,如图:
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
的功能
任何帮助将不胜感激
首先要注意的是,这是 WPF 的一般特性,您没有正确使用样式继承。
当您使用 Material Design with Dragablz 时,如果您要重新设计选项卡控件本身的样式,则必须使用 BasedOn 从 Dragablz 程序集中的 Material 设计样式继承:
<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
<Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}"/>
我在 WPF 中使用 MaterialDesign 工具包和 Dragablz 工作。
我在尝试设置 TabablzControl
样式时遇到问题。
我已经有了windows默认TabControl
和TabItem
header的样式,如图:
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
任何帮助将不胜感激
首先要注意的是,这是 WPF 的一般特性,您没有正确使用样式继承。
当您使用 Material Design with Dragablz 时,如果您要重新设计选项卡控件本身的样式,则必须使用 BasedOn 从 Dragablz 程序集中的 Material 设计样式继承:
<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
<Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}"/>