How to make TabItems fit the app window & some other design changes..

Question

How to make TabItems fit the app window & some other design changes..

Boom Ba 166

How can I make the TabItems of a TabControl Fit the entire window except for the header even when maximized or when in normal mode?

Also, how do I remove the thin line between the header and page in TabItems(shown by arrow in attached image) so that it looks seamless when I click on any of the TabItems?

Here is my XAML code:

<Window x:Class="TabControlDemo.Window1"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="TabControlDemo" Height="480" Width="960"  
>  
	<Window.Resources>  
		  
		<!-- Colors -->  
		<SolidColorBrush x:Key="PrimaryBG" Color="#ad00ad"/>  
		<SolidColorBrush x:Key="Blueish" Color="#5252ff"/>  
		<SolidColorBrush x:Key="Greenish" Color="#005757"/>  
		<SolidColorBrush x:Key="Blackish" Color="#2e2e00"/>  
		  
		<!-- TabControl Style -->  
		<Style x:Key="{x:Type TabControl}" TargetType="{x:Type TabControl}">  
			<Setter Property="BorderThickness" Value="0"/>  
			<Setter Property="BorderBrush" Value="Transparent"/>  
			<Setter Property="Background" Value="Transparent"/>  
			<Setter Property="Template">  
				<Setter.Value>  
					<ControlTemplate TargetType="TabControl">  
						<Grid>  
							<Grid.RowDefinitions>  
								<RowDefinition Height="Auto"/>  
								<RowDefinition Height="*"/>  
							</Grid.RowDefinitions>  
							<Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1">  
								<Border BorderThickness="{TemplateBinding BorderThickness}"  
								        BorderBrush="{TemplateBinding BorderBrush}">  
									<Border Background="{TemplateBinding Background}">  
										<ContentPresenter ContentSource="SelectedContent"/>  
									</Border>  
								</Border>  
							</Border>  
							<TabPanel Grid.Row="0" IsItemsHost="true"/>  
						</Grid>  
					</ControlTemplate>  
				</Setter.Value>  
			</Setter>  
		</Style>  
		  
		<!-- TabItem Style -->  
		<Style TargetType="TabItem">  
			<Setter Property="BorderThickness" Value="0"/>  
			<Setter Property="BorderBrush" Value="Transparent"/>  
			<Setter Property="Background" Value="Transparent"/>  
			<Setter Property="VerticalContentAlignment" Value="Center"/>  
			<Setter Property="HorizontalContentAlignment" Value="Center"/>  
			<Setter Property="Template">  
				<Setter.Value>  
					<ControlTemplate TargetType="{x:Type TabItem}">  
						<Border>  
							<Grid>  
								<Grid>  
									<Border CornerRadius="3,3,0,0" Background="{TemplateBinding Background}"  
									        BorderBrush="{TemplateBinding BorderBrush}"  
									        BorderThickness="{TemplateBinding BorderThickness}"/>  
								</Grid>  
								<Border BorderThickness="{TemplateBinding BorderThickness}"  
								        Padding="{TemplateBinding Padding}">  
									<ContentPresenter ContentSource="Header"  
										HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
										VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>  
								</Border>  
							</Grid>  
						</Border>  
					</ControlTemplate>  
				</Setter.Value>  
			</Setter>  
		</Style>  
	</Window.Resources>  
	  
	  
	<Grid Background="{DynamicResource PrimaryBG}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">  
		<TabControl Height="238" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Margin="0,0,0,0"  
		            Name="tabControl1" VerticalAlignment="Top" Width="600">  
			<TabItem Header="Dashboard" Name="tabItem1" Background="{DynamicResource Blueish}" Foreground="White"  
			         HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180"  
			         FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">  
				<Border Background="#5252ff" Margin="0,0,0,0" Padding="0,0,0,0">  
					<TextBox Width="200" Height="25"/>  
				</Border>  
			</TabItem>  
			<TabItem Header="Invoicing" Name="tabItem2" Background="{DynamicResource Greenish}" Foreground="White"  
			         HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180"  
			         FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">  
				<Border Background="#005757" Margin="0,0,0,0" Padding="0,0,0,0">  
					<Button Width="80" Height="25"/>  
				</Border>  
			</TabItem>  
			<TabItem Header="Transactions" Name="tabItem3" Background="{DynamicResource Blackish}" Foreground="White"  
			         HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180"  
			         FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">  
				<Border Background="#2e2e00" Margin="0,0,0,0" Padding="0,0,0,0">  
					<ComboBox Width="300" Height="25"/>  
				</Border>  
			</TabItem>  
		</TabControl>  
	</Grid>  
</Window>

