RadTabTitem styling

11 posts, 1 answers
  1. FirstName
    FirstName avatar
    6 posts
    Member since:
    Sep 2017

    Posted 08 Nov 2017 Link to this post

    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 !

  2. Answer
    Sia
    Admin
    Sia avatar
    745 posts

    Posted 10 Nov 2017 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Anthony
    Anthony avatar
    3 posts
    Member since:
    Dec 2017

    Posted 20 Mar 2018 in reply to Sia Link to this post

    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: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

     

     

     

  4. Sia
    Admin
    Sia avatar
    745 posts

    Posted 22 Mar 2018 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. ranees
    ranees avatar
    113 posts
    Member since:
    Nov 2018

    Posted 27 Jul Link to this post

    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  
  6. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2219 posts

    Posted 29 Jul Link to this post

    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 -->
      <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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. ranees
    ranees avatar
    113 posts
    Member since:
    Nov 2018

    Posted 29 Jul in reply to Martin Ivanov Link to this post

    if you don't mind would you give me a sample project related to this ?
  8. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2219 posts

    Posted 29 Jul Link to this post

    Hello Raneesras,

    Can you tell me which theme do you use?

    Regards,
    Martin Ivanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. ranees
    ranees avatar
    113 posts
    Member since:
    Nov 2018

    Posted 29 Jul in reply to Martin Ivanov Link to this post

    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>
  10. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2219 posts

    Posted 29 Jul Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. ranees
    ranees avatar
    113 posts
    Member since:
    Nov 2018

    Posted 29 Jul in reply to Martin Ivanov Link to this post

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