How to move the close button into tab header

[SPE]

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!

[Dani]

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

[bydt]

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 

[Dani]

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

[sean]

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

[Dani]

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

[sean]

Hello

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

Cheers,

Sean

[Derek Kepler]

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?

[Dani]

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

[SPE]

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!

[Miroslav Nedyalkov]

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

[vishal sharma]

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

[Robert Bergman]

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.

[Dani]

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

[Robert Bergman]

Hello Dani,

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

[Jose Jones]

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

[Dani]

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

[Jose Jones]

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...