TabControl Style

5 posts, 1 answers
  1. ITA
    ITA avatar
    383 posts
    Member since:
    Aug 2009

    Posted 21 Oct 2014 Link to this post

    Hi,

    i use the TabControl and i want to change the Style of the Header like the attached pic.
    How can ein solve this?
    As you can see there is a space before the first TabItem and in the BAckground you
    can see some Information and some buttons.

    THanks a lot
    Best Regards
    Rene
  2. Answer
    Sia
    Admin
    Sia avatar
    667 posts

    Posted 23 Oct 2014 Link to this post

    Hello Rene,

    If you mean the margin between the whole tab control and its parent element, actually this can be done by setting margin to the RadTabControl. But if you need to edit the space between the headers of every two tab items then you need to set custom style for the RadTabControl.

    Please let us know which space exactly needs to be changed and which is the theme that you will base your custom style on so that we can provide you with an example how to achieve your goal.

    Regards,
    Sia
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. ITA
    ITA avatar
    383 posts
    Member since:
    Aug 2009

    Posted 23 Oct 2014 in reply to Sia Link to this post

    Hi,

    is use theme="Windows8". I Want to start with the first TabItem as you can see on the image, but i want to add a button on
    the left side of the TabItem. The Image is this what i want. The "Cockpit" TabItem is the first  TabItem in the TabControl.

    Thanks a lot
    Rene
  5. Sia
    Admin
    Sia avatar
    667 posts

    Posted 24 Oct 2014 Link to this post

    Hello Rene,

    Please find attached a small project with possible solution of your problem.
    There you can find a custom template set for the RadTabControl. The important change there are the two additional buttons which are added before the LayoutTransformControl:
    <telerik:RadButton telerik:RadDockPanel.Dock="Left" Margin="5 0 0 0"
                        Style="{StaticResource CustomButtonStyle}"
                        Click="RadButton_Click">
        <Path Data="M10,2 L1,10 L1,19 L7,19 L7,9 L13,9 L13,19 L19,19 L19,10 z M10,0 L20,10 L20,20 L12,20 L12,10 L8,10 L8,20 L0,20 L0,10 z" Stretch="None"
                Fill="{telerik:Windows8Resource ResourceKey=MainBrush}"
                SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </telerik:RadButton>
    <telerik:RadButton telerik:RadDockPanel.Dock="Left" Margin="5 0"
                        Style="{StaticResource CustomButtonStyle}"
                        Click="RadButton_Click">
        <Path Data="M0,10 9,20 11,20 3,11 20,11 20,9 3,9 11,0 9,0 z" Stretch="None"
                Fill="{telerik:Windows8Resource ResourceKey=MainBrush}"
                SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </telerik:RadButton>

    If you do not use tab controls with different layout than the default one in your application, you can delete the commented visual states in the TabControlTemplate.

    I hope this helps.

    Regards,
    Sia
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. ITA
    ITA avatar
    383 posts
    Member since:
    Aug 2009

    Posted 26 Oct 2014 in reply to Sia Link to this post

    Hi,

    thanks a lot, this is what i'm looking for!

    Best Regards
    Rene
Back to Top
UI for WPF is Visual Studio 2017 Ready