【发布时间】:2017-08-28 07:53:47
【问题描述】:
我正在尝试为 TabControl 和 TabItem 实现样式,如下图所示:
样式应该使以下内容可见:
- 列表项
- TabControl 的白色背景和具有阴影效果的选定 TabItem。
- 当未选择任何 TabItem 时,TabItem 文本颜色应变为灰色。
到目前为止我已经取得的成就:
- 能够使用 TabSizeConverter 转换器划分 TabControl 的宽度以容纳大小相等的 TabItem 项。
- 能够更改背景以及 TabControl 和 TabItems。但无法实现Dropshadow效果。
- 下面是我的 TabItem 样式:
<Setter Property="Padding" Value="0"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Foreground" Value="{StaticResource color_MediumGray}"/>
<Setter Property="FontSize" Value="34"/>
<Setter Property="FontFamily" Value="Resources/Fonts/#HelveticaNeueMed" />
<Setter Property="Width">
<Setter.Value>
<MultiBinding Converter="{StaticResource tabSizeConverter}">
`<Binding RelativeSource="{RelativeSource Mode=FindAncestor,` AncestorType={x:Type TabControl}}" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" Path="ActualWidth" />
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="Chrome"
BorderThickness="30,0"
BorderBrush="{StaticResource color_Transparent}"
Background="{StaticResource color_LightGray}"
Padding="0" Margin="0">
<ContentPresenter ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected" Value="True">
<Setter TargetName="Chrome" Property="BorderThickness" Value="0"/>
<Setter TargetName="Chrome" Property="Background" Value="{StaticResource color_White}"/>
<Setter Property="Foreground" Value="{StaticResource color_Purple}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
如果有人可以帮助我实现具有这种风格的 TabControl,那将是一个很大的帮助。 提前致谢。
【问题讨论】:
-
您好,如果我的回答解决了您的问题或是否需要任何澄清,我会很高兴得到一些反馈。
标签: wpf tabcontrol tabitem wpf-style