Search code examples
wpfxamltriggerstabcontrolwpf-style

WPF, how to style TabItem basing on TabControl's property?


I want to achieve similar effect, which can be seen in Notepad++: dividing TabContol into two TabControls. Obviously both will have selected tab on their own, but still only one of them will be active.

For those who doesn't know Notepad++, this is how it looks like:

Notepad++

For that I'll need to introduce "Active" property on TabControl (not Focused, because when one of TabControls loses focus, its selected tab still remains active). However, I have no idea how to craft trigger on TabItem's ControlTemplate, which will allow me to distinguish selected and selected+active tab.

This is how my current TabItem template look:

<Style x:Key="BaseRootTabItem" TargetType="TabItem">
    <Style.Setters>
        <Setter Property="Background" Value="{StaticResource NormalTabBackgroundBrush}" />
        <Setter Property="TextBlock.Foreground" Value="{StaticResource NormalTabForegroundBrush}" />
    </Style.Setters>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.Setters>
                <Setter Property="Background" Value="{StaticResource HoverTabBackgroundBrush}" />
                <Setter Property="TextBlock.Foreground" Value="{StaticResource HoverTabForegroundBrush}" />
            </Trigger.Setters>
        </Trigger>
    </Style.Triggers>
</Style>

<Style x:Key="DocumentTabItem" TargetType="TabItem" BasedOn="{StaticResource BaseRootTabItem}">
    <Style.Setters>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Border x:Name="TabBorder" BorderThickness="1,1,1,0" BorderBrush="Transparent"
                                            Background="{TemplateBinding Background}" TextBlock.Foreground="{TemplateBinding Foreground}">
                        <ContentPresenter x:Name="ContentSite" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="Header" Margin="6,2" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style.Setters>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Trigger.Setters>
                <Setter Property="Background" Value="{StaticResource SelectedDocumentTabBackgroundBrush}" />
                <Setter Property="Foreground" Value="{StaticResource SelectedDocumentTabForegroundBrush}" />
            </Trigger.Setters>
        </Trigger>
    </Style.Triggers>
</Style>

I need something like:

<Trigger Property="(Owning TabControlEx's Active property)" Value="True">
    <Trigger.Setters>
    ...
    </Trigger.Setters>
</Trigger>

Or maybe there's some other solution?


Solution

  • Since Active property doesn't belong to TabItem, Trigger won't work. Use DataTrigger with binding to parent:

    <DataTrigger Binding="{Binding Active, RelativeSource={RelativeSource AncestorType=TabControlEx}}" 
                 Value="True">
    </DataTrigger>