wpf

Tab control mouse over

I am trying to create a tab control with a style like Google's kitchen sink example. When the mouse goes over a tab i want to be able to change its color and when i click that tab its content background color changes to match and the tab changes. However, if you don't click the tab and the mouse moves i want it to go back to its original color. I want the tabs to be different colors.

What i have right now is when i hover over the intro tab content "Content for intro"

that content font changes to red. I had to change it to foreground so i could see that it was working. Keep in mind i am very new to xaml and wpf. I am trying to teach myself and the book i have has a very small section on styles.

Here is Google's kitchen sin example hat i am trying to achieve. http://gwt.google.com/samples/KitchenSink/KitchenSink.html

Any help is much appreciated.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <SolidColorBrush x:Key="mouseOverColor"
            Color="Red" />
        <Style x:Key="myStyle" TargetType="TabItem">
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver"
                                     Value="True">
                                <Setter Property="Foreground"
                                        Value="{StaticResource mouseOverColor}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <TabControl  Background="AliceBlue"  Grid.Column="1"
             Grid.ColumnSpan="2" Margin="92,40,37,80"
             Grid.Row="2">
            <TabItem  Header="Intro" >
                <TabItem Style="{StaticResource myStyle}" >
                    Content for intro
                </TabItem>
            </TabItem>
            <TabItem Header="Widgets">
                Content for widget
            </TabItem>
            <TabItem Header="Panels">
                content for panel
            </TabItem>
        </TabControl>
    </Grid>
</Window>
Solution

  • This is a bit complex because the background of the selected tab is colourless by default, so you need to override the control template. It is best to modify the default style so you do not need to start over, which in any case is quite verbose:

    <ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}">
    <Grid SnapsToDevicePixels="True">
        <Border x:Name="Bd" BorderBrush="White" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}">
            <Border.Style>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="Background" Value="Gray"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}" Value="True">
                            <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMouseOver}" Value="True">
                            <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="False"/>
                <Condition Property="IsMouseOver" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter Property="BorderBrush" TargetName="Bd" Value="#FF3C7FB1"/>
        </MultiTrigger>
        <Trigger Property="TabStripPlacement" Value="Bottom">
            <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
        </Trigger>
        <Trigger Property="TabStripPlacement" Value="Left">
            <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
        </Trigger>
        <Trigger Property="TabStripPlacement" Value="Right">
            <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Top"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-2,-2,-2,-1"/>
            <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Bottom"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-2,-1,-2,-2"/>
            <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Left"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-2,-2,-1,-2"/>
            <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Right"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-1,-2,-2,-2"/>
            <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
        </MultiTrigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" TargetName="Bd" Value="#FFF4F4F4"/>
            <Setter Property="BorderBrush" TargetName="Bd" Value="#FFC9C7BA"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

    If you want to change the default colour, change the setter on the border which specifies that the background should be grey.

    Also to make the content part the same colour as the tab an additional binding in the TabControl is needed. Further this control template needs to be applied to the items, either via an automatic style or direct reference:

    <TabControl x:Name="MyControl" Height="200"
            Background="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem.Background}">
    <TabItem Header="tab1" Background="Red"   Template="{DynamicResource TabItemControlTemplate}"/>
    <TabItem Header="tab2" Background="Green" Template="{DynamicResource TabItemControlTemplate}"/>
    <TabItem Header="tab3" Background="Blue" Template="{DynamicResource TabItemControlTemplate}"/>
</TabControl>

    First tab selected, mouse over last tab:
    Screenshot

    Usage annotation:

    <Window ...>
    <Window.Resources>
        <ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}">
            ...
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <!-- You can reference the template anywhere inside the visual tree
             of the Window if it has been declared in the Resources of the
             window, most XML elemnts that are children of the Window element
             are inside its visual tree -->
        <TabControl ...>
            <TabItem Template="{StaticResource TabItemControlTemplate}" .../>
        </TabControl>
    </Grid>
</Window>