RadTabTitem styling

[FirstName]

Hi, everyone. For example, I have such chunk of code:

01.<telerik:RadTabControl
02.    Name="someNamehere"
03.    HorizontalAlignment="Stretch"
04.    Height="100" Margin="7"
05.    VerticalAlignment="Center"
06.    Foreground="anyColor"
07.    telerik:TouchManager.IsTouchHitTestVisible="False"
08.    BorderThickness="1 3 1 1"
09.    BorderBrush="{telerik:Windows8Resource ResourceKey=BasicBrush}"
10.    Style="{DynamicResource InnovaRadTabControlStyle}"
11.    ItemsSource="{Binding anyViewModelHere, UpdateSourceTrigger=PropertyChanged}"
12.    SelectedIndex="{Binding anyIndexValueHere, UpdateSourceTrigger=PropertyChanged}">
13.
14.    <telerik:RadTabControl.Resources>
15.        <Style TargetType="telerik:RadTabItem" BasedOn="{StaticResource CustomStyleHere}">
16.            <Setter Property="HeaderForeground" Value="Red"/>
17.        </Style>
18.    </telerik:RadTabControl.Resources>
19.    <telerik:RadTabControl.ContentTemplate>
20.        <DataTemplate DataType="Unit1:ViewModel2Here">
21.        <unit1:ViewModel2 DataContext="{Binding DataContext, RelativeSource={RelativeSource Self}, UpdateSourceTrigger=PropertyChanged}"/>
22.    </DataTemplate>
23.    </telerik:RadTabControl.ContentTemplate>
24.</telerik:RadTabControl>

 

Why style for telerik:RadTabItem (lines 14-18) is not working at all ? Thanks in advance !

[Sia]

Hello,
 
I am not sure what is behind CustomStyleHere. If it is a custom style that targets RadTabItem and you use implicit styling, it should be based on the Telerik RadTabItemStyle that we provide with our source. However I have tested on my end the following custom style (in the RadTabControl.Resources) and it works as expected:

<Style TargetType="telerik:RadTabItem" BasedOn="{StaticResource RadTabItemStyle}">
    <Setter Property="HeaderForeground" Value="Red"/>
</Style>

If you use StyleManager, just remove the BasedOn from the style above.
In case you still experience issues with this style, I would appreciate if it is possible to send us a small project with all related customizations.

Regards,
Sia
Progress Telerik

[Anthony]

I created a WPF <UserControl></UserControl> and replaced it with <telerik:RadTabItem></telerik:RadTabItem>.  I also changed the inherited class in the code behind.  Tabs are added with Region.RequestNavigation and display at run-time correctly, but in the designer there is no styling and I cannot see the tab's content.  I had to put that content in a separate user control and view it there.  I prefer not do do that.

I had a similar problem with the RadDocumentTab and found the following article which corrected the design time behavior.

https://docs.telerik.com/devtools/wpf/styling-and-appearance/styling-apperance-styling-the-controls

this is my app.xaml

 

<ResourceDictionary.MergedDictionaries>
             <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/System.Windows.xaml" />
             <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.xaml" />
             <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.Input.xaml" />
             <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.Data.xaml" />
             <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.Navigation.xaml" />
             <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.Docking.xaml" />
             <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.FixedDocumentViewers.xaml" />
             <ResourceDictionary Source="/Telerik.Windows.Themes.Office2016;component/Themes/Telerik.Windows.Controls.GridView.xaml" />
         </ResourceDictionary.MergedDictionaries>

         <Style x:Key="custRadDocumentPaneStyle" TargetType="telerik:RadPane"       BasedOn="{StaticResource RadPaneStyle}"></Style>
         <Style x:Key="custRadTabControlStyle"   TargetType="telerik:RadTabControl" BasedOn="{StaticResource RadTabControlStyle}"></Style>
         <Style x:Key="custRadTabItemStyle"      TargetType="telerik:RadTabItem"    BasedOn="{StaticResource RadTabItemStyle}"></Style>

 

in my user control I have this

 

<telerik:RadTabItem  x:Class="Membership.Module.Views.Partial.PersonNotesTab"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
         xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
         xmlns:prism="http://prismlibrary.com/"
         prism:ViewModelLocator.AutoWireViewModel="True"
         Style="{StaticResource custRadTabItemStyle}"
         Header="Notes" >

My views are in a separate PRISM module if that makes a difference and I am using the NoXaml dlls.

 

Thanks in advance

Anthony

 

 

 

[Sia]

Hello,

