?
Solved

Makeing tab same color as the tab content in WPF

Posted on 2009-04-21
1
Medium Priority
?
557 Views
Last Modified: 2013-11-12
I am trying to make the selected tab to be same color as the tab content and the other tab to be gray out.

For example in the attached image, I would like to make 'First' tab blue as the content is blue too.

Does anyone what I need to do that.  Thanks
<Window x:Class="tbTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="TabControl" x:Key="SelectedBackgroundStyle">
            <Setter Property="Background"
                    Value="{Binding SelectedItem.Background, RelativeSource={x:Static RelativeSource.Self}}">
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <TabControl x:Name="Tabs" Style="{StaticResource SelectedBackgroundStyle}" Margin="36,60,37,12">
            <TabItem Header="First" Background="Blue">
                <TextBlock Height="144" Width="257">Test</TextBlock>
            </TabItem>
            <TabItem Header="Second" Background="Green"/>
            <TabItem Header="Third"  Background="Orange"/>
        </TabControl>
    </Grid>
</Window>

Open in new window

tabs.JPG
0
Comment
Question by:xewoox
1 Comment
 
LVL 8

Accepted Solution

by:
unmeshdave earned 2000 total points
ID: 24247194
please check the attached code. you need to use triggers for conditions like, selected, not selected.
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="TabControl" x:Key="SelectedBackgroundStyle">
            <Setter Property="Background"
                    Value="{Binding SelectedItem.Background, RelativeSource={x:Static RelativeSource.Self}}">
            </Setter>
        </Style>
        <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border Name="Border"
                                    Margin="0,0,-4,0" 
                                    BorderBrush="{StaticResource SolidBorderBrush}"
                                    BorderThickness="1,1,1,1" 
                                    CornerRadius="2,12,0,0" >
                                <ContentPresenter x:Name="ContentSite"
                                                  VerticalAlignment="Center"
                                                  HorizontalAlignment="Center"
                                                  ContentSource="Header"
                                                  Margin="12,2,12,2"/>
                            </Border>
                        </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem} }, Path=Background}" />
                        </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="Border" Property="Background" Value="Gray" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <TabControl x:Name="Tabs" Style="{StaticResource SelectedBackgroundStyle}" Margin="36,60,37,12">
        <!--<TabControl x:Name="Tabs" Margin="36,60,37,12">-->
            <TabItem  Background="Blue">
                <TabItem.Header>First</TabItem.Header>
                <TextBlock Height="144" Width="257">Test</TextBlock>
            </TabItem>
            <TabItem Header="Second" Background="Green"/>
            <TabItem Header="Third"  Background="Orange"/>
        </TabControl>
    </Grid>
</Window>

Open in new window

headerbackascontentback.jpg
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to add a user-defined command button to the Windows 7 Explorer toolbar.  In the previous article (http://www.experts-exchange.com/A_2172.html), we saw how to put the Delete button back there where it belongs.  "Delete" is …
This article surveys and compares options for encoding and decoding base64 data.  It includes source code in C++ as well as examples of how to use standard Windows API functions for these tasks. We'll look at the algorithms — how encoding and decodi…
This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…

594 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question