Remove Rounded Corners and Other styling from RadTabItem

2 posts, 0 answers
  1. Eli Schleifer
    Eli Schleifer avatar
    5 posts
    Member since:
    Jul 2009

    Posted 02 Aug 2010 Link to this post

    I would like to remove the padding and rounded corners of the RadTabItems. I am using the following code. I spent around 2 hours trying to figure out how to style it...but no luck.

     

     

     

     

    <telerikNavigation:RadTabControl x:Name="mStrip" Margin="5"

     

     

     

    Grid.Row="1" FontSize="15" TabOrientation="Vertical" TabStripPlacement="Left" Align="Right" BorderThickness="0" ItemsSource="{Binding Players}" DropDownButtonStyle="{StaticResource AgricolaTabStyle}">

     

     

     

     

    <telerikNavigation:RadTabControl.ItemContainerStyle> 

     

     

     

     

    <Style TargetType="telerikNavigation:RadTabItem">

     

     

     

     

    <Setter Property="HeaderTemplate">

     

     

     

     

    <Setter.Value>

     

     

     

     

    <DataTemplate>

     

     

     

     

    <Border Background="{Binding Color}" Width="300" Height="50">

     

     

     

     

    <TextBlock Text="{Binding User.DisplayName}" Foreground="{Binding Foreground}" FontSize="16" VerticalAlignment="Center"/>

     

     

     

     

    </Border>

     

     

     

     

     

    </DataTemplate>

     

     

     

     

    </Setter.Value>

     

     

     

     

    </Setter>

     

     

     

     

     <Setter Property="ContentTemplate">

     

     

     

     

     <Setter.Value>

     

     

     

     

     <DataTemplate>

     

     

     

     

     <Border BorderThickness="2" BorderBrush="{Binding Color}">

     

     

     

     

     <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="White">

     

     

     

     

     <local:UserDetailLineItem HorizontalAlignment="Center" VerticalAlignment="Center" Margin="3"/>

     

     

     

     

     </Grid>

     

     

     

     

     </Border>

     

     

     

     

     </DataTemplate>

     

     

     

     

     </Setter.Value>

     

     

     

     

     </Setter>

     

     

     

     

     </Style>

     

     

     

     

     </telerikNavigation:RadTabControl.ItemContainerStyle>

     

     

     

     </telerikNavigation:RadTabControl>

     

  2. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 05 Aug 2010 Link to this post

    Hi Eli Schleifer,

    You need to edit the ControlTemplate of the RadTabItem.

    I am attaching a project where I have edited the template to remove the rounded corners. I have not removed any padding, but I hope that you will be able to edit them out as you see fit.

    The TabControl is not databound, but you will be able to reuse the styles in your case as well.


    Best wishes,
    Miroslav
    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
Back to Top