删除选项卡控件的该选项卡下的行
使用 xaml ( wpf ),我试图删除选项卡控件下的线条,如下面的“图 A”所示,以便它最终看起来像“图 B”:图
A
http://www.arulerforwindows.com/images/peskylinea.png
插图 B
http://www.arulerforwindows.com/images/peskylineb.png
当我定义选项卡项时,该线会显示,但似乎附加到选项卡控件,结果发生了变化选项卡项或选项卡控件中的一个或两个上的 BorderThickness 似乎没有产生所需的结果。
我需要在透明背景上执行此操作,其中实心填充矩形不能用于掩盖问题。
这是代码:
<!--Tab Control-->
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,0,-1" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />
<Border
Name="Border"
Grid.Row="1"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource DefaultSystemBrush}"
BorderThickness="1,1,1,1"
Margin="0,0,0,0"
CornerRadius="4"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
<Setter Property="BorderBrush" TargetName="Border" Value="{StaticResource DisabledBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Background="Transparent" BorderBrush="{StaticResource DefaultSystemBrush}" BorderThickness="1,1,1,1" CornerRadius="6,6,0,0">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="Transparent" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="LightGray" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
提前致谢,
罗布
Using xaml ( wpf ) I'm trying to get rid of the line under the tab control as show in the "Illustration A" below so that it ends up looking like "Illustration B":
Illustration A
http://www.arulerforwindows.com/images/peskylinea.png
Illustration B
http://www.arulerforwindows.com/images/peskylineb.png
The line shows up when I define the Tab Item but appears to be attached to the Tab Control, as a result changing BorderThickness on either or both the Tab Item or Tab Control doesn't seem to yield the desired result.
I need to do this over a transparent background where a solid fill rectangle can't be used to mask the problem.
Here's the code:
<!--Tab Control-->
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,0,-1" IsItemsHost="True" KeyboardNavigation.TabIndex="1" Background="Transparent" />
<Border
Name="Border"
Grid.Row="1"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource DefaultSystemBrush}"
BorderThickness="1,1,1,1"
Margin="0,0,0,0"
CornerRadius="4"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
<Setter Property="BorderBrush" TargetName="Border" Value="{StaticResource DisabledBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Background="Transparent" BorderBrush="{StaticResource DefaultSystemBrush}" BorderThickness="1,1,1,1" CornerRadius="6,6,0,0">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="Transparent" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="LightGray" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thanks in advance,
Rob
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
使用 ShowMeTheTemplate 我发现了部分样式,它位于 TabItem 上。 如果您覆盖默认控件模板,您可能有兴趣设置更多内容。
Using ShowMeTheTemplate I found out part of the style, it's on the TabItem. There is a lot more in the default control template you may be interested in setting up if you override it.
有同样的问题。 请注意,这条线仅针对设置了高度的选项卡绘制(仅针对一个选项卡进行设置,并且所有选项卡都会自动保存高度)。 因此,我添加了一个新的
TabItem
,其中指定了width=0
和height
,并从所有其他项目中删除了height
选项卡,这对我来说是个窍门。Had the same problem. Noticed that this line is drawn only for the tab with height set (it is set for only one tab and automatically all the tabs have the save height). So I've added a new
TabItem
withwidth=0
andheight
specified and removedheight
from all the other tabs and that made the trick for me.这很好用。
只需更改所选选项卡项目上的边距和填充即可。
This works just fine.
Just change Margin and Padding on selected Tab item.
调整边距和填充对我来说效果不佳。 然而,在选项卡控件边框上绘制白色(背景色)边框就可以解决问题:
Adjusting the margins and padding did not work well for me. Drawing a white (background color) border over the tab control border did the trick however:
另一种非常简单的方法是仅添加一个宽度为零的额外选项卡,您可以将高度设置为您想要的高度,甚至只是将其可见性隐藏。 然后,您可以设置选项卡高度,而无需在设置高度的选项卡上出现烦人的水平线。
Another very simple way is to just add one extra tab with zero width where you can set the height to what you want, or even just make it's visibility Hidden. Then you get to set the tab height without the annoying horizontal line on the tab where you set the height.