Changing the style sheet to alter the look of the tabs

May 10, 2011 at 12:21 PM

It has been mentioned that it should be possible to apply a stylesheet to a WpfHostedControl to alter the look and feel of the tabs. This sounds exactly the job for a user interface requirement we have; the only problem being that I have no idea where to begin with this. Whereabouts would we define the stylesheet, and how would we attach it to the hosted control?

Regards

Pete

May 10, 2011 at 3:25 PM

Never mind - that was a really daft question of mine, easily answered just by running up a sample application. That will teach me to look before I ask. Doh!

May 10, 2011 at 5:37 PM

Actually a good excuse to put a few links up :)

General Search for WPF Styles and Templates :
http://www.bing.com/search?q=WPF+Styles&form=QBRE&qs=n&sk=&sc=8-10

good artical covering the basic concepts :
http://msdn.microsoft.com/en-us/magazine/cc163497.aspx

a bunch of themes on codeplex :
http://wpf.codeplex.com/wikipage?title=WPF%20Themes&referringTitle=Home

MSDN artical on Themes and Styles :
http://msdn.microsoft.com/en-us/library/ms745683.aspx

Also,  if you want to style the tab's in CCA:
An example:

    <Style x:Key="UiiTabControl" 
           TargetType="{x:Type Microsoft_Uii_Csr_Core:AifWpfTabControl}" >
        <Setter Property="Background" Value="Transparent"></Setter>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>
    </Style>

Where the target type is the type of the AIFWpfTablControl. 
And were you to want to apply that via code:

RightTopPanel.TabControl.Style = (Style)FindResource("UiiTabControl");

Enjoy.

MattB.

May 10, 2011 at 6:02 PM

Thanks Matt. I opened up the project in Snoop and found what I wanted. Actually, that's another good resource to post up: http://snoopwpf.codeplex.com/

You know when you ask something and then think, hold on, how would I do this normally? Yup - I slapped my own head for that one.

Jun 27, 2012 at 1:32 PM

Hello everybody,

the thread is a bit old but my question fits in here perfectly, so ill give it a try before starting a new one...

I would like to style the TabItem-Control for our agent desktop implementation. Iam facing some problems when it comes to the Text-Color.

The new style should apply application-wide for all tabs, so i decided to overwrite the standard TabItem-Style:

<Style TargetType="{x:Type TabItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid>
                                <Border Name="Border" Margin="0,0,0,0" Background="Transparent"
                                        BorderBrush="#ec7603" BorderThickness="1,1,1,1">
                                    <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header" Margin="12,2,12,2"
                                    RecognizesAccessKey="True"
                                    
                                    TextBlock.Foreground="White"/>
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Panel.ZIndex" Value="100" />
                                    <Setter TargetName="Border" Property="Background" Value="#666666" />
                                    <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

As you can see i've set the TextBlock.Foregound Property to white. Unfortunately that doesn't apply for the text inside of the TabItems.

I assume that the UII adds some nested controls into the tabs (image for app-icon...) which somehow override my color definition.

Can anybody help my out styling that text color??

 

Thx in advance

Jun 27, 2012 at 4:15 PM
Edited Jun 28, 2012 at 1:21 PM

The Control that UII uses for the text in the tab is a label control, we do that so we can attach hotkey's to it.

The trick is getting at the label control, embedded inside an grid and border,  all of which are created at runtime, from base controls and not from a template..
The way you do it is as such:

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border Name="Border" BorderBrush="#979797" BorderThickness="1,1,1,0" CornerRadius="5,5,0,0" Margin="2,0,0,0">
                    <Border Name="BottomBorder" BorderBrush="Transparent" BorderThickness="0,0,0,1" Margin="0,0,0,-1">
                        <StackPanel Orientation="Horizontal">
                            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Top" HorizontalAlignment="Center" RecognizesAccessKey="True"
                                            ContentSource="Header" AutomationProperties.Name="MainPanel TabPage" Margin="5,0,5,0">
                                <ContentPresenter.Resources>
                                       
                                </ContentPresenter.Resources>
                            </ContentPresenter>
                        </StackPanel>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100"/>
                        <Setter TargetName="BottomBorder" Property="BorderBrush" Value="White"/>
                    </Trigger>
                </ControlTemplate.Triggers>
                <ControlTemplate.Resources>
                    <Style TargetType="{x:Type Label}">
                        <Setter Property="Foreground" Value="Red"/>
                    </Style>
                </ControlTemplate.Resources>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


In this example from CCA,  this is the style for the tab ( you can find it in ResourceDictionary.xaml in the agent desktop project ) ,  Notice I added a section to the control template,

<ControlTemplate.Resources>
    <Style TargetType="{x:Type Label}">
        <Setter Property="Foreground" Value="Red"/>
    </Style>
</ControlTemplate.Resources>

This extra section adds the resources I’m interested in to the resource pool for the template.
Then we rely on WPF Style inheritance to do the rest.

Hope that helps.

Mattb-MSFT.

Jun 28, 2012 at 7:48 AM

Matt, thanks for your fast reply - you really helped me out - i appreciate that!

Apr 10, 2014 at 6:19 PM
Hi ndi,

I couldnt able to get how to link this Control Template Resources with my Control template triggers.. May be I'm not yet expertised in WPF... Can you help me out in trying to get a link to that please?

Basically, I want to highlight selected tab in different color and the other tabs in different colors..


Thanks

Regards
ansrikanth
Apr 10, 2014 at 6:30 PM
Ahhh !!! Got that...
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestoryType=TabItem}}" Value="True">
did the trick...

Btw, Is that right thing to do ??

Regards
anSrikanth