Home > Enterprise >  C# WPF: How to reduce thickness of lines between tabs
C# WPF: How to reduce thickness of lines between tabs

Time:10-12

I want a mostly unmodified tabcontrol that matches the style of the program I'm creating a plugin for. My issue is that, by default, the tabcontrol tabs seem to have a border that sits inside the extents of the tab, which create a double border where the inactive tabs meet. I want this border to be a single line, the same thickness as the at the top of the tab (I am using a top, right alignment).

Unfortunately, the words I am using to describe this in Google and here are making it hard to figure out what property/attribute I need to alter. I have tried using Margin="-1,0,0,0" on all but the first tab to "squeeze" them together, but this inadvertently forced all but the first tab to not enlarge when active/selected/pressed.

This is the tabcontrol, largely unmodified with the double border between two inactive tabs that seems to be default appearance:

enter image description here

This is the build with the Margin set to the above values and the desired appearance for the border between two inactive tabs:

enter image description here

And this is the issue using the Margin setting above causes:

enter image description here

Any help with this would be much appreciated! It's likely a very simple fix, but I'm not too familiar with tabcontrols and looking through the properties hasn't given me the right insight to solve it on my own.

CodePudding user response:

The only way to change the BorderThickness of the TabItem's Header is to edit its ControlTemplate. In the design, right click a header and select Edit Template > Edit a Copy. You must edit the MultiDataTrigger that changes the BorderThickness for the TabItem's mainBorder when IsSelected is false and TapStripPlacement is Top. Locate this code:

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

Change the value of the mainBorder's BorderThickness to "0,1,1,0". You can then apply the style to each TabItem except the first.

  • Related