Home > Software design >  Removing border around TabItems in TabControl
Removing border around TabItems in TabControl

Time:03-10

I'm trying to style a WPF TabControl, so the 2 pixel border around the TabItems is removed (see the red area around the TabItems in the attached screenshot):

tab control

<TabControl TabStripPlacement="Left" SelectedIndex="1">

    <TabControl.Resources>
        <Style TargetType="{x:Type Grid}">
            <Setter Property="Background" Value="Red" />
            <Setter Property="Margin" Value="0" />
        </Style>
        <Style TargetType="{x:Type TabPanel}">
            <Setter Property="Margin" Value="0" />
        </Style>
        <Style TargetType="{x:Type TabControl}">
            <Setter Property="Background" Value="Black"/>
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Padding" Value="0" />
        </Style>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Background" Value="Pink"/>
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="BorderThickness" Value="5"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border x:Name="OuterBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                            <ContentPresenter ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>

    <TabItem Width="80" Height="40" Header="Text" >
        <TextBlock Text="1 Future Content..." VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Pink" Foreground="Black" />
    </TabItem>

    <TabItem Width="80" Height="40" Header="Text" >
        <TextBlock Text="2 Future Content..." VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Pink" Foreground="Black" />
    </TabItem>

    <TabItem Width="80" Height="40" Header="Text" >
        <TextBlock Text="3 Future Content..." VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Pink" Foreground="Black" />
    </TabItem>

</TabControl>

Does anyone know what to style a TabControl so the TabItems fills the "tab item areas"? I.e., without 2 pixel border?

Or, a different way to achieve the same look?

CodePudding user response:

There are some hardcoded margins for the TabPanel in the default template of the TabControl that you need to remove (see the last <Setter> in the <Trigger Property="TabStripPlacement" Value="Left"> element of the default template below):

<Style TargetType="{x:Type TabControl}">
    <Setter Property="Background" Value="Black"/>
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="ColumnDefinition0"/>
                        <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                        <RowDefinition x:Name="RowDefinition1" Height="*"/>
                    </Grid.RowDefinitions>
                    <TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                    <Border x:Name="contentPanel" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="TabStripPlacement" Value="Bottom">
                        <Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
                        <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                        <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                        <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                        <Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
                    </Trigger>
                    <Trigger Property="TabStripPlacement" Value="Left">
                        <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                        <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                        <Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/>
                        <Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/>
                        <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                        <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                        <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                        <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                        <!--<Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/>-->
                        <Setter Property="Margin" TargetName="headerPanel" Value="0"/>
                    </Trigger>
                    <Trigger Property="TabStripPlacement" Value="Right">
                        <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                        <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                        <Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/>
                        <Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/>
                        <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                        <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                        <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                        <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                        <Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,2"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
  • Related