0

I want to set custom height for tab items in tab control.

This is the code I tried.

Here I am providing custom height value for tab item1. For other tab items i didn't provide any height value.

<Grid Name="grid1" Height="auto" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Cyan">
    <TabControl Name="tabControl1" Height="auto" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" IsEnabled="True" Background="White" SelectionChanged="tabControl1_SelectionChanged_1">
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" CornerRadius="6,6,0,0"  MinHeight="35" >
                                <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="20,10"
                                    />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Border" Property="Background" Value="White" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="False">
                                    <Setter TargetName="Border" Property="Background" Value="Cyan" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabItem Header="HOME" Name="tabItem1">
            <Grid  />
        </TabItem>
        <TabItem Header="DATA ENTRY" Name="tabItem2" >
            <Grid />
        </TabItem>
        <TabItem Header="MANIPULATION" Name="tabItem3" >
            <Grid />
        </TabItem>
        <TabItem Header="REGISTER" Name="tabItem4" >
            <Grid />
        </TabItem>
        <TabItem Header="ADMIN" Name="tabItem5" >
            <Grid />
        </TabItem>
    </TabControl>
</Grid>

After running the software, when I click on tab item1, border line is produced under the tab where as in other tab items there is no line since I didn't provide custom height value

I tried searching in google, I couldn't find a correct solution.

How do I get rid of that border line after changing the height of tab item?

I am new to WPF, please help me.

1 Answer 1

0

Set the MinHeight rather than the Height. The tab control uses triggers to change the size when selected. By defining a height, it doesn't change the size like it wants to in order to appear as if it is removing the border. Unless you want to re-template the entire control, this is the quickest way that I can think of.

<TabControl Name="tabControl1" Height="auto" Width="auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0"  >
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="MinHeight" Value="35" />
            </Style>
        </TabControl.Resources>
        <TabItem Header="HOME" Name="tabItem1" >
            <Grid />
        </TabItem>
        <TabItem Header="DATA ENTRY" Name="tabItem2" >
            <Grid />
        </TabItem>
        <TabItem Header="MANIPULATION" Name="tabItem3" >
            <Grid />
        </TabItem>
        <TabItem Header="REGISTER" Name="tabItem4" >
            <Grid />
        </TabItem>
        <TabItem Header="ADMIN" Name="tabItem5" >
            <Grid />
        </TabItem>
    </TabControl>

[EDIT] See below for a full-blown re-templating start point for you. I commented what I changed. The idea that I generally follow (be it good or bad) is when I begin to customize a control, if it is anything besides a basic change, I will create a custom template. If you have access to Expression Blend, you can easily get the base templates and modify from there. Below is the base template for the tabcontrol as well as the tab item. This helps keep the functionality you expect from the stock control and add your own flourish or design, etc. If the template is global, don't use style names, just define the type that it is applied to. In a real app, this style would be in a resource dictionary instead of the mainpage resources, but this serves the purpose of the example. Good luck! I hope this helps

<Window.Resources>
    <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
    <Style TargetType="{x:Type TabControl}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Padding" Value="4,4,4,4"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
        <Setter Property="Background" Value="#F9F9F9"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid 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" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                        <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 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"/>
                        </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="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="TabItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="3,3,3,1" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F3F3F3" Offset="0"/>
        <GradientStop Color="#EBEBEB" Offset="0.5"/>
        <GradientStop Color="#DDDDDD" Offset="0.5"/>
        <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#EAF6FD" Offset="0.15"/>
        <GradientStop Color="#D9F0FC" Offset=".5"/>
        <GradientStop Color="#BEE6FD" Offset=".5"/>
        <GradientStop Color="#A7D9F5" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
    <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
    <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
    <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Padding" Value="6,1,6,1"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
        <!-- replaced base background for tab colors - original in comment
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>-->
        <Setter Property="Background" Value="Cyan"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid SnapsToDevicePixels="true">
                        <!--Updated this border to give min height and corner radius-->
                        <Border x:Name="Bd" CornerRadius="6,6,0,0"  MinHeight="35" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                            <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <!--Updated this to give your white background when selected - left original intact for you to see
                                another alternative would be to modify the TabItemSelectedBackground style itself
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>-->
                            <Setter Property="Background" TargetName="Bd" Value="White"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="false"/>
                                <Condition Property="IsMouseOver" Value="true"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
                        </MultiTrigger>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Top"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-2,-2,-1"/>
                            <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Bottom"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-1,-2,-2"/>
                            <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Left"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-2,-1,-2"/>
                            <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Right"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-1,-2,-2,-2"/>
                            <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <TabControl Name="tabControl1" Height="auto" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" IsEnabled="True" Background="White" >
        <TabItem Header="HOME" Name="tabItem1" >
        <Grid  />
    </TabItem>
    <TabItem Header="DATA ENTRY" Name="tabItem2" >
        <Grid />
    </TabItem>
    <TabItem Header="MANIPULATION" Name="tabItem3" >
        <Grid />
    </TabItem>
    <TabItem Header="REGISTER" Name="tabItem4" >
        <Grid />
    </TabItem>
    <TabItem Header="ADMIN" Name="tabItem5" >
        <Grid />
    </TabItem>
    </TabControl>
</Grid>
8
  • But after applying a custom style to a tab item. again the border line occurs under the selected tab. What should I do? Jan 27, 2015 at 4:30
  • I have edited the code above. Check the styles I applied for the tab item. I gave MinHeight value for all tab items. But the border line occurs. What should I do now? Jan 27, 2015 at 5:06
  • Thanks Bro. Works like a charm. How did you open the base template for the control? Can you teach me? Please Jan 27, 2015 at 17:44
  • You used to be able to find them on the internet, but MSDN has samples of editing the templates now, so it is not exactly what comes out of the box. I used Expression Blend - you right-click the object and select "Edit template" --> "Edit a copy" and it will start with the base default style. This can get many layers deep depending on the control you're working on. I had to do both the tabcontrol AND the tabcontrolitem templates. "had to" is arguable in this case, but I wanted to be thorough.
    – Mark W
    Jan 27, 2015 at 19:07
  • I couldn't able to find expression blend for VS2010. Is it available free to download and use? Jan 28, 2015 at 5:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.