logo标签列表

去掉选项卡控件中该选项卡下方的线。

wpftabcontrolborder
6

使用xaml（wpf）时，我想要去掉选项卡控件下面的线，如下图“Illustration A”所示，使其看起来像“Illustration B”：

Illustration A

http://www.arulerforwindows.com/images/peskylinea.png

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

提前感谢您的帮助，

罗布

我可能漏掉了什么，但是带有tabitem的默认tabcontrol在你的插图中不会有那条线。你是在说未被选中的标签吗？请参见http://blog.paranoidferret.com/index.php/2008/01/18/the-wpf-tab-control-inside-and-out/，那里的图片没有显示出该线。 - Jab
我也看到了。如果你仔细观察前几个图示，选定的选项卡下面没有线条，但是在定义tabitem之后的最后几个图示下有线条。 - Rob
目前，我正在采用一种解决方法，即将选项卡控件的顶部边框关闭，并在选项卡右侧边缘与选项卡控件容器右侧边缘之间添加一个1像素宽的矩形。肯定有更好的方法。 - Rob
6个回答
2

我曾经遇到同样的问题。注意到这条线仅针对设置高度的选项卡绘制（只为一个选项卡设置了高度，自动所有选项卡都具有相同的高度）。所以我添加了一个新的TabItem，其width=0，并指定了height，然后从所有其他选项卡中删除了height，这对我很有用。

2

使用ShowMeTheTemplate，我发现样式的一部分在TabItem上。如果您覆盖它，则可能会对默认控件模板中的更多内容感兴趣。

<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelected">
      <Condition.Value>
        <s:Boolean>True</s:Boolean>
      </Condition.Value>
    </Condition>
    <Condition Property="TabItem.TabStripPlacement" Value="{x:Static Dock.Top}" />
  </MultiTrigger.Conditions>
  <Setter Property="FrameworkElement.Margin">
    <Setter.Value>
      <Thickness>-2,-2,-2,-1</Thickness>
    </Setter.Value>
  </Setter>
</MultiTrigger>
嗯，似乎我无法让它正常工作 - 我将其放入TabControl代码中，但似乎没有什么效果。 - Rob
TabItem的模板中还有很多内容。使用我列出的程序，查看所有使其消失的操作。这个特定的部分适用于简单的设置。 - Jab
1

这个很好用。

<Style TargetType="TabItem">
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border x:Name="Chrome"
                        BorderThickness="1,1,1,0" 
                        BorderBrush="Black" 
                        Background="{TemplateBinding Background}" 
                        Padding="2,2,2,1" Margin="1,1,1,0">
                    <ContentPresenter ContentSource="Header" 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Setter TargetName="Chrome" Property="Margin" Value="1,1,1,-1"/>
                        <Setter TargetName="Chrome" Property="Padding" Value="2"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

只需更改所选选项卡项目的边距和填充即可。

1
   <Style TargetType="TabControl">
        <Setter Property="Template">
            <Setter.Value>

                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <TabPanel x:Name="HeaderPanel"
                              Grid.Row="0"
                              Panel.ZIndex="1"
                              Margin="0,0,0,-1"
                              IsItemsHost="True"
                              KeyboardNavigation.TabIndex="1"
                              Background="Transparent" />

                        <Border x:Name="Border"
                            Grid.Row="1"
                            BorderThickness="1"
                            KeyboardNavigation.TabNavigation="Local"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            KeyboardNavigation.TabIndex="2">

                            <Border.Background>
                                <SolidColorBrush Color="White"/>
                            </Border.Background>

                            <Border.BorderBrush>
                                <SolidColorBrush Color="White"/>
                            </Border.BorderBrush>

                            <ContentPresenter x:Name="PART_SelectedContentHost"
                                          Margin="0"
                                          ContentSource="SelectedContent" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        </Style>
0
调整边距和填充对我来说效果不佳。在选项卡控件边框上绘制白色（背景颜色）边框就解决了这个问题：
<ControlTemplate TargetType="{x:Type TabItem}">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0 0 7 0">
        <Border x:Name="tabContentBorder" BorderThickness="2 2 2 0" Background="AliceBlue" BorderBrush="AliceBlue" CornerRadius="6 6 0 0">
        <ContentPresenter HorizontalAlignment="Center" x:Name="Content" VerticalAlignment="Center" ContentSource="Header" Margin="7 3 7 3"/>
    </Border>
    <Border  x:Name="tabBottomBorder"  BorderBrush="White" BorderThickness="1" Visibility="Hidden" Margin="2 0 2 -2" HorizontalAlignment="Stretch"></Border>
</StackPanel>
<ControlTemplate.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Setter TargetName="tabContentBorder" Property="Background" Value="White" />
        <Setter TargetName="tabBottomBorder" Property="Visibility" Value="Visible"/>
    </Trigger>
</ControlTemplate.Triggers>

0

另一种非常简单的方法是添加一个零宽度的额外选项卡，您可以在其中设置所需的高度，甚至只需将其可见性隐藏。然后，您可以设置选项卡的高度，而不会出现在设置高度的选项卡上的烦人的水平线。

            <TabItem Header="" Width="0" Height="30" Visibility="Hidden" />
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接