【问题标题】:TabControl and TabItem with Dropshadow effect WPF带有阴影效果 WPF 的 TabControl 和 TabItem
【发布时间】:2017-08-28 07:53:47
【问题描述】:

我正在尝试为 TabControl 和 TabItem 实现样式,如下图所示:

样式应该使以下内容可见:

  1. 列表项
  2. TabControl 的白色背景和具有阴影效果的选定 TabItem。
  3. 当未选择任何 TabItem 时,TabItem 文本颜色应变为灰色。

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

  1. 能够使用 TabSizeConverter 转换器划分 TabControl 的宽度以容纳大小相等的 TabItem 项。
  2. 能够更改背景以及 TabControl 和 TabItems。但无法实现Dropshadow效果。
  3. 下面是我的 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


【解决方案1】:

样式应该使以下内容可见:

  1. 列表项
  2. TabControl 的白色背景和具有阴影效果的选定 TabItem。
  3. 当未选择任何 TabItem 时,TabItem 文本颜色应变为灰色。
  1. 我想这只是一个错字?

  2. TabControl.Background设置为白色,在TabControl上设置阴影效果,将TabControl.BorderThickness设置为零,将TabItem.BackgroundTabItem.BorderBrush设置为白色,不要更改TabItem.BorderThickness。对于选项卡标题对齐,TabPanel.Margin 的一个简单解决方法是对选定选项卡使用负边距。

  3. Chrome 上设置TextBlock.Foreground,而不是在模板触发器中使用TabItem.Foreground

请注意,我将您的颜色常量替换为系统颜色名称以进行测试。此外,我没有费心重新解决选项卡项宽度问题,而是为它们分配了静态宽度。哦,我使用默认字体而不是您的字体资源:)

我的完整示例:

<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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-11-02
    • 2018-04-21
    • 2012-09-07
    • 1970-01-01
    • 2018-02-12
    • 2011-03-31
    • 2021-03-30
    • 1970-01-01
    相关资源
    最近更新 更多