具有Dropshadow效果WPF的TabControl和TabItem


TabControl and TabItem with Dropshadow effect WPF

我正在尝试为TabControl以及TabItem实施样式，如下图所示：
enter image description here

enter image description here

样式应使以下内容可见：

  • 项目清单
  • TabControl的白色背景和具有Dropshadow效果的选定TabItem。
  • 当未选择任何TabItem时，TabItem的文本颜色应变为灰色。

    • 到目前为止我已经取得的成就：

  • 可以使用TabSizeConverter转换器划分TabControl的宽度以容纳相等大小的TabItem项目。
  • 能够更改背景，并带有TabControl和TabItems。但是无法达到Dropshadow的效果。
  • 以下是我的TabItem样式：

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <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，那将是一个很大的帮助。
    预先感谢。

    相关讨论

    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。对于选项卡标题对齐，TabPanel.Margin的一个简单解决方法是为选定的选项卡使用负边距。

  • 在Chrome上设置TextBlock.Foreground，而不是在模板触发器中玩TabItem.Foreground。

    • 通常请注意，在进行测试时，我用系统颜色名称替换了您的颜色常量。另外，我也不想重新解决选项卡项目的宽度问题，而是为它们分配了静态宽度。哦，我用默认字体代替了字体资源：)

    我的完整样本：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <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>