How to move the close button into tab header

18 posts, 0 answers
  1. SPE
    SPE avatar
    34 posts
    Member since:
    Sep 2010

    Posted 14 Oct 2010 Link to this post

    Hello.
    In default style, when I have multiple RadPanes inside RadDocking, the close button(the "X" button) for each RadPane is at the right upper corner of the RadDocking control.
    I want to move the close button inside each RadPane's header, next to the pane's title just like IE8 or Visual Studio.
    How can I achieve this?

    Thanks!

  2. Dani
    Admin
    Dani avatar
    848 posts
    Member since:
    Jul 2012

    Posted 14 Oct 2010 Link to this post

    Hello Sunmin,

    Thank you for your inquiry.

    Please find attached a working sample illustrating what you wish to achieve. You will notice that all styles for RadDocking are present in the MainPage.xaml.

    The Close button has been moved from PaneHeaderTemplate to DocumentTabChromeStyle and a Grid which contains the close button and the tab header has been added to PaneTemplate, PaneDocumentHostTemplate and PaneBottomTemplate.

    You will need to adjust the layout for the vertical tabs in the same three templates: PaneTemplate, PaneDocumentHostTemplate and PaneBottomTemplate.

    I hope this helps. If you need further assistance, please contact us again.


    Sincerely yours,
    Dani
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  3. Download a free trial of UI for WPF
  4. bydt
    bydt avatar
    7 posts
    Member since:
    May 2010

    Posted 26 Oct 2010 Link to this post

    Hi,
    i have the same problem here and it works.

    I've implemented this solution with these notes below :
    1. You cannot apply this solution into all themes
    2. sometimes the behaviour of close button is not right i.e i click the close button of x-pane but actually the closed pane is y-pane

    Cheers,

    Bayu 

  5. Dani
    Admin
    Dani avatar
    848 posts
    Member since:
    Jul 2012

    Posted 27 Oct 2010 Link to this post

    Hi Bydt,

    If you are using Windows7 theme, the process would be different since this theme is the only one that uses different Control Templates.

    If that is the case, please use the example below as reference.

    Key points:
    - Move the Close button from PaneHeaderTemplate to the followng templates:   x:Key="DocumentHostTemplate" , x:Key="PaneTemplate_Bottom"x:Key="PaneTemplate_Right", x:Key="PaneTemplate_Top",  x:Key="PaneTemplate_Left".

    - Modify the CommandParameter in the Close button as in the example below to force it to close the proper pane.

          <ControlTemplate TargetType="telerikDock:RadPane" x:Key="DocumentHostTemplate">
                <ContentControl x:Name="wrapper" Style="{StaticResource Pane_DocumentHostTabStyle}">
                    <Grid>
                        <!-- Close -->                   
                         <telerik:RadButton x:Name="HeaderCloseButton" Grid.Column="3"
    Command="telerikDock:RadDockingCommands.Close" CommandParameter="{Binding  RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource PaneHeader_CloseButtonStyle}" Margin="40 0 0 0" />
                          
                        <telerikNavigationPrimitives:TabItemContentPresenter x:Name="HeaderElement" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}">
                        </telerikNavigationPrimitives:TabItemContentPresenter>
                    </Grid>
    ...
    </ControlTemplate>



    Attached is the updated project for Windows7 theme. Please let me know if this solutions works well for you or if you need further assistance.


    Greetings,
    Dani
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  6. sean
    sean avatar
    6 posts
    Member since:
    Oct 2012

    Posted 21 Apr 2011 Link to this post

    Hello

    I'm trying to achieve the same thing and the provided example works fine.  However, we're concerned that adding almost 3,000 lines of style could cause issues when upgrading.  If the xaml changes in a new version, we would need to check if its changed and then perform the same tweaks.

    Is there a suggested way (or has anyone found a nice way) to handle this?

    Cheers,

    Sean

  7. Dani
    Admin
    Dani avatar
    848 posts
    Member since:
    Jul 2012

    Posted 26 Apr 2011 Link to this post

    Hello Sean,

    Basically, when applying a customization to a control, you are taking it out of its default look and it is inevitable that this customization will been to be revised when upgrading. Any customization, whether a simple or a complex one, will always need to be considered regardless of the control or the amount of XAML.
     
    Merging between version is the only option to keep you code updated. Please, note that breaking changes are rarely made, so the process of reviewing the XAML will rarely be needful. Nevertherless,  we can always provide you with detailed information as to what exactly has been changed. Further, we provide full assistance when any migration between different versions of XAML code is obligatory.

    Please, contact us in case you need help in upgrading any customizations on the RadDocking control in the future.

    Kind regards,
    Dani
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  8. sean
    sean avatar
    6 posts
    Member since:
    Oct 2012

    Posted 26 Apr 2011 Link to this post

    Hello

    Thanks for the reply.  It makes total sense, just a shame there's not a bit nicer way!

    Cheers,

    Sean

  9. Derek Kepler
    Derek Kepler avatar
    2 posts
    Member since:
    Mar 2010

    Posted 06 May 2011 Link to this post

    Hello,

    I am trying to use your sample for Windows7 and it works until I reference the "Telerik.Windows.Themes.Windows7" dll in my project which I seem to need to do to style other controls such as the Ribbon Bar and such.  Is there a work around for this?

  10. Dani
    Admin
    Dani avatar
    848 posts
    Member since:
    Jul 2012

    Posted 09 May 2011 Link to this post

    Hi Derek,

    You should not have any difficulties applying the Windows7Theme to other controls in your application. Attached is the same sample project extended to demonstrate such usage. The Windows7 theme will get applied regardless of whether it is set explicitly or as an application theme.

    If you experience any issues applying a theme, please share your approach.


    Kind regards,
    Dani
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  11. SPE
    SPE avatar
    34 posts
    Member since:
    Sep 2010

    Posted 24 May 2011 Link to this post


    Hi,

    I have a problem similar to problem of Derek Kepler.

    And Dani's solution doesn't seem to work.

    It shows rad pane "Without" close button on pane header.

    Thanks!

  12. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1715 posts
    Member since:
    Sep 2012

    Posted 25 May 2011 Link to this post

    Hello Sunmin,

    There was a problem in the demo. I fixed it and I'm attaching it to this post. Please accept our apologize.

    Regards,
    Miroslav Nedyalkov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  13. vishal sharma
    vishal sharma avatar
    6 posts
    Member since:
    Jan 2010

    Posted 14 Jun 2011 Link to this post

    Hello,

    The solution works fine, but close button always closes the 'SelectedPane', as passed in CommandParameter. I tried the solution given for Windows 7 theme, but it works only for Windows 7 theme. If you try to change style in solution closebuttoninpaneheader-0924-sl.zip (posted on Oct 14, 2010) and change the CommandParameter portion as suggested for Windows 7 theme, close button stops working.

    Thanks & Regards,
    Vishal

  14. Robert Bergman
    Robert Bergman avatar
    6 posts
    Member since:
    Nov 2009

    Posted 14 Jun 2011 Link to this post

    Hello,

    I tried solution posted on Oct 14th, 2010, as I am not using Windows 7 theme. The solution seems to be working fine, but it is having one issue. I tried creating many tabs and closing any of them, everytime only the selected tab gets closed.

    Then I tried changing CommandParameter as posted on Oct 27, 2010 in the same solution, but after this change close functionality stops working.

    Thanks.

  15. Dani
    Admin
    Dani avatar
    848 posts
    Member since:
    Jul 2012

    Posted 15 Jun 2011 Link to this post

    Hi Vishal, Robert,
     
    Due to differences in the control template of RadDocking for Windows7 theme and for all other themes, the solution posted will work for Windows7 theme only.

    I have prepared another sample that targets the default Office Black theme (you can use the approach for other themes different than Windows7, as well). The close button in the header closes the proper RadPane. If you omit the CommandParameter of the button, the currently SelectedPane will be closed. And if you set the CommandParameter to RelativeSource TemplatedParent, the Pane that owns the Close button will be closed.

    Please, search for the word "NOTE" in the sample to spot the changes.

    I hope this helps.


    Kind regards,
    Dani
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  16. Robert Bergman
    Robert Bergman avatar
    6 posts
    Member since:
    Nov 2009

    Posted 15 Jun 2011 Link to this post

    Hello Dani,

    Thanks a lot for the reply.That is exactly what I was looking for.

  17. Jose Jones
    Jose Jones avatar
    9 posts
    Member since:
    Oct 2008

    Posted 23 Mar 2012 Link to this post

    The example doesn't work with 2011 Q3...

    I'm not able to attach the new solution as it's not an image but you have to reapply the changes required to the new Windows 7 theme that you can get from the installer

    One question though, why do I have to set this specific theme?

    <telerik:Office_BlackTheme x:Key="Theme" />

    Also, I used this approache in my application to force the utilisation of a specific theme

     StyleManager.ApplicationTheme = ThemeManager.FromName("Windows7"); 

    Using it ruins the customization of the Docking theme

    Any ideas?

    Thanks for the support

  18. Dani
    Admin
    Dani avatar
    848 posts
    Member since:
    Jul 2012

    Posted 26 Mar 2012 Link to this post

    Hi Benoit,

    The sample should work fine with 2011 Q3 or 2011 Q3 SP1. Testing it showed it works as expected.

    Since the close button in RadPanes functionality is a commonly requested feature, it has been implemented and will be available since 2012 Q1 SP1 release, expected this week. The extra styling will not be necessary anymore.

    Setting the Office Black theme as a StaticResource is needed for all themable controls that have the telerik:StyleManager.Theme="{StaticResource Theme}" reference in order to stay consistent with the desired theme.

    Furthermore, setting an application theme will override your customizations. If you want to use a theme and a custom style, make sure your style is based on the theme, i.e. that your style matches the theme you wish to apply globally. Theming will also bear significant changes in the upcoming SP1 release, so I would suggest that you wait will it is out.

    I hope this will be helpful.


    All the best,
    Dani
    the Telerik team

    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  19. Jose Jones
    Jose Jones avatar
    9 posts
    Member since:
    Oct 2008

    Posted 26 Mar 2012 Link to this post

    Quite weird than that when I updated your project (273488_CloseButtonInPaneHeader-0924-SL) with assembly version 2011.3.1220.1050 (Silverlight 5) I received an error.  May be related to Silverlight 5 though...

    Anyways, I'm happy to see that you added this feature in the next sp...

    Thanks for your support...

Back to Top
Download a free trial of UI for WPF