Question

我正在尝试为TabControl实现样式以及TabItem，如下图像：

风格应该在下方显示：

列表项
TabControl的白色背景和带Dropshadow效果的选定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

风格应该在下方显示：


列出项目

TabControl的白色背景和带Dropshadow效果的选定TabItem。

如果未选择任何TabItem，则TabItem文本颜色应变为灰色。

我想这只是一个错字？
将TabControl.Background设置为白色，在TabControl上设置投影效果，将TabControl.BorderThickness设置为零，将TabItem.Background和TabItem.BorderBrush设置为白色，不要改变TabItem.BorderThickness。对于选项卡标题对齐，TabPanel.Margin的一个简单修复是使用选定标签的负边距。
在TextBlock.Foreground上设置Chrome，而不是在模板触发器中使用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>

TabControl和TabItem与Dropshadow效果WPF

1 个答案: