different foreground of radtabitem

[Randhir]

Hi,

I have been using radtabcontrol. I need to have different colored header text for selected tabitem and non selected tabitem.

How do i achieve this:

I tried this but no effect:
 

private void RadTabControl_SelectionChanged(object sender, RoutedEventArgs e)
      {
          RadTabControl myTabControl = sender as RadTabControl;
          RadTabItem mySelectedTabItem = myTabControl.SelectedItem as RadTabItem;
          mySelectedTabItem.Foreground = new SolidColorBrush(Color.FromArgb(255,0,0,0));
      }

I need to have white colored text header for non selected tabitem and black colored text header for selected tabitem.

Any help please,
thanks,

[Hristo]

Hi Randhir,

Generally there are two techniques you can employ to accomplish your task.

First approach is to use code behind and attached to events in order to make the changes when user interacts with the component. Following code snippet declares a RadTabControl with attached event handler.

<telerik:RadTabControl x:Name="myTabControl" PreviewSelectionChanged="myTabControl_PreviewSelectionChanged">

The handler bellow gets the event and changes the FontWight and Foreground of the selected RadTabItem. You can notice there is a Dispatcher.BeginInvoke used to verify that code inside it will run in the main visual thread.

void myTabControl_PreviewSelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
{
    myTabControl.Dispatcher.BeginInvoke(() =>
    {
        foreach (DataItem selectedDataItem in e.AddedItems)
        {
            RadTabItem selectedItem = this.myTabControl.ItemContainerGenerator.ContainerFromItem(selectedDataItem) as RadTabItem;
            selectedItem.FontWeight = FontWeights.Bold;
            selectedItem.Foreground = new SolidColorBrush(Colors.Black);
        }
        foreach (DataItem unselectedDataItem in e.RemovedItems)
        {
            if (unselectedDataItem != null)
            {
                RadTabItem unselectedItem = this.myTabControl.ItemContainerGenerator.ContainerFromItem(unselectedDataItem) as RadTabItem;
                unselectedItem.FontWeight = FontWeights.Normal;
                unselectedItem.Foreground = new SolidColorBrush(Colors.White);
            }
        }
    });
}

However, I'm recommending you the second technique. Use templates and styles to declaratively describe visual behavior of the elements. This technique is far more customizable and flexible.

The following snippet show how to attach custom defined style to the RadTabControl.

<telerik:RadTabControl x:Name="myTabControl" ItemContainerStyle="{StaticResource RadTabItemStyle}">

I'm attaching an example illustrating the both approaches. Please take a look at it and let me know if it works for you.

All the best,
Hristo Milyakov
the Telerik team

[Lauren]

Hi,

Thanks for the example, it's what i was looking for.
I also need to add a close button to the tab item headers, which i managed to add to your example.

However when i'm creating the radTabItem manually (no binding), the style and the template with close button is not applied anymore. So i removed the ItemTemplate and ItemContainerStyle from RadTabControl and instead added a Style and a HeaderTemplate to each created RadTabItem. When i do that, the close button is there and most of the style is applied but not the white foreground for the non-selected items...

Moreover, ideally,  what i would like to achieve is:
- when tab item NOT SELECTED:
        + white foreground and normal fontweight
        + close button hidden
- when tab item SELECTED:
        + black and bold header 
        + close button visible

Could you help me implement the above ?

Thank you for your help.
  

[Hristo]

Hello Lauren,

I've attached a modified version of the sample project I sent you. In it are illustrated two approaches:
1. Using data binding and data template with style
2. Manual creation of the header elements and manipulating directly the visual elements properties.

I would like to recommend you to use data binding and manage the visual element via properties of the bound data objects. However I've provided you and alternative, using no binding and creating the visual elements from code behind.

If you want to switch between the two versions you have to comment/uncomment following code pairs.

1.a

<telerik:RadTabControl x:Name="myTabControl" ItemContainerStyle="{StaticResource RadTabItemStyle}" telerik:ContainerBinding.ContainerBindings="{StaticResource SampleBindings}" SelectionChanged="HandleVisibilityOnSelectionChanged">
    <telerik:RadTabControl.ItemTemplate>
        <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource SampleBindings}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Header}" />
                <telerik:RadButton Content="X" Visibility="{Binding CloseButtonVisibility, Mode=TwoWay}"/>
            </StackPanel>
        </DataTemplate>
    </telerik:RadTabControl.ItemTemplate>
    <telerik:RadTabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Content}" />
        </DataTemplate>
    </telerik:RadTabControl.ContentTemplate>
</telerik:RadTabControl>

1.b

this.myTabControl.ItemsSource = sampleVM;

and

2.a

<telerik:RadTabControl x:Name="myTabControl" SelectionChanged="myTabControl_SelectionChanged" />

2.b

GenereateItemContainers();

All the best,
Hristo Milyakov
the Telerik team

[Lauren]

Hi,

Thank you very much for your reply.
I dont think i can use data binding, since the tab item are created at run time depending on the user actions. But i'll most probably be using the second option.

Thanks again