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

RadPane Tab Overlapping Style

2 Answers 104 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 11 Aug 2014, 09:01 PM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Masha
Telerik team
answered on 14 Aug 2014, 06:43 AM
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) tabA 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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Christian
Top achievements
Rank 1
answered on 20 Aug 2014, 08:30 PM
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  
Tags
Docking
Asked by
Christian
Top achievements
Rank 1
Answers by
Masha
Telerik team
Christian
Top achievements
Rank 1
Share this question
or