TabControl Style

[ITA]

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

[Sia]

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

 

 

[ITA]

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

[Sia]

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

 

 

[ITA]

Hi,

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

Best Regards
Rene