如何删除每个 TabItem 旁边的白线? [英] How do I remove the white lines beside each TabItem?
问题描述
我最近开始为一个项目学习 WPF.我一直在为 TabControl
设计样式以适应我正在使用的组件库的颜色,但是这些奇怪的白线出现在每个 TabItem
旁边,但仅在项目之间或在第一项之前.
I've recently taken to learning WPF for a project. I've been styling a TabControl
to fit the colors of a component library I'm using, but these strange white lines have appeared beside each TabItem
, but only between items or before the first item.
它们是什么,我该如何摆脱它们?我尝试使用 Visual Studio 中提供的检查器,但它们不可选择,这让我相信它们是 TabItem
的某些内部部分,但我在这一点上被卡住了.
What are they, and how can I get rid of them? I tried using the inspector provided in Visual Studio but they aren't selectable, which leads me to believe they are some internal part of TabItem
, but I'm stuck at this point.
用法:
<TabControl Grid.Row="1"
TabStripPlacement="Bottom"
BorderBrush="#00000000"
BorderThickness="0"
Resources="{StaticResource TabControlResources}">
<TabItem Header="Story">
<local:Workspace />
</TabItem>
<TabItem Header="Test">
Test Tab
</TabItem>
<TabItem Header="Test">
Test Tab 2
</TabItem>
</TabControl>
和样式定义:
<ResourceDictionary x:Key="TabControlResources">
<Style TargetType="TabControl">
<Setter Property="Background"
Value="{StaticResource Fluent.Ribbon.Brushes.RibbonTabControl.Background}"/>
<Setter Property="Foreground"
Value="{StaticResource Fluent.Ribbon.Brushes.IdealForegroundColorBrush}" />
</Style>
<Style TargetType="TabItem">
<Setter Property="Foreground"
Value="{StaticResource Fluent.Ribbon.Brushes.IdealForegroundColorBrush}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background"
Value="{StaticResource Fluent.Ribbon.Brushes.RibbonTabControl.Background}" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Background"
Value="{StaticResource Fluent.Ribbon.Brushes.RibbonTabItem.Active.Background}" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
推荐答案
那些是 TabItem 的一部分.您可以在资源中的选项卡项样式中添加 setter 来完成这项工作:
Those are part of the TabItem. You can add the setter in the tab item style within your resource which should do the job:
<Style TargetType="{x:Type TabItem}">
<Setter Property="BorderBrush" Value="Red"/>
</Style>
结果是这样的:
或者:
您可以完全删除它,但不幸的是它是模板的一部分,必须修改模板:
You can completely remove it, but unfortunately it is part of the template and the template has to be modified:
在 Visual Studio 设计器中,右键单击选项卡项之一,然后转到编辑模板",然后转到编辑副本".
In Visual studio designer right click on one of the tab items and go to "Edit template" then "Edit a copy".
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Border x:Name="mainBorder" BorderBrush="Red" BorderThickness="0" Background="{TemplateBinding Background}" Margin="0">
<Border x:Name="innerBorder" BorderBrush="{StaticResource TabItem.Selected.Border}" BorderThickness="0" Background="{StaticResource TabItem.Selected.Background}" Margin="-1" Opacity="0"/>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
</Grid>
在那里你必须将mainBorder
和innerBoarder
的BorderThichness
修改为BorderThickness="0"
In there you have to modify the BorderThichness
of mainBorder
and innerBoarder
to BorderThickness="0"
结果:
这篇关于如何删除每个 TabItem 旁边的白线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!