This is a migrated thread and some comments may be shown as answers.

TabControl Style

4 Answers 308 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
ITA
Top achievements
Rank 1
ITA asked on 21 Oct 2014, 09:46 AM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Sia
Telerik team
answered on 23 Oct 2014, 12:40 PM
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.

 
0
ITA
Top achievements
Rank 1
answered on 23 Oct 2014, 01:48 PM
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
0
Sia
Telerik team
answered on 24 Oct 2014, 04:22 PM
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.

 
0
ITA
Top achievements
Rank 1
answered on 26 Oct 2014, 01:10 PM
Hi,

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

Best Regards
Rene
Tags
TabControl
Asked by
ITA
Top achievements
Rank 1
Answers by
Sia
Telerik team
ITA
Top achievements
Rank 1
Share this question
or