RadPane Tab Overlapping Style

3 posts, 1 answers
  1. Christian
    Christian avatar
    2 posts
    Member since:
    May 2014

    Posted 11 Aug 2014 Link to this post

    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. Answer
    Masha
    Admin
    Masha avatar
    355 posts

    Posted 14 Aug 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Christian
    Christian avatar
    2 posts
    Member since:
    May 2014

    Posted 20 Aug 2014 in reply to Masha Link to this post

    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  
Back to Top