CODEWITHSUNDEEP
c#wpfxaml
user1702369
user1702369

Reputation: 1161

Changing TabItem Style To a TabControl.ItemTemplate

Could someone please help me. I have a already written style for a TabItem Header. But because my TabItem Header are binded I needed to use TabControl.ItemTemplate instead of TabItem Header

So how do I even start getting the same style on a TabControl.ItemTemplate that I have for the TabItem

So I had this:

<TabItem Header="Tab1" Style="{StaticResource TabStyle}">
</TabItem>

Now I have this:

<TabControl.ItemTemplate>
  <!-- this is the header template-->
  <DataTemplate>
     <TextBlock Text="{Binding Person}" />
  </DataTemplate>
</TabControl.ItemTemplate>

This is the Style for the original TabItem:

<Style x:Key="TabStyle" TargetType="{x:Type TabItem}">
    <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  Padding="3">
                    <Grid Name ="grid" Height="24">
                        <Border Name="BorderName" 
                                CornerRadius="12,12,12,12"                           
                                Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"     />
                        <Rectangle Name="TabItemBackgorund" 
                                RadiusX="12"
                                RadiusY="12" 
                                Fill="{StaticResource TabItemBackgroundBrush}">
                        </Rectangle>
                        <Border Name="border" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Padding="{TemplateBinding Padding}">
                            <ContentPresenter Name="TabItemTextbox" 
                                ContentSource="Header" 
                                Margin="6,0,6,0"     
                                TextBlock.Foreground="{StaticResource TabItemBackgroundBrush}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="TabItemBackgorund" Property="Fill"  Value="#00bfc2" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground"  Value="#ffffff" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight"  Value="Bold" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="TabItemBackgorund" Property="Fill"  Value="{StaticResource TabItemBackgroundBrush}" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground"  Value="#9494a3" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight"  Value="Bold" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="TabItemBackgorund" Property="Fill"  Value="#00bfc2" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground"  Value="#ffffff" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight"  Value="Bold" />
                    </Trigger>
                    <Trigger SourceName="grid" Property="IsMouseOver" Value="True">
                        <Setter TargetName="TabItemBackgorund" Property="Fill"  Value="#FF4F78" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground"  Value="#ffffff" />
                        <Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight"  Value="Bold" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 1

Views: 2980

Answers (1)

user6996876
user6996876

Reputation:

I have a already written style for a TabItem Header. But because my TabItem Header are binded I needed to use TabControl.ItemTemplate instead of TabItem Header

Instead of Header="Tab1" in TabItem, you could continue using your original TabItem's Style with a Header Setter

<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Header" Value="{Binding Person}"/>
<Setter Property="Template">

and apply the style to TabControl.ItemContainerStyle

<TabControl>
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
           <Setter Property="Background" Value="Transparent"/>
           <Setter Property="VerticalContentAlignment" Value="Center"/>
           <Setter Property="HorizontalContentAlignment" Value="Center"/>
           <Setter Property="Header" Value="{Binding Person}"/>
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="{x:Type TabItem}">

...

        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

Upvotes: 8

Related Questions