Can you please send us the custom UserControl implementation and the way the TabItems are added in your application? Why do you need these UserControls? The best option would be if you manage to isolate them in a separate project and check whether the same issue appears. 

Regards,
Sia
Progress Telerik

[Ras Ran]

Hello...how to add corner radius to RadTabtem in in RadTabControl without losing CloseButtonVisibility....would you give me a sollution  ?i am using Telerik Version 2019  

[Martin Ivanov]

Hello Raneesras,

To achieve your requirement, you can extract the ControlTemplate of RadTabItem, and set the CornerRadius property of the corresponding elements. Here are a few steps that you can use as a reference:

1. Find the corresponding .xaml file for the theme you use and copy the ControlTemplate with x:Key set to "TabItemTemplate". You can see how to do this in the Editing Control Templates article.
2. In your application create a Style object that targets RadTabItem and set the Template property using the copied ControlTemplate.
   

   <!-- If you use NoXaml dlls set also BasedOn="{StaticResource RadTabItemStyle}" to the Style element -->
   <!-- https://docs.telerik.com/devtools/wpf/styling-and-appearance/xaml-vs-noxaml -->
   <Style x:Key="customTabItemStyle" TargetType="telerik:RadTabItem">
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="telerik:RadTabItem">
                   <!-- template here -->
               </ControlTemplate>
           <Setter.Value>
       </Setter>
   </Style>

3. In the ControlTemplate find the Border controls with x:Name set to "MouseOverVisual" and "SelectionVisual". Then, set their CornerRadius properties.
   
   
4. Apply the Style with the custom ControlTemplate to the tab items using the ItemContainerStyle property of RadTabControl.
   

   <telerik:RadTabControl ItemContainerStyle="{StaticResource customTabItemStyle}" />

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik

[Ras Ran]

if you don't mind would you give me a sample project related to this ?

[Martin Ivanov]

Hello Raneesras,

Can you tell me which theme do you use?

Regards,
Martin Ivanov
Progress Telerik

[Ras Ran]

hii....this is my code..i am using VisualStudio2013 theme..
<telerik:RadTabControl  Background="#FFD1D1D1"  BackgroundVisibility="Collapsed" telerik:StyleManager.Theme="VisualStudio2013" x:Name="radTabControlUC" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  DropDownDisplayMode="Visible" AllowDragReorder="True" ScrollMode="Item" CloseTabsOnMouseMiddleButtonDown="True" Visibility="Visible">



               <telerik:RadTabItem Visibility="Visible"  BorderBrush="#FFE0E0E0" x:Name="RadTabItemPurchase" Header="Purchase" Height="45" Width="145" FontSize="15" CloseButtonVisibility="Visible" IsPinned="True" >
                   <Viewbox HorizontalAlignment="Stretch"   Stretch="Fill" VerticalAlignment="Stretch" >
                       <ContentControl>
                           <Grid  Name="grdUCPurchase"   Background="White">
                               <Grid.RowDefinitions>
                                   <RowDefinition Height="Auto"/>
                                   <RowDefinition Height="*"/>
                               </Grid.RowDefinitions>
                               <DockPanel x:Name="ContentArea" Grid.Row="1" />
                           </Grid>
                       </ContentControl>
                   </Viewbox>
               </telerik:RadTabItem>
               <telerik:RadTabItem Visibility="Visible" BorderThickness="1" BorderBrush="#FFE0E0E0" x:Name="RadTabItemCriteria" Header="Purchase Book" Height="45" Width="145" FontSize="15" CloseButtonVisibility="Visible" IsPinned="True" >
                   <Viewbox HorizontalAlignment="Stretch"  Stretch="Fill" VerticalAlignment="Stretch" >
                       <!--<ContentControl>-->
                           <Grid  Name="grdUCCriteria"   Background="White">
                               <Grid.RowDefinitions>
                                   <RowDefinition Height="Auto"/>
                                   <RowDefinition Height="*"/>
                               </Grid.RowDefinitions>
                               <DockPanel x:Name="ContentCriteria" Grid.Row="1" />
                           </Grid>
                       <!--</ContentControl>-->
                   </Viewbox>
               </telerik:RadTabItem>

           </telerik:RadTabControl>

[Martin Ivanov]

Hello Raneesras,

I've attached a small sample project showing the approach I've described. I hope it helps. 

If you have other questions that are not related to the original topic of this thread, can you please open a new forum about it?

Regards,
Martin Ivanov
Progress Telerik

[Ras Ran]

Thank you so much Mr. Martin Ivanov....it helped me a lot