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

3 posts, 1 answers
  1. Anders
    Anders avatar
    80 posts
    Member since:
    Dec 2010

    Posted 17 Oct 2011 Link to this post

    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
  2. Answer
    Thomas
    Thomas avatar
    13 posts
    Member since:
    Jun 2011

    Posted 17 Oct 2011 Link to this post

    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: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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Anders
    Anders avatar
    80 posts
    Member since:
    Dec 2010

    Posted 27 Jan 2012 Link to this post

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