One last thing, how do I change the backgroud color of the Tabitem header when clicked on or selected in XAML (if that is possible, I'm not sure).

Thanks

Accepted answer

0 additional answers

Your answer

Answer 1

I made the following modifications to your code:
1.Add ControlTemplate.Triggers to change the background color of the selected TabItem.
2.Bind the width and height of the Border to the ActualWidth and Actual height of the Grid so that the TabControl fits the window. The Margin of the TabControl is reset to 0.

    <TabControl HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"              **Margin="0,0,0,0"**  
                              Name="tabControl1" VerticalAlignment="Top" >  
                    <TabItem Header="Dashboard" Name="tabItem1" Background="{DynamicResource Blueish}" Foreground="White"  
                               HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"  
                               FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">  
                        <Border Background="#5252ff" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center"  VerticalAlignment="Stretch"  
 Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}">

3.Centering the TabItem title requires the TabPanel to be centered in the style of the TabControl.

<TabPanel Grid.Row="0" IsItemsHost="true" HorizontalAlignment="Center"/>

4.The background of the border in the TabItem template must be non-empty. Otherwise the border is invisible for mouse interaction. Transparent can also be.

<Border Background="Transparent" >

5.You could create any shape by Path . You can update the Grid in the TabItem template as follows.

<Grid x:Name="g">  
                                    <Path  Fill="{TemplateBinding Background}" Margin="0,0,0,-1"   
                                               Data="M 20,40 L 0,40 0,40 C 4,40 10,36 10,30 L 10,10 C 10,0 16,0 20,0 L 155,0  C 165,0 173,0 ,175,6 L175,30 C 175,30 175,38 182,40 Z" />  
                                </Grid>

Then modify the Margin of TabItem to make them closer.

   <TabItem Header="Invoicing" Name="tabItem2"  Background="{DynamicResource Greenish}" Foreground="White"  
                               HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"  
                               FontFamily="Leelawadee UI" FontSize="20" Margin="-25,0,0,0" Padding="0,0,0,0">

MainWindow.xaml:

<Window.Resources>  
        <SolidColorBrush x:Key="PrimaryBG" Color="#ad00ad"/>  
        <SolidColorBrush x:Key="Blueish" Color="#5252ff"/>  
        <SolidColorBrush x:Key="Greenish" Color="#005757"/>  
        <SolidColorBrush x:Key="Blackish" Color="#2e2e00"/>  
        <Style x:Key="{x:Type TabControl}" TargetType="{x:Type TabControl}">  
            <Setter Property="BorderThickness" Value="0"/>  
            <Setter Property="BorderBrush" Value="Transparent"/>  
            <Setter Property="Background" Value="Transparent"/>  
            <Setter Property="Template">  
                <Setter.Value>  
                    <ControlTemplate TargetType="TabControl">  
                        <Grid>  
                            <Grid.RowDefinitions>  
                                <RowDefinition Height="Auto"/>  
                                <RowDefinition Height="*"/>  
                            </Grid.RowDefinitions>  
                            <Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1">  
                                <Border BorderThickness="{TemplateBinding BorderThickness}"  
                                          BorderBrush="{TemplateBinding BorderBrush}">  
                                    <Border Background="{TemplateBinding Background}">  
                                        <ContentPresenter ContentSource="SelectedContent"/>  
                                    </Border>  
                                </Border>  
                            </Border>  
                            <TabPanel Grid.Row="0" IsItemsHost="true" HorizontalAlignment="Center"/>  
                        </Grid>  
                    </ControlTemplate>  
                </Setter.Value>  
            </Setter>  
        </Style>  
        <Style TargetType="TabItem">  
            <Setter Property="BorderThickness" Value="0"/>  
            <Setter Property="BorderBrush" Value="Transparent"/>  
            <Setter Property="Background" Value="Transparent"/>  
            <Setter Property="VerticalContentAlignment" Value="Center"/>  
            <Setter Property="HorizontalContentAlignment" Value="Center"/>  
            <Setter Property="Template">  
                <Setter.Value>  
                    <ControlTemplate TargetType="{x:Type TabItem}">  
                        <!--In order to click on the blank part of the TabItem can be successfully selected-->  
                        <Border Background="Transparent" >  
                            <Grid>  
                                <Grid x:Name="g">  
                                    <Path  Fill="{TemplateBinding Background}" Margin="0,0,0,-1"   
                                               Data="M 20,40 L 0,40 0,40 C 4,40 10,36 10,30 L 10,10 C 10,0 16,0 20,0 L 155,0  C 165,0 173,0 ,175,6 L175,30 C 175,30 175,38 182,40 Z" />  
                                </Grid>  
                                <Border  BorderThickness="{TemplateBinding BorderThickness}"  
                                          Padding="{TemplateBinding Padding}">  
                                    <ContentPresenter ContentSource="Header"  
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>  
                                </Border>  
                            </Grid>  
                        </Border>  
                        <!--Add ControlTemplate.Triggers to change the background color of the selected TabItem.-->  
                        <ControlTemplate.Triggers>  
                            <Trigger Property="IsSelected" Value="false">  
                                <Setter Property="Visibility" TargetName="g" Value="Hidden"/>  
                            </Trigger>  
                        </ControlTemplate.Triggers>  
                    </ControlTemplate>  
                </Setter.Value>  
            </Setter>  
        </Style>  
    </Window.Resources>  
    <Grid Background="{DynamicResource PrimaryBG}" Name="grid" >  
        <TabControl HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"  Margin="0,0,0,0"  
                      Name="tabControl1" VerticalAlignment="Top" >  
            <TabItem Header="Dashboard" Name="tabItem1" Background="{DynamicResource Blueish}" Foreground="White"  
                       HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"  
                       FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">  
                <Border Background="#5252ff" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center"  VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}">  
                    <StackPanel Margin="10">  
                        <TextBox Width="200" Height="25"/>  
                        <TextBox Width="200" Height="25"/>  
                    </StackPanel>  
                </Border>  
            </TabItem>  
            <TabItem Header="Invoicing" Name="tabItem2"  Background="{DynamicResource Greenish}" Foreground="White"  
                       HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"  
                       FontFamily="Leelawadee UI" FontSize="20" Margin="-25,0,0,0" Padding="0,0,0,0">  
                <Border Background="#005757" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}"  Height="{Binding ElementName=grid, Path=ActualHeight}" >  
                    <Button Width="80" Height="25"/>  
                </Border>  
            </TabItem>  
            <TabItem Header="Transactions" Name="tabItem3" Background="{DynamicResource Blackish}" Foreground="White"  
                       HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"  
                       FontFamily="Leelawadee UI" FontSize="20" Margin="-45,0,0,0" Padding="0,0,0,0" >  
                <Border Background="#2e2e00" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}" >  
                    <ComboBox Width="300" Height="25"/>  
                </Border>  
            </TabItem>  
        </TabControl>  

    </Grid>

The result:

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Boom Ba 166 Reputation points

2022-02-07T13:52:22.833+00:00

Thanks for your post. I think you misunderstood a few things.

TabItem headers should be aligned in top-center position (in my original post you can see that), in your demo code it is still left based.

The background color of the selected TabItem should match its page (something like)

3) Also, a little animation on button click on TabItem would be nice, can you suggest/show one ?

Thanks again for your help :)
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2022-02-08T07:07:36.697+00:00

Hi,@Boom Ba . I updated my answer, you could check it out.
Boom Ba 166 Reputation points

2022-02-08T07:55:54.547+00:00

But now the tabitem page background doesn't cover the full window.
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2022-02-08T09:07:50.517+00:00

Hi,@Boom Ba . I updated my answer, you could check it out. it should work now.
Boom Ba 166 Reputation points

2022-02-08T13:28:20.867+00:00

Hi, @Hui Liu-MSFT , Thanks for your update. It works but when moving between the TabItems I have to click on the text portion it seems, why is that happening? Lastly how can I make the TabItem headers bottom borders or whatever it is called round'ish but other way around than the top portion ? Where do I have to add the CornerRadius for that effect & what values should I put.

Also, would request you to point out what changes do you made to your last code.

Thanks for your continuous support!
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2022-02-09T02:36:06.913+00:00

Hi,@Boom Ba . You can check the updated answer.
In order to click on the blank part of the TabItem can be successfully selected.The background of the border in the TabItem template must be non-empty.
You could set the background of the Border to Transparent.

<Border Background="Transparent" >

Do you want to make the bottom corner of the TabItem rounder than the top one?

<Border CornerRadius="5,5,8,8" ...>
Boom Ba 166 Reputation points

2022-02-09T04:22:11.927+00:00

I just want to make the bottom corners slightly rounder towards the pinkish background and not inwards. In your photo the bottom corners are towards inside. I hope you get it.
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2022-02-09T08:16:42.53+00:00

Hi,@Boom Ba .The following effects can be achieved through code.

<Grid x:Name="g">  <Border Background="Transparent" BorderThickness="0" CornerRadius="25" > <Border CornerRadius="5,5,8,8" Background="{TemplateBinding Background}" Margin="0,0,0,-1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Border.Effect> <DropShadowEffect BlurRadius="5" Direction ="-90" Opacity="0.5" RenderingBias ="Quality" ShadowDepth ="2" Color ="Pink" /> </Border.Effect> </Border> </Border> </Grid>
Boom Ba 166 Reputation points

2022-02-09T08:57:38.05+00:00

You're getting it wrong, I meant like the tab style of say Google chrome browser, the bottom borders are rounded the other way i.e. The bottom left corner should bend towards left & the right towards the right.

I hope you get it now
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2022-02-10T08:27:36.63+00:00

Hi,@Boom Ba . I updated my answer, you could check it out.

Share via

How to make TabItems fit the app window & some other design changes..

0 additional answers

Your answer