It is often necessary to customize the header of a RadPane. Really common is to need to put an image in the header, to bind that image to a property, etc. There are many scenarios in which you need to add some custom behavior to the header. One of this situations is when you need to have close button or another button in the header of the pane. The tricky thing here is that you need to implement an event handler for the Click event of the button and to write some code that will do something with the Pane.
In this post we will create a Docking control with some panes and the panes will have close buttons in their headers. This will be achieved by using the idea of attached behavior.
First of all we need to add the button to the header and just to have it displayed correctly. As in most of the controls for Silverlight (and WPF) you can do that using a DataTemplate. The DataTemplate, used for displaying the header of the pane, is the template set to the HeaderTemplate property. The DataContext in this template is the value of the Header property of the pane. Here is the XAML that will add “X” button to the header of the pane:
Now we may need to perform some action when the the button is clicked. In our case we will need to close the pane. We can add custom actions as response of events by using attached properties. We will create a static class, called CloseButton and will add the attached properties we need to it. Here is the code of the class without any actions implemented:
What this code does is to hook up to the Click event of the button of the IsCloseButton attached property is set to true and to remove the handler if it is set to false. Now we need just to close that pane that owns the button that was clicked. Here is one suggestion how you can do that:
What we need to do now is just to set this property to true for the button in the HeaderTemplate of the pane. Now we can run and try the application. We notice that it works correctly and accomplishes our main task – to add close button in the header of a pane and to make it close the pane when clicked without writing code-behind.
Now we can notice that the close button is displayed even in the AutoHide area and in the panes that are not in the DocumentHost area and we may want to not show them in these cases. We will implement attached property that if is set to true will hide the element to which is set when it is in a pane that is in an AutoHide area. You could use the same approach to implement different scenarios.
We will create attached property in the same class that will be called HideInAutoHideArea. Here is the code that will take care for adding the property and attaching the needed events:
As you could notice we are using the Loaded event of the visual element. This is because the only way for a Pane to move to the AutoHide area or to another PaneGroup is to be detached and reattached to the visual tree. Now we need to detect is the Pane in an AutoHide area or not. Here is the code that accomplishes this task:
Now we can just set both of the properties to true for the “X” button in the HeaderTemplate and the button will close the pane on click and will disappear when the pane is in the AutoHide area.
You can find the full source code here.
Subscribe to be the first to get our expert-written articles and tutorials for developers!