CODEWITHSUNDEEP
wpfxamltabcontrol
Jayanta_KMC
Jayanta_KMC

Reputation: 70

How to bind border background to tabitem header background in WPF?

My TabItem styling is something like

    <!-- 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 Name="TabPanel">
                                <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.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <!--<Setter TargetName="TabPanel" Property="Background" Value="LightGreen" />-->
                            <Setter Property="FontWeight" Value="Bold" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter Property="FontWeight" Value="Normal" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                
                
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

and my TabControl code

<TabControl>
            <TabItem
                Header="Dash"
                Name="tabItem1"
            ...>
                <Border
                    Background="#002e00"
                    ...>
                ...
                </Border>
            </TabItem>
            <TabItem
                Header="Hash"
                Name="tabItem2"
            ...>
                <Border
                    Background="#00a800"
                    ...>
                ...
                </Border>
            </TabItem>
            <TabItem
                Header="Bash"
                Name="tabItem3"
            ...>
                <Border
                    Background="#ffde24"
                    ...>
                ...
                </Border>
            </TabItem>
</TabControl>

I want to make the Background colors of TabItem Headers i.e. Header="Dash", "Hash" & "Bash" to be exact of its TabItem Border Backgrounds i.e. "#002e00", "#00a800" & "#ffde24" respectively when it is selected using Trigger in ControlTemplate.Triggers?

Upvotes: 0

Views: 63

Answers (1)

Tamal Banerjee
Tamal Banerjee

Reputation: 503

You can add styling as key based on your base styling (something like)

    <SolidColorBrush
        x:Key="Blueish"
        Color="#5252ff" />
    <SolidColorBrush
        x:Key="Greenish"
        Color="#005757" />
    <SolidColorBrush
        x:Key="Blackish"
        Color="#2e2e00" />

    <Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}" x:Key="blue">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="{x:Type TabItem}">
                    <Border>
                        <Grid>
                            <Grid Name="TabPanel">
                                <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.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="TabPanel" Property="Background" Value="{DynamicResource Blueish}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}" x:Key="green">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="{x:Type TabItem}">
                    <Border>
                        <Grid>
                            <Grid Name="TabPanel">
                                <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.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="TabPanel" Property="Background" Value="{DynamicResource Greenish}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}" x:Key="black">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="{x:Type TabItem}">
                    <Border>
                        <Grid>
                            <Grid Name="TabPanel">
                                <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.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="TabPanel" Property="Background" Value="{DynamicResource Blackish}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Use it like:

<TabItem Style="{StaticResource blue}" ...>
  <Border Background="{DynamicResource Blueish}" ...</Border>...
<TabItem Style="{StaticResource green}" .../>
  <Border Background="{DynamicResource Greenish}" ...</Border>...
<TabItem Style="{StaticResource black}" .../>
  <Border Background="{DynamicResource Blackish}" ...</Border>...

Now, I'm not sure whether this code can be further shortened (possibly) but nonetheless this should do the job.

Upvotes: 1

Related Questions