Docking Element Sizes + Programmatic Dock Position

[Andrew]

Hi,

3 questions please about RadDocking element sizes and positioning.

It's quite a simple layout: 1 dockable navigation (filters/selection) pane and 1 results/data pane in the document host.

There can only be 1 tab in each pane but the layout will be used by many different screen types.

---------------------------------------------------------------------------------

1) Is it possible to make the resize strip wider? - it's very narrow and often difficult to find. In the screenshot below I've set the RadPaneGroups' borders to be thick, leaving the obvious and narrow resize strip in between,

 

---------------------------------------------------------------------------------

2) Is it possible to make the compass targets larger - they're very small.

 

---------------------------------------------------------------------------------

3) It it possible to set the dock position programmatically? I've put a simple context menu in the TitleTemplate.

The first call to this always works but subsequent calls don't do anything:

private void OnPositionContextMenuClicked(object sender, RoutedEventArgs e)
{
     DockState ds = (DockState)((MenuItem)sender).Tag;

     if(this.NavigationSplitContainer.InitialPosition != ds)
     {
        this.NavigationSplitContainer.InitialPosition = ds;
     }
}

 

 

Here's the XAML (a simplified version of the demo code - the panes are injected programatically):

<UserControl x:Class="DM_Frontend_Views.TwoPaneDockingScreen"
             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:local="clr-namespace:DM_Frontend_Views"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:dock="clr-namespace:Telerik.Windows.Controls.Docking;assembly=Telerik.Windows.Controls.Docking"
             
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <!-- xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=QuickStart.Common" -->

    <UserControl.Resources>
        <ResourceDictionary>

            <SolidColorBrush x:Key="ContentForegroundBrush" Color="#FF020202" />
            <SolidColorBrush x:Key="LabelBrush" Color="#767676" />

            <DataTemplate x:Key="TitleTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="20" />
                    </Grid.ColumnDefinitions>
                    <ContentPresenter Content="{Binding}" Margin="0,0,75,0" />
                    <telerik:RadButton Grid.Column="1" x:Name="PositionButton" Content="^" Click="PositionButton_Click">
                        <telerik:RadButton.ContextMenu>
                            <ContextMenu Name="cm" StaysOpen="false">
                                <MenuItem Header="Left" Tag="{x:Static dock:DockState.DockedLeft}" Click="OnPositionContextMenuClicked"/>
                                <MenuItem Header="Right" Tag="{x:Static dock:DockState.DockedRight}" Click="OnPositionContextMenuClicked"/>
                                <MenuItem Header="Up" Tag="{x:Static dock:DockState.DockedTop}" Click="OnPositionContextMenuClicked"/>
                                <MenuItem Header="Down" Tag="{x:Static dock:DockState.DockedBottom}" Click="OnPositionContextMenuClicked"/>
                            </ContextMenu>
                        </telerik:RadButton.ContextMenu>
                    </telerik:RadButton>
                </Grid>
            </DataTemplate>

            <!-- <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Docking;component/FirstLook/Resources.xaml" />
            </ResourceDictionary.MergedDictionaries> -->

        </ResourceDictionary>
    </UserControl.Resources>

    <Grid Margin="8 0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <telerik:RadMenu Grid.Row="0">
            <telerik:RadMenuItem Header="FILE" />
            <telerik:RadMenuItem Header="EDIT" />
            <telerik:RadMenuItem Header="VIEW" />
        </telerik:RadMenu>

        <telerik:RadDocking x:Name="RadDocking"
                            RetainPaneSizeMode="DockingAndFloating"
                            CanAutoHideAreaExceedScreen="True"
                            Grid.Row="1" Margin="0 0 0 10"
                            BorderThickness="00"
                            Padding="0"                                                        
                            PreviewShowCompass="RadDocking_PreviewShowCompass">

            <!-- Navigation/selection pane -->
            <telerik:RadSplitContainer  MaxWidth="600" telerik:DockingPanel.InitialSize="296,150" MinWidth="300"
            Name="NavigationSplitContainer" InitialPosition="DockedLeft" BorderThickness="0,0,0,0">
                <telerik:RadPaneGroup x:Name="NavigationPaneGroup" BorderThickness="0,0,20,0">
                    <telerik:RadPane x:Name="NavigationPane" CanUserClose="False" CanFloat="True" CanDockInDocumentHost="False" TitleTemplate="{StaticResource TitleTemplate}" Title="">
                        <telerik:RadPane.Header>
                            <TextBlock FontSize="40" Text="Filters"/>
                        </telerik:RadPane.Header>
                        <telerik:RadPane.Content>
                            <Grid x:Name="NavigationContentGrid">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="17.5"/>
                                    <!-- Spacer -->
                                </Grid.RowDefinitions>
                            </Grid>
                        </telerik:RadPane.Content>
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>

            <!-- Data/results pane -->
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer x:Name="MainSplitContainer" BorderThickness="0,0,0,0">
                    <telerik:RadPaneGroup x:Name="MainPaneGroup" BorderThickness="20,0,0,0">
                        <telerik:RadPane x:Name="MainPane" Header="Main Pane" CanFloat="False" Visibility="Collapsed" CanUserClose="False">
                            <telerik:RadPane.Content>
                                <Grid x:Name="MainContentGrid">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="17.5"/>
                                        <!-- Spacer -->
                                    </Grid.RowDefinitions>
                                </Grid>
                            </telerik:RadPane.Content>
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>

        </telerik:RadDocking>
    </Grid>
</UserControl>

Any advice (maybe regarding Templates/Adorners) would be very much appreciated!

 

[Martin Ivanov]

Hello Andrew,

(1) Currently there isn't a suitable approach to change the resize strip length. This is because the length is determined at runtime based on the dock position of the pane groups and also on where the pane groups are displayed (in the document host, floating tool window or the items area). There is a feature request to allow changing the length (width or height, based on the position). 

(2) To change the compass buttons, you can use the PreviewShowCompass event. This will allow you to get the ButtonChrome elements that represent the buttons and change their size.

  private void RadDocking_PreviewShowCompass(object sender, PreviewShowCompassEventArgs e)
  {
      Dispatcher.BeginInvoke(new Action(() =>
      {
          var button = e.Compass.ChildrenOfType<ButtonChrome>();
          foreach (var item in button)
          {
              item.Width = 50;
              item.Height = 50;
          }
      }));            
  }

 

An alternative approach would be to modify the ControlTemplate of the Compass control. In the original template, you can find the four ButtonChrome elements and change their Width and Height values.

<telerikChromes:ButtonChrome x:Name="PART_LeftIndicator" Style="{StaticResource LeftIndicatorStyle}" Margin="3" Width="20" Height="26" CornerRadius="2 1 1 2" HorizontalAlignment="Left"/>
                            <telerikChromes:ButtonChrome x:Name="PART_TopIndicator" Style="{StaticResource TopIndicatorStyle}" Margin="3" Width="26" Height="20" CornerRadius="2 2 1 1" VerticalAlignment="Top"/>
                            <telerikChromes:ButtonChrome x:Name="PART_RightIndicator" Style="{StaticResource RightIndicatorStyle}" Margin="3" Width="20" Height="26" CornerRadius="1 2 2 1" HorizontalAlignment="Right"/>
                            <telerikChromes:ButtonChrome x:Name="PART_BottomIndicator" Style="{StaticResource BottomIndicatorStyle}" Margin="3" Width="26" Height="20" CornerRadius="1 1 2 2" VerticalAlignment="Bottom"/>

To apply the custom template, you can use the CompassStyle and RootCompassStyle properties of RadDocking.

(3) To change the dock state of the split container, you can use the RadDocking.DockState attached property.

 private void OnPositionContextMenuClicked(object sender, RoutedEventArgs e)
 {
     DockState ds = (DockState)((MenuItem)sender).Tag;
     var dockState = Telerik.Windows.Controls.RadDocking.GetDockState(this.NavigationSplitContainer);
     if (dockState != ds)
     {
         Telerik.Windows.Controls.RadDocking.SetDockState(this.NavigationSplitContainer, ds);
     }
 }

Regards,
Martin Ivanov
Progress Telerik