RadPane Tab Overlapping Style

[Christian]

Hi Telerik support team,

I am trying to make the RadPane tabs overlapping a bit. (See attached screenshot)
I tried setting a negative margin by extending the radpane style like this:

<Style  TargetType="telerik:RadPane" BasedOn="{StaticResource RadPaneStyle}">
    <Setter Property="Margin" Value="-5 0 0 0" />
</Style>

 Actually this does not do the trick. The Items are overlapping, but the ZIndex for the selected Tab is not set correctly.
Also the RadPane border gets distorted.  

The following design is intended:
1. The First RadPane tabs should be left-aligned (no margin)
2. The tab to the right should be overlapped by the left (previous) tab
3. A selected tab should be top most (not overlapped by left tab)
4. Last tab should look independent of the other

Do you have any suggestions how to achieve this?

Thank you and best regards
Christian

[Masha]

Hi Christian,

Straight to your questions:

1. The First RadPane tabs should be left-aligned (no margin) - You may need to modify the PaneDocumentHostTemplate in order to remove the Margins. It is not recommended to set negative margin to the RadPane style.
2.  The tab to the right should be overlapped by the left (previous) tab &  A selected tab should be top most (not overlapped by left tab) - You may use SelectionChanged  handler of RadPaneGroup in order to control the PanelZindex of the selected RadDocumentPane.
3. Last tab should look independent of the other - I suggest that you create an explicit style based on the RadDocumentPaneStyle where the Margin property is updated . After that you need to apply it to the last RadDocumentPane to achieve the desired layout.

I've prepared a sample project where the approach is demonstrated using Summer theme.

I hope it helps.

Regards,
Masha
Telerik

 

 

[Christian]

Hi Masha,

thank you for sharing this solution. It is exactly what I was looking for.

Especially the idea to have a positive right margin defined on the wrapping grid and having the child controls to be placed partially outside of parent control by setting the negative right margin on the child is brilliant.

Thank you and best regards
Christian