Question

I am attempting to create a Tab Control Style that basically looks like buttons at the top that are centered and content panel below that displays the tabitem content.

I have am kind of new to templates but what I have so far works very well except one thing. I want to be able to set the default forground color for text elements. Normally I have accomplished this by using the ContentPresenter with dependency elements. So something like this.

<ContentPresenter TextElement.Foreground="White"/>

This basically makes any TextElement Control written by this Presenter to inherit this property.

Now I am trying to do the same thing but it’s not working! I believe it has something to do with my style being wrong.

Style:

<Style x:Key="MainMenuTab" TargetType="{x:Type TabControl}">



        <Setter Property="Template">
            <Setter.Value>

                <ControlTemplate TargetType="{x:Type TabControl}">

                    <Grid KeyboardNavigation.TabNavigation="Local" Width="{TemplateBinding Width}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <!-- Tab Headers Panel -->
                        <Grid Grid.Row="0" Background="{StaticResource Brush_ApplicationTabBackground}">

                            <TabPanel 
                                Name="HeaderPanel"
                                Grid.Row="0"
                                Panel.ZIndex="1" 
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                IsItemsHost="True"
                                KeyboardNavigation.TabIndex="1"
                                Background="{StaticResource Brush_ApplicationTabBackground}"
                                >


                            </TabPanel>


                        </Grid>



                        <!-- Tab Body  -->
                        <Border 
                            Name="Border" 
                            Grid.Row="1" 
                            Background="{StaticResource Brush_ApplicationBackground}"
                            BorderBrush="Transparent"
                            BorderThickness="1" 
                            CornerRadius="2" 
                            KeyboardNavigation.TabNavigation="Local"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            KeyboardNavigation.TabIndex="2" >

                            <ContentPresenter 
                                Name="PART_SelectedContentHost"
                                Margin="4"
                                ContentSource="SelectedContent" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>




        <!-- Each Tab should look like this -->
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style>

                    <Setter Property="Control.Template">
                        <Setter.Value>

                            <ControlTemplate TargetType="{x:Type TabItem}">

                                <Grid Background="{StaticResource Brush_ApplicationTabBackground}">
                                    <Border Width="50" x:Name="BorderTab" Height="50" Margin="5" BorderThickness="1" ClipToBounds="True" BorderBrush="Transparent" Background="Transparent" CornerRadius="5">
                                        <Rectangle x:Name="BackgroundRec" Fill="Transparent" Stroke="Transparent" Width="50" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                    <ContentPresenter Name="TheHeaderContentPresenter" Width="50" Height="50" Margin="5" ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.Foreground="White"/>
                                </Grid>

                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Trigger.Setters>
                                            <Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
                                            <Setter TargetName="BorderTab" Property="BorderThickness" Value="3"/>
                                            <Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
                                            <Setter Property="Panel.ZIndex" Value="1"/>
                                        </Trigger.Setters>
                                    </Trigger>

                                    <Trigger Property="IsSelected" Value="False">
                                        <Trigger.Setters>
                                            <Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabBackground}"/>
                                            <Setter TargetName="BorderTab" Property="BorderThickness" Value="0"/>
                                            <Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabBackground}"/>
                                        </Trigger.Setters>
                                    </Trigger>
                                </ControlTemplate.Triggers>

                            </ControlTemplate>

                        </Setter.Value>
                    </Setter>

                </Style>
            </Setter.Value>
        </Setter>

In my ContentPresenter under ItemContainerStyle has the TextElement.Foreground=”White” property but it will not print white text!

My tabcontrol that uses this style looks like this:

<TabControl Grid.Row="2" Style="{StaticResource MainMenuTab}">


            <TabItem>
                <TabItem.Header>
                    <TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,5" Text="{x:Static  UIStrings:ClientStrings.MainWindow_TabHeader_SingleWaveLength}"></TextBlock>
                </TabItem.Header>
                <TextBlock>TEST PANEL</TextBlock>


       </TabItem>
</TabControl>

I know this is compicated but I would really love this to work.

Answer 1

Solution Found.

Based on HCL’s post, I have found a solution. I am experiance the same exact problem I am trying to have the content presenter set the inherited dependence property. instead I simple tell the template to apply the dependance property, that way each tabitem is styled to have this property and therefore sets it for all it’s children.

<Setter Property="ItemContainerStyle">
    <Setter.Value>
        <Style TargetType="TabItem">

            <Setter Property="TextElement.Foreground" Value="White"/>

            <Setter Property="Template">
                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type TabItem}">

                        <Grid Background="{StaticResource Brush_ApplicationTabBackground}">
                            <Border Width="50" x:Name="BorderTab" Height="50" Margin="5" BorderThickness="1" ClipToBounds="True" BorderBrush="Transparent" Background="Transparent" CornerRadius="5">
                                <Rectangle x:Name="BackgroundRec" Fill="Transparent" Stroke="Transparent" Width="50" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                            <ContentPresenter Name="TheHeaderContentPresenter" Width="50" Height="50" Margin="5" ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Trigger.Setters>
                                    <Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
                                    <Setter TargetName="BorderTab" Property="BorderThickness" Value="3"/>
                                    <Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
                                    <Setter Property="Panel.ZIndex" Value="1"/>
                                </Trigger.Setters>
                            </Trigger>

                            <Trigger Property="IsSelected" Value="False">
                                <Trigger.Setters>
                                    <Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabBackground}"/>
                                    <Setter TargetName="BorderTab" Property="BorderThickness" Value="0"/>
                                    <Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabBackground}"/>
                                </Trigger.Setters>
                            </Trigger>
                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>
            </Setter>

        </Style>
    </Setter.Value>
</Setter>

All I’ve really dont is added the line:

<Setter Property="TextElement.Foreground" Value="White"/>

Before the control template! Also I took the white text out of the content presenter because it is useless.