different foreground of radtabitem

5 posts, 0 answers
  1. Randhir
    Randhir avatar
    15 posts
    Member since:
    Jul 2010

    Posted 28 Jul 2010 Link to this post

    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,
  2. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 02 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Lauren
    Lauren avatar
    37 posts
    Member since:
    Jan 2010

    Posted 20 Aug 2010 Link to this post

    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.
      
  5. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 25 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Lauren
    Lauren avatar
    37 posts
    Member since:
    Jan 2010

    Posted 25 Aug 2010 Link to this post

    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
Back to Top
DevCraft banner