CODEWITHSUNDEEP
wpfxaml
Aousaf Rashid
Aousaf Rashid

Reputation: 5758

Change TabControl Header Font on MouseOver WPF (Custom tabcontrol)

I have this code for my custom tabcontrol :

  <TabControl x:Name="tabControl" BorderBrush="GhostWhite" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="124" Margin="195,0,0,0" VerticalAlignment="Top" Width="312" FontFamily="Segoe UI">
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border Name="Border" BorderThickness="0,0,0,0" BorderBrush="White" CornerRadius="9,9,9,9" Margin="2,0">
                                <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="10,2"/>
                            </Border>

                                <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Border"  Property="Background" Value="#FFFF8540" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="False">
                                    <Setter TargetName="Border" Property="Background" Value="White" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabItem Header="General" FontFamily="Segoe UI" FontSize="12.5">
            <Label Content="Content goes here..." />
        </TabItem>
        <TabItem Header="Security" />
        <TabItem Header="Details" />
    </TabControl>

I want to change the fontsize and ForeGround of the selected tab, but really can't figure out what to do ...Any help would be appreciated

Upvotes: 0

Views: 687

Answers (2)

Gaurang Dave
Gaurang Dave

Reputation: 4056

This is a working code. I developed it for one of my project. Further, you can make changes as per need but it will surely provide you basic idea.

 <Style x:Key="MainTabItemStyle" TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <Border Name="Border" BorderThickness="1" Background="[COLOR]" Margin="0" CornerRadius="5,5,0,0">
                                <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"
                                        Margin="5"
                                        TextBlock.FontSize="16"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="BorderBrush" Value="[COLOR]" />
                                <Setter TargetName="Border" Property="Background" Value="[COLOR]" />
                                <Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="[COLOR]"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="Border" Property="BorderBrush" Value="[COLOR]" />
                                <Setter TargetName="Border" Property="Background" Value="[COLOR]" />
                                <Setter TargetName="Border" Property="Margin" Value="0" />
                                <Setter TargetName="Border" Property="Cursor" Value="Hand"/>
                                <Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="[COLOR]"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
 </Style>

UPDATE

Change border color on when mouse id over

<Trigger Property="IsMouseOver" Value="True">
    <Setter TargetName="Border" Property="BorderThickness" Value="[THICKNESS]" />
    <Setter TargetName="Border" Property="BorderBrush" Value="[Color]"/>
</Trigger>

Upvotes: 0

Efi Z
Efi Z

Reputation: 192

Please add the following code under "<Style TargetType="TabItem">":

<Style.Triggers>
     <Trigger Property="TabItem.IsSelected" Value="True">
          <Setter Property="TabItem.Foreground" Value="[Color]"/>
          <Setter Property="TabItem.FontSize" Value="[Size]"/>
     </Trigger>
</Style.Triggers>

Make sure to replace [Color] and [Size] with whatever you choose.

UPDATE:

To change the border color when the mouse is over the TabItem, you also have to change the thickness since you set it to 0.

add the following code under <ControlTemplate.Triggers>

<Trigger Property="IsMouseOver" Value="True">
    <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,1" />
    <Setter TargetName="Border" Property="BorderBrush" Value="[Color]"/>
</Trigger>

Upvotes: 2

Related Questions