1 Replies - 3593 Views - Last Post: 26 February 2014 - 11:26 AM

#1 KFredje  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 131
  • Joined: 06-September 11

[WPF] Tabitem style with different colors

Posted 22 February 2014 - 02:14 PM

Hello

It has been a while since I started exploring wpf and wanted to get into resources this time. I want to make an application with a TabControl. The TabItems have to have the same color as the content but each content (canvas or grid) has a different color. I know how to give all TabItems the same Background color when I select it, but how can I give each one a different color?

This is what I tried so far:
<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="450"
        Width="800"
        MinHeight="412">
    
    <window.Resources>
        <Style TargetType="TabControl">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabControl">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border>
                                <TabPanel IsItemsHost="True"/>
                            </Border>
                            <Border BorderThickness="0,1,1,1" Grid.Column="1">
                                <ContentPresenter ContentSource="SelectedContent"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <Grid Height="40" Width="186">
                            <Border Name="tiBorder" Margin="0,1,0,0">
                                <ContentPresenter ContentSource="Header"
                                                  VerticalAlignment="Center"
                                                  HorizontalAlignment="Center"
                                                  TextBlock.FontSize="20"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Panel.ZIndex" Value="100"/>
                                <Setter TargetName="tiBorder" Property="Background" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </window.Resources>
    
    <Grid>
        <TabControl Name="tc" TabStripPlacement="Left" >
            <TabItem Header="Tab1">
                <Grid Background="Red"/>
            </TabItem>
            <TabItem Header="Tab2">
                <Grid Background="Orange"/>
            </TabItem>
            <TabItem Header="Tab3">
                <Grid Background="Yellow"/>
            </TabItem>
            <TabItem Header="Tab4">
                <Grid Background="Green"/>
            </TabItem>
            <TabItem Header="Tab5">
                <Grid Background="Blue">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="200"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <DataGrid  Grid.Row="1" />

                </Grid>
            </TabItem>
        </TabControl>

        <Calendar  HorizontalAlignment="Left" Width="186" Height="169" VerticalAlignment="Bottom"  FirstDayOfWeek="Monday" Language="" />

    </Grid>
</Window>



This is how I want it:
Attached File  Right.tiff (103.72K)
Number of downloads: 64

In this picture, the red TabItem should be orange:
Attached File  Wrong.tiff (103.9K)
Number of downloads: 49

So what did I do/didn't do wrong?

This post has been edited by KFredje: 22 February 2014 - 02:20 PM


Is This A Good Question/Topic? 1
  • +

Replies To: [WPF] Tabitem style with different colors

#2 KFredje  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 131
  • Joined: 06-September 11

Re: [WPF] Tabitem style with different colors

Posted 26 February 2014 - 11:26 AM

Solved it myself.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1