views:

317

answers:

1

I have a TabControl that I have restyled. The TabItem has a trigger that is fired when the TabItem is selected that changes the TabItem text to bold and green. The problem I have is that the text in the contents of the tab is also set to bold and green.

I can work around this by setting all of my controls in the tab content to be the color and font weight I want, but should I have to do this? So, I have to make sure that every textblock in the contents area has a style that sets the color to black and font weight normal.

How can I set the IsSelected part of the TabItem to show green, but leave the contents of the tab alone?

I've tried to set the foreground of the TabControl to black, but this doesn't work.

You will see from the code sample below that the text on the first tab is green, and I want it to be black, but without setting each control in the tab content.

Code Sample below:

    <Grid>
    <Grid.Resources>
        <!-- Tab item -->
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="MinWidth" Value="200"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border Name="Border" Padding="5,2">
                                <ContentPresenter ContentSource="Header"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Border.IsMouseOver" Value="True"/>
                                    <Condition Property="IsSelected" Value="False"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="FontWeight" Value="Bold"/>
                                <Setter Property="Foreground" Value="Black"/>
                            </MultiTrigger>

                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Border.IsMouseOver" Value="False"/>
                                    <Condition Property="IsSelected" Value="False"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Foreground" Value="Black" />
                            </MultiTrigger>

                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Foreground" Value="Green"/>
                                <Setter Property="FontWeight" Value="Bold"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Tab control -->
        <Style  TargetType="{x:Type TabControl}">
            <Setter Property="SelectedIndex" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="200" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="0" Padding="5" Margin="0,0,5,0" CornerRadius="3">
                                <StackPanel Orientation="Vertical">
                                    <ScrollViewer VerticalScrollBarVisibility="Auto" FocusVisualStyle="{x:Null}">
                                        <TabPanel IsItemsHost="True"/>
                                    </ScrollViewer>
                                </StackPanel>
                            </Border>
                            <Border Grid.Column="1" BorderBrush="Black" BorderThickness="0">
                                <ScrollViewer VerticalScrollBarVisibility="Auto" FocusVisualStyle="{x:Null}" Padding="10,0">
                                    <ContentPresenter ContentSource="SelectedContent"/>
                                </ScrollViewer>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Grid.Resources>

    <TabControl Name="tabControl" TabStripPlacement="Left">
        <!-- First tab item -->
        <TabItem IsSelected="True">
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Profile"/>
                </StackPanel>
            </TabItem.Header>
            <TextBlock Text="Page 1 Sample Text with no foreground set." FontSize="30"/>
        </TabItem>

        <!-- Second tab item -->
        <TabItem IsSelected="True">
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Profile"/>
                </StackPanel>
            </TabItem.Header>
            <TextBlock Text="Page 2 Sample Text with foreground set manually." FontSize="30" Foreground="Red"/>
        </TabItem>
    </TabControl>
</Grid>
A: 

Every control in wpf inherits properties from its parent. Since the TabItem's color was black, its child textblock was also of black color. Now since you've changed the entire TabItem's foreground color to green, all its children will inherit it.

Here you can set your TabItem.Header's or its contents' foreground to green, so that it will not affect other contents in the TabItem. Else you can invert the solution.

Else Try this:

<Window.Resources>
    <DataTemplate x:Key="greenHeaderTemplate">
        <StackPanel Orientation="Horizontal"> 
            <TextBlock Text="Profile" 
                       FontWeight="Bold" 
                       Foreground="Green"/> 
        </StackPanel> 
    </DataTemplate>
    <DataTemplate x:Key="defaultHeaderTemplate">
        <StackPanel Orientation="Horizontal"> 
            <TextBlock Text="Profile"/> 
        </StackPanel> 
    </DataTemplate>
</Window.Resources>

<Trigger Property="IsSelected" Value="True">      
    <Setter Property="HeaderTemplate" 
            Value="{StaticResource greenHeaderTemplate}"/> 
</Trigger>

<TabItem IsSelected="True" HeaderTemplate="{StaticResource defaultHeaderTemplate}"> 
    <TextBlock Text="Page 1 Sample Text with no foreground set." FontSize="30"/> 
</TabItem>
Veer
Thanks Veer, but how do I set the color of the tabitem header font without setting the contents? I understand the targetname, but I've tried a few different ways with no joy. I keep getting an error stating that the foreground can't be set on a tabitem header.
Adrian
@Adrian: Give a name to the stackpanel inside the header and use it in the target name.
Veer
@Veer. Sorry to be a pain, but I tried that and I couldn't get it to work. Maybe I'm doing it wrong (likely!). Can you post some code to show me? Thanks
Adrian
@Adrian: StackPanel doesn't have a Foreground Property. Check my edit.
Veer
@Veer. I'm struggling to see how this will work because in your sample code you set the textblock color (by targetname) in the tabitem from the trigger. Each tabitem would then need to specify a name for each textblock and then each one would need a separate trigger. Am I missing something here? I assumed that I could set one trigger that would update each tabitem as and when required. I appreciate your help so far.
Adrian
@Adrian: Sorry that i've forgotten the scope of the trigger. Check my edit. The datatemplate method would work if you just wanna change your header on selection. If you also want to change other items(ie, not only header) the above solution would not suit, and no other go, you may have to name your controls and set using targetname. But in any case you can try switching datatemplates of other contents also. I don't have an IDE here, hence refine my solution yourselves:)
Veer