Change tabitem style when selected item changes

Question

I have a TabControl and a style for each of my TabItem (with a StyleSelector ). I want each TabItem to change its style when the selected item changes.

So I create a TabItemCustom with a property IsItemAfterSelected :

public class TabItemCustom: TabItem
{
    public static readonly DependencyProperty IsItemAfterSelectedProperty =
    DependencyProperty.Register("IsItemAfterSelected",
        typeof(bool),
        typeof(TabItemCustom),
        new PropertyMetadata(false));
    public bool IsItemAfterSelected
    {
        get { return (bool)GetValue(IsItemAfterSelectedProperty ); }
        set { SetValue(IsItemAfterSelectedProperty , value); }
    }
}

This property has to contain True if one of the next items is selected.

I can know when the SelectedIndex changes with this DataTrigger :

<sys:Boolean x:Key="StyleValueTrue">True</sys:Boolean>
<DataTrigger Binding="{Binding Path=SelectedIndex, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}, Mode=TwoWay, Converter={StaticResource ConverterTabItemAriane}}" Value="{StaticResource StyleValueTrue}">
    <Setter Property="IsItemAfterSelected" Value="{Binding Converter={StaticResource ConverterTabItemAriane}, RelativeSource={RelativeSource Self}}"/>
 </DataTrigger>

I use the same converter to detect if is the SelectedIndex (if integer always return True ) and to set my value:

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
    if (value is DependencyObject)
    {
        DependencyObject container = (DependencyObject)value;
        var itemsControl = ItemsControl.ItemsControlFromItemContainer(container);
        var itemIndex = itemsControl.ItemContainerGenerator.IndexFromContainer(container);
        if (itemsControl is TabControl)
        {
            TabControl tabcontrol = (TabControl)itemsControl;
            if (tabcontrol.SelectedIndex >= itemIndex) return true;
            else return false;
        }
    }
    else if (value is int) return true;// selected index has changed
        return false;
    }

I've checked with breakpoints: when I change the selected item it goes in the converter and returns True . But my Property is set only once on the loading of the TabControl . The Trigger always return the same value why the property is set once?

When I'll be able to set this property my goal is to add a DataTrigger like this:

<DataTrigger Property="IsItemAfterSelected" Value="True">
    <Setter Property="Background" Value="Red" />
</DataTrigger>

I don't know if my approach is the easiest but I didn't found a better solution (I've tried removing StyleValueTrue and put True instead but same result).

Any thoughts to solve this?

Answer 1

If you want to do it with Binding s:

XAML:

<Style TargetType="{x:Type local:TabItemCustom}">
    <Setter Property="IsItemAfterSelected">
        <Setter.Value>
            <MultiBinding Converter="{StaticResource ConverterTabItemAriane}">
                <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type TabControl}}"/>
                <Binding RelativeSource="{RelativeSource Self}"/>
                <Binding Path="SelectedIndex" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type TabControl}}"/>
            </MultiBinding>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsItemAfterSelected" Value="True">
            <Setter Property="Background" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

Converter:

public class ConverterTabItemAriane : IMultiValueConverter
{

    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        TabControl tabControl = values[0] as TabControl;
        TabItem tabItem = values[1] as TabItem;
        if (tabControl != null && tabItem != null && values[2] is int)
        {
            var selectedIndex = (int)values[2];
            var itemIndex = tabControl.ItemContainerGenerator.IndexFromContainer(tabItem);
            return selectedIndex >= itemIndex;
        }
        return false;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

If you want to do it inside your TabControl :

XAML:

<Style TargetType="{x:Type local:TabItemCustom}">
    <Style.Triggers>
        <Trigger Property="IsItemAfterSelected" Value="True">
            <Setter Property="Background" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

TabControl:

public class TabControlCustom : TabControl
{
    protected override System.Windows.DependencyObject GetContainerForItemOverride()
    {
        return new TabItemCustom();
    }

    protected override void OnSelectionChanged(SelectionChangedEventArgs e)
    {
        base.OnSelectionChanged(e);

        int i = 0;
        foreach (var item in Items)
        {
            var tabItem = ItemContainerGenerator.ContainerFromItem(item) as TabItemCustom;
            if (tabItem != null)
            {
                tabItem.IsItemAfterSelected = SelectedIndex >= i;
            }
            i++;
        }
    }
}