2016-12-23 141 views
0

如何删除TabControll标题的边框? 我上传的图片为您提供:http://fs5.directupload.net/images/161223/plbcwuyv.pngWPF TabControl标题边框

<Style TargetType="{x:Type TabItem}" x:Key="tabStyle" BasedOn="{StaticResource baseStyle}"> 
     <Setter Property="Padding" Value="5" /> 
     <Setter Property="FontSize" Value="14px" /> 
     <Setter Property="FontWeight" Value="Bold" /> 
     <Setter Property="Typography.Capitals" Value="AllSmallCaps" /> 

</Style> 

标记

<TabControl x:Name="tabControl" Grid.Row="1" BorderThickness="0"> 
     <TabItem Header="TabItem" Style="{StaticResource tabStyle}"> 
      <Grid Background="white" Margin="-3" /> 
     </TabItem> 
     <TabItem Header="TabItem"> 
      <Grid Background="white"/> 
     </TabItem> 
    </TabControl> 
+2

你应该删除这个图片并告诉我们实际的代码。 – FCin

+0

您是否尝试为tabitem自定义ControlTemplate?自定义ControlTemplate将完全控制默认控件的外观样式。这[SO](http://stackoverflow.com/questions/9740263/tab-item-and-tab-control-border-style)可能会帮助你。 –

回答

0

borderThickness属性的值在默认的TabItem的ControlTemplate中是固定的。您将不得不修改模板以便能够更改它。

您可以通过在Visual Studio或Blend中以设计模式右键单击TabItem,然后选择编辑模板 - >编辑副本,将默认模板复制到您的XAML标记中。然后,您必须更改模板中边框元素的BorderThickness属性。请记住在特定条件下摆脱或更改MultiDataTriggers,以设置TabItem的“innerBorder”和“mainBorder”元素的BorderThickness。

这里的东西,应该让你开始:

<Style x:Key="FocusVisual"> 
    <Setter Property="Control.Template"> 
     <Setter.Value> 
      <ControlTemplate> 
       <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
<LinearGradientBrush x:Key="TabItem.Static.Background" EndPoint="0,1" StartPoint="0,0"> 
    <GradientStop Color="#F0F0F0" Offset="0.0"/> 
    <GradientStop Color="#E5E5E5" Offset="1.0"/> 
</LinearGradientBrush> 
<SolidColorBrush x:Key="TabItem.Static.Border" Color="#ACACAC"/> 
<LinearGradientBrush x:Key="TabItem.MouseOver.Background" EndPoint="0,1" StartPoint="0,0"> 
    <GradientStop Color="#ECF4FC" Offset="0.0"/> 
    <GradientStop Color="#DCECFC" Offset="1.0"/> 
</LinearGradientBrush> 
<SolidColorBrush x:Key="TabItem.MouseOver.Border" Color="#7EB4EA"/> 
<SolidColorBrush x:Key="TabItem.Disabled.Background" Color="#F0F0F0"/> 
<SolidColorBrush x:Key="TabItem.Disabled.Border" Color="#D9D9D9"/> 
<SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/> 
<SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF"/> 
<Style x:Key="TabItemStyle1" TargetType="{x:Type TabItem}"> 
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/> 
    <Setter Property="Foreground" Value="Black"/> 
    <Setter Property="Background" Value="{StaticResource TabItem.Static.Background}"/> 
    <Setter Property="BorderBrush" Value="{StaticResource TabItem.Static.Border}"/> 
    <Setter Property="Margin" Value="0"/> 
    <Setter Property="Padding" Value="6,2,6,2"/> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Grid x:Name="templateRoot" SnapsToDevicePixels="true"> 
        <Border x:Name="mainBorder" BorderBrush="{TemplateBinding BorderBrush}" 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> 
       <ControlTemplate.Triggers> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/> 
         <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/> 
         <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/> 
         <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/> 
         <!--<Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/> 
           <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/> 
         <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/> 
         <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/> 
         <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/> 
         <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/> 
         <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/> 
         <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/> 
         <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/> 
         <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/> 
         </MultiDataTrigger.Conditions> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Panel.ZIndex" Value="1"/> 
         <Setter Property="Margin" Value="-2,-2,0,-2"/> 
         <!--<Setter Property="Opacity" TargetName="innerBorder" Value="1"/> 
           <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/> 
         </MultiDataTrigger.Conditions> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Panel.ZIndex" Value="1"/> 
         <Setter Property="Margin" Value="-2,0,-2,-2"/> 
         <!--<Setter Property="Opacity" TargetName="innerBorder" Value="1"/> 
           <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/> 
         </MultiDataTrigger.Conditions> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Panel.ZIndex" Value="1"/> 
         <Setter Property="Margin" Value="0,-2,-2,-2"/> 
         <!--<Setter Property="Opacity" TargetName="innerBorder" Value="1"/> 
           <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/> 
         </MultiDataTrigger.Conditions> 
         <!--<Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>--> 
        </MultiDataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/> 
          <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Panel.ZIndex" Value="1"/> 
         <Setter Property="Margin" Value="-2,-2,-2,0"/> 
         <!-- <Setter Property="Opacity" TargetName="innerBorder" Value="1"/> 
           <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/> 
           <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>--> 
        </MultiDataTrigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    </Style> 

恐怕也摆脱了边框的,而不是修改控制模板没有更简单的方法。