具有投影效果 WPF 的 TabControl 和 TabItem

Question

我正在尝试为 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，那将是一个很大的帮助。提前致谢。

Answer 1

The Style should make below things visible:

List Item

White Background for TabControl and selected TabItem with Dropshadow Effect.

When any TabItem is not selected, then the TabItem text color should turn to gray.

我想这只是一个打字错误？
设置TabControl.Background为白色，设置TabControl上的投影效果，设置TabControl.BorderThickness为零，设置TabItem.Background和TabItem.BorderBrush为白色，不要改变TabItem.BorderThickness。对于选项卡 header 对齐，TabPanel.Margin 的一个简单修复方法是对所选选项卡使用负边距。
在 Chrome 上设置 TextBlock.Foreground 而不是在模板触发器中使用 TabItem.Foreground。

通常请注意，为了测试，我用系统颜色名称替换了您的颜色常量。此外，我没有理会 re-solve 选项卡项宽度问题，而是为它们分配了静态宽度。哦，我使用了默认字体而不是你的字体资源:)

我的完整样本：

<Window.Resources>
    <Style x:Key="itemStyle" TargetType="TabItem">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="FontSize" Value="34"/>
        <Setter Property="FontFamily" Value="Resources/Fonts/#HelveticaNeueMed" />
        <Setter Property="Width" Value="310"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Border x:Name="Chrome"
                        BorderThickness="10,0" 
                        BorderBrush="Transparent" 
                        Background="LightGray" 
                        TextBlock.Foreground="Gray"
                        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="BorderBrush" Value="White"/>
                            <Setter TargetName="Chrome" Property="Background" Value="White"/>
                            <Setter TargetName="Chrome" Property="Margin" Value="-2,0,-2,-1"/>
                            <Setter TargetName="Chrome" Property="TextBlock.Foreground" Value="Purple"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="grid1">
    <Grid MaxWidth="650" MaxHeight="600">
        <Border Background="Gray">
            <Border.Effect>
                <BlurEffect/>
            </Border.Effect>
        </Border>
        <TabControl BorderThickness="0" Margin="5" Background="White">
            <TabControl.Effect>
                <DropShadowEffect />
            </TabControl.Effect>
            <TabItem Header="Postpaid" Style="{StaticResource itemStyle}" HorizontalContentAlignment="Center">
                <WrapPanel>
                    <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Green" Width="380" Height="180" Margin="10"/>
                    <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Green" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Yellow" Width="180" Height="180" Margin="10"/>
                </WrapPanel>
            </TabItem>
            <TabItem Header="Prepaid" Style="{StaticResource itemStyle}" HorizontalContentAlignment="Center">
                <WrapPanel>
                    <Rectangle Fill="Green" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Yellow" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Green" Width="380" Height="180" Margin="10"/>
                    <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
                </WrapPanel>
            </TabItem>
        </TabControl>
    </Grid>
</Grid>

具有投影效果 WPF 的 TabControl 和 TabItem

TabControl and TabItem with Dropshadow effect WPF

wpf

tabcontrol

tabitem

wpf-style