Placing Closing-X in each pane header (as with VS)

[Anders]

Hi telerik,

It it possible to style the RadPanes in such a way that each header has it's own closing X instead of 'just' the one placed on the right hand side?

Thanks,

Anders, Denmark

[Thomas]

Hi Anders,

This can be done easily using a DataTemplate for the RadPane.HeaderTemplate. From reading the suggestions in the forums here, it looks much more difficult than it is. There is no need to alter the docking control's ControlTemplates or Styling as seen in most of the discussions.

These are the behaviors with the DataTemplate I created:

• Hide the close button if the tab has CanUserClose set to false
• Always show the close button on the selected tab (IsSelected = true)
• Show the close button when the mouse is over a non-selected tab

 

Here is the UserControl markup with the DataTemplate and global styles that I used:

<UserControl x:Class="MyApp.Core.Layout.LayoutView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:prism="clr-namespace:Microsoft.Practices.Prism.Regions;assembly=Microsoft.Practices.Prism"
    xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
    xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikChromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:core="clr-namespace:MyApp.Core;assembly=MyApp.Core"

    mc:Ignorable="d"
    d:DesignHeight="100"
    d:DesignWidth="100">

    <UserControl.Resources>
        <!-- PaneHeader DataTemplate with close button -->
        <DataTemplate x:Key="PaneHeaderDataTemplate">
            <DataTemplate.Resources>
                <Style x:Key="PaneHeaderCloseButtonStyle" TargetType="{x:Type telerikControls:RadButton}">
                    <Style.Resources>
                        <telerikControls:Office_BlackTheme x:Key="Theme"/>

                        <SolidColorBrush x:Key="ButtonIconBrush_Normal" Color="#FF696969"/>
                        <SolidColorBrush x:Key="ButtonIconBrush_MouseOver" Color="#FF000000"/>
                        <SolidColorBrush x:Key="ButtonIconBrush_Pressed" Color="#FF000000"/>
                        <SolidColorBrush x:Key="ButtonIconBrush_Disabled" Color="#FF8D8D8D"/>

                        <Style x:Key="CloseIconStyle" TargetType="{x:Type Path}">
                            <Setter Property="Data" Value="M0,0 L2,0 2,1 3,1 3,2 5,2 5,1 6,1 6,0 8,0 8,1 7,1 7,2 6,2 6,3 5,3 5,4 6,4 6,5 6,5 7,5 7,6 8,6 8,7 6,7 6,6 5,6 5,5 3,5 3,6 2,6 2,7 0,7 0,6 1,6 1,5 2,5 2,4 3,4 3,3 2,3 2,2 1,2 1,1 0,1 Z"/>
                            <Setter Property="Stretch" Value="Fill"/>
                            <Setter Property="VerticalAlignment" Value="Center"/>
                            <Setter Property="HorizontalAlignment" Value="Center"/>
                        </Style>
                    </Style.Resources>

                    <Setter Property="ToolTip" Value="Close"/>
                    <Setter Property="Width" Value="15"/>
                    <Setter Property="Height" Value="15"/>
                    <Setter Property="IsTabStop" Value="False" />
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="telerikControls:RadButton">
                                <Grid x:Name="LayoutRoot">
                                    <telerikChromes:ButtonChrome telerikControls:StyleManager.Theme="{StaticResource Theme}" RenderNormal="False" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
                                    <Path x:Name="Icon" Fill="{StaticResource ButtonIconBrush_Normal}" Margin="4,4,4,4" Style="{StaticResource CloseIconStyle}"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="Icon" Property="Fill" Value="{StaticResource ButtonIconBrush_MouseOver}"/>
                                    </Trigger>
                                    <Trigger Property="IsPressed" Value="True">
                                        <Setter TargetName="Icon" Property="Fill" Value="{StaticResource ButtonIconBrush_Pressed}"/>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter TargetName="Icon" Property="Fill" Value="{StaticResource ButtonIconBrush_Disabled}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </DataTemplate.Resources>

            <Grid Background="#00000000">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding}"
                           VerticalAlignment="Center"
                           TextTrimming="CharacterEllipsis"
                           TextWrapping="NoWrap"
                           Height="{Binding ElementName=CloseButton, Path=ActualHeight, Mode=OneWay}"/>
                <telerikControls:RadButton x:Name="CloseButton"
                                           Style="{StaticResource PaneHeaderCloseButtonStyle}"
                                           Command="telerikDocking:RadDockingCommands.Close"
                                           CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=telerikDocking:RadPane}, Mode=OneWay}"
                                           Visibility="Hidden"
                                           Margin="5,0,0,0"
                                           Grid.Column="1"/>
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=CanUserClose, RelativeSource={RelativeSource AncestorType=telerikDocking:RadPane}, Mode=OneWay}" Value="false">
                    <Setter Property="Visibility" Value="Collapsed" TargetName="CloseButton"/>
                </DataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=CanUserClose, RelativeSource={RelativeSource AncestorType=telerikDocking:RadPane}, Mode=OneWay}" Value="true"/>
                        <Condition Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=telerikDocking:RadPane}, Mode=OneWay}" Value="true"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Visibility" Value="Visible" TargetName="CloseButton"/>
                </MultiDataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=CanUserClose, RelativeSource={RelativeSource AncestorType=telerikDocking:RadPane}, Mode=OneWay}" Value="true"/>
                        <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Self}, Mode=OneWay}" Value="true"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Visibility" Value="Visible" TargetName="CloseButton"/>
                </MultiDataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

        <Style x:Key="PaneStyle" TargetType="{x:Type telerikDocking:RadPane}">
            <Setter Property="HeaderTemplate" Value="{StaticResource PaneHeaderDataTemplate}"/>
            <Setter Property="ContextMenuTemplate" Value="{x:Null}"/>
        </Style>

        <!-- Default styles applied to all panes and document panes -->
        <Style TargetType="{x:Type telerikDocking:RadDocumentPane}" BasedOn="{StaticResource PaneStyle}"/>
        <Style TargetType="{x:Type telerikDocking:RadPane}" BasedOn="{StaticResource PaneStyle}"/>
    </UserControl.Resources>

    <telerikDocking:RadDocking HasDocumentHost="true">
        <telerikDocking:RadDocking.DocumentHost>
            <telerikDocking:RadSplitContainer InitialPosition="DockedTop">
                <telerikDocking:RadPaneGroup prism:RegionManager.RegionName="{x:Static core:LayoutRegionNames.Document}"/>
            </telerikDocking:RadSplitContainer>
        </telerikDocking:RadDocking.DocumentHost>

        <telerikDocking:RadSplitContainer InitialPosition="DockedLeft">
            <telerikDocking:RadPaneGroup prism:RegionManager.RegionName="{x:Static core:LayoutRegionNames.Left}"/>
        </telerikDocking:RadSplitContainer>

        <telerikDocking:RadSplitContainer InitialPosition="DockedRight">
            <telerikDocking:RadPaneGroup prism:RegionManager.RegionName="{x:Static core:LayoutRegionNames.Right}"/>
        </telerikDocking:RadSplitContainer>

        <telerikDocking:RadSplitContainer InitialPosition="DockedBottom">
            <telerikDocking:RadPaneGroup prism:RegionManager.RegionName="{x:Static core:LayoutRegionNames.Bottom}"/>
        </telerikDocking:RadSplitContainer>
    </telerikDocking:RadDocking>
</UserControl>

Hope this helps.

[Anders]

Better late than never: Thanks! It was the solution I was looking for...