Vimes
Vimes

Reputation: 11867

Style TabItems, don't affect nested TabControls

I'm styling TabItems of a TabControl. The problem is, the style affects items of nested TabControls. Propagating styles are the only way I know to get to the TabItems. Anyone know how to style the TabItems on just the outer TabControl?

In my case, the inner tabs are defined in plugins, so I can't access them to try this answer.

Demo app

Here's a demo app of my situation.

Red style affects inner tabs

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TabControl ItemsSource="{Binding}">
            <TabControl.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Border Name="Border" Background="Red">
                                    <ContentPresenter ContentSource="Header"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding TabName}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <ContentControl Content="{Binding TabConent}" />
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

MainWindow.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Collections.ObjectModel;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public class TabData
        {
            public string TabName { get; set; }
            public Label TabConent
            {
                get
                {
                    // In real case, this TabControl from someone else's plugin
                    var content = new TabControl();
                    content.Items.Add(new TabItem() { Header = "Nested Tab Item" });
                    return new Label() { Content = content };
                }
            }
        }

        public MainWindow()
        {
            DataContext = new ObservableCollection<TabData>() { new TabData() { TabName = "Tab Item" } }; ;
            InitializeComponent();
        }
    }
}

Upvotes: 0

Views: 264

Answers (1)

AnjumSKhan
AnjumSKhan

Reputation: 9827

Use this, and tell if this is what you want :

<TabControl.Resources>
    <Style TargetType="TabItem">
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=TabControl, AncestorLevel=2}}" Value="{x:Null}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border Name="Border" Background="Red">
                                <ContentPresenter ContentSource="Header"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>                    
    </Style>
</TabControl.Resources>

Upvotes: 1

Related Questions