Questions on UI for WPF Forum

1 answer

19 views

telerik:RadDocking custom ToolWindow base type

Hello,

With the telerik:RadDocking the content of the tab that I open expect a specific parent Window (of type like WindowBase) with utilities, notification, modals, ...

Then I drag out one of the docking pane the parent window is a ToolWindow, is there a way to create a custom ToolWindow or wrap the content of a ToolWindow in a custom UserControl ?

Thanks you,

Docking

answered on 19 Mar 2025

0 answers

18 views

While loading dock window xml, it prompts red lock icon.

I am facing an issue while loading the docking window saved XML to load. I have cross-checked XML files and found that there is no error in xml file. But while loading into an application it will show a red color lock icon.

Secondly, additional empty tabs will be shown along with other tabs. I have attached the screeshot. In screenshot, it has fixed window. But red icon can be seen in docking window also.

There are scenarios where empty tabs will be seen in mid of multiple tabs. But data collection don't have additional records.

Docking

TabControl

asked on 25 Feb 2025

1 answer

31 views

Docking Element Sizes + Programmatic Dock Position

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!

Docking

answered on 22 Jan 2025

1 answer

29 views

Use SlideIn/AutoHide to keep a pane expanded

Our ultimate goal is to have a pane - the "Zone Editor" be collapsed by default but fly out once a variable is set - we have achieved part of this behavior using the code segment below. However, when we lose focus on the pane, it flies away again, even if the IsActive variable is set to true. Is there a way to prevent this?

<telerik:RadSplitContainer InitialPosition="DockedRight" Orientation="Horizontal" >
    <telerik:RadPaneGroup Name="ZoneEditorPane">
        <zoneEditor:ZoneEditor IsActive="{Binding DataContext.IsZoneEditorVisible, ElementName=DockingControl, Mode=TwoWay}" AutoHideWidth="1075" />
    </telerik:RadPaneGroup>
</telerik:RadSplitContainer>

Docking

answered on 24 Dec 2024

1 answer

37 views

How can I pass KeyTriggers from a RadPane to the ToolWindow when created?

I am working on an application that uses a DockingPanesFactory to add RadPanes to a window. These RadPanes have KeyTriggers that do not execute when floating. I understand that it is because it becomes a ToolWindow and therefore it is not in the same visual tree. How can I make sure tgatvmy key triggers get passed to the ToolWindow so the commands execute?

Docking

TreeView

answered on 22 Nov 2024

0 answers

65 views

Move docking(and its children) panel when the main window is moving

Hello im using telerik version 2021.3.909
I have a RadDocking with a lot of RadPanes that are created with DockingPaneFactory
Most of those panes are FloatingDockable which means when i move my main screen the the 2nd(or any other) monitor those RadPanes stays afloat on the first screen.

I know i can change all of them to docking panels and this will solve my problem, but because i have a lot of RadPanes i cannot place them with Dock.Left/Right/etc

My goal is that all my RadPanes will move when the main window is moving(or resizing)

Docking

LayoutControl

Window

asked on 08 Aug 2024

2 answers

83 views

Correct Template for RadPanegRoup when TabStripPlacement is set to Top

Hi. Curently I faced with an issue that I cannot correctly hide tab if I have only one RadPane in the window.

What I am trying to to is the following: I wish to have PaneHeader if I have only one RadPane in the group and hide it and show tabs if more thatn one RadPane. Also I want to completely hide everything if this RadPane is inside ToolWindow. (Similar to Bottom template, but with differ that tabs are on top)

What I have currently:

It works when I undock it to ToolWIndow, but fails when I dock it again in the right/left parts of the docking control. Seems binding in the trigger simply does not work.

I am attaching my TopRadPane group Template. Please, point me what I am doing wrong:

<ControlTemplate x:Key="RadPaneGroupTopControlTemplate" TargetType="telerikDocking:RadPaneGroup">
        <Grid>
            <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <dock:RadGridResizer x:Name="DockResizer" Placement="Left" ShowsPreview="True" Visibility="Collapsed"/>
        <Border
                x:Name="HeaderTabs"
                Grid.Column="1">
            <Grid x:Name="ItemsContainer" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ItemsPresenter x:Name="ItemsPresenterElement" Margin="0"/>
                <telerik:RadButton x:Name="CloseButton"
                                   Grid.Column="1"
                                   Command="telerikDocking:RadDockingCommands.Close"
                                   Style="{StaticResource RadButtonDocumentCloseStyle}"
                                   Visibility="{Binding IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            </Grid>
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="Visibility" Value="Visible"/>
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=IsInToolWindow}" Value="true" />
                                <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=IsSingleItem}" Value="true" />
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Visibility" Value="Collapsed" />
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            
        </Border>
        <dock:PaneHeader Grid.Column="1" 
                         x:Name="HeaderElement" 
                         SelectedPane="{TemplateBinding SelectedPane}"
                         Visibility="Collapsed">
            <!-- <dock:PaneHeader.Style> -->
            <!--     <Style TargetType="dock:PaneHeader" BasedOn="{StaticResource PaneHeaderStyle}"> -->
            <!--         <Setter Property="Visibility" Value="Collapsed"/> -->
            <!--         <Style.Triggers> -->
            <!--             <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=., Converter={StaticResource HeaderVisibilityConverter}}" Value="True"> -->
            <!--                 <Setter Property="Visibility" Value="Visible"/> -->
            <!--             </DataTrigger> -->
            <!--         </Style.Triggers> -->
            <!--     </Style> -->
            <!-- </dock:PaneHeader.Style> -->
        </dock:PaneHeader>
        <Border x:Name="BorderVisual"
                Grid.Column="1"
                Grid.Row="1"
                Grid.RowSpan="1"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{TemplateBinding BorderBrush}"
                Background="{TemplateBinding Background}"/>
        <Border x:Name="AccentBorderVisual"
                Grid.Column="1"
                Grid.Row="1"
                Grid.RowSpan="1"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(helpers:ThemeHelper.CheckedBrush)}"
                Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedPane.IsActive, Converter={StaticResource BooleanToVisibilityConverter}}"/>
        <Grid Grid.Row="1" Grid.Column="1">
            <ContentPresenter x:Name="ContentElement"
                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
                    ContentTemplate="{TemplateBinding SelectedContentTemplate}"
                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                    Margin="{TemplateBinding Padding}"/>
            <Grid x:Name="ContentElementsPanel" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BooleanToVisibilityConverter}}"/>
        </Grid>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Left</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible"/>
                <Setter TargetName="DockResizer" Property="Grid.RowSpan" Value="3"/>
                <Setter TargetName="DockResizer" Property="Placement" Value="Left"/>
                <Setter TargetName="DockResizer" Property="MinWidth" Value="10"/>
            </Trigger>
            <Trigger Property="SplitterPosition">
                <Trigger.Value>
                    <Dock>Top</Dock>
                </Trigger.Value>
                <Setter TargetName="DockResizer" Property="Visibility" Value="Visible"/>
                <Setter TargetName="DockResizer" Property="Grid.ColumnSpan" Value="2"/>
                <Setter TargetName="DockResizer" Property="Placement" Value="Top"/>
                <Setter TargetName="DockResizer" Property="MinHeight" Value="10"/>
                <Setter TargetName="DockResizer" Property="VerticalAlignment" Value="Top"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="ContentElement" Property="Opacity" Value="{telerik:Office2019Resource ResourceKey=DisabledOpacity}"/>
                <Setter Property="Foreground" Value="{telerik1:Office2019Resource ResourceKey=DisabledForegroundBrush}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Docking

answered on 04 Jun 2024

0 answers

42 views

Null pane with custom RemovePane method

I'm getting a null reference exception when closing one of the pane and could not figure out why it is null in the RemovePane(RadPane pane) method.

We have override to that method,

protected override void RemovePane(RadPane pane)
        {
            if(pane.Header.ToString().ToLower()=="digital" || pane.Header.ToString().ToLower() == "analog")
                SaveDebugPaneLayout(pane);
            pane.DataContext = null;
            pane.Content = null;
            pane.ClearValue(RadDocking.SerializationTagProperty);
            pane.RemoveFromParent();
        }

And also the CreatePaneForItem method,

protected override RadPane CreatePaneForItem(object item)
        {
            var viewModel = item as DebugPaneViewModel;
            if (viewModel != null)
            {
                var pane = viewModel.IsDocument ? new RadDocumentPane() : new RadPane();

                pane.DataContext = item;
    
                if (viewModel.ContentType != null)
                {
                    if (viewModel.GetType().ToString().EndsWith("EditorViewModel")) 
                    {
                        if (pane.Content == null)
                        {
                            dynamic obj = Activator.CreateInstance(viewModel.ContentType);
                            pane.Content = obj;
                            obj.DataContext = viewModel;
                        }
                    }
                    else
                    {
                        pane.Content = Activator.CreateInstance(viewModel.ContentType);
                    }
                }

                RadDocking.SetSerializationTag(pane, viewModel.ID);
                return pane;
            }

            return base.CreatePaneForItem(item);
        }

How can I know which pane is null when it is executing the RemovePane(). I tried looking at when panes are being added but did not see anything suspicious.

Docking

asked on 31 May 2024

1 answer

47 views

Correctly style PaneHeaders in different RadPaneGroups

Hi, I have an issue trying to style RadDocking control.

I want that my PaneHeaders change their background when user selects them. I tried to modify RadPaneGroup ControlTemplate and RadPane Control Template, but with no luck. Could you please provide me detail sample for that?

One more question - how to correctly control height of the RadGroupHeader (Part where PaneHeaders *(tabs) are suited)? I simply dont understand which part of template should be responcible for that.

P.S. I am using Office 2019 theme.

Docking

answered on 30 May 2024

1 answer

86 views

Achieving Auto-Resizable RadSplitContainer in RadDocking

Hello,

I am currently working with RadDocking and trying to achieve the following scenario: I have three RadSplitContainers named left, middle, and right. My goal is to make the middle RadSplitContainer auto resizable when either the left or right Rad containers are set to auto hide. In other words, I want the middle container to automatically adjust its size to accommodate the space left by the hidden containers. Could you please guide me on how to achieve this behavior?

Thank you

Here is my code:

<telerik:RadDocking BorderThickness="0" Name="RadDocking" >
<telerik:RadSplitContainer Orientation="Vertical" InitialPosition="DockedLeft" Width="270" Height="840">
<telerik:RadPaneGroup Name="TopLeft" TabStripPlacement="Top" VerticalAlignment="Top" Height="200 " >
<telerik:RadPane Name="TopLeft1" Header="TopLeft1" >
</telerik:RadPane>
<telerik:RadPane Name="TopLeft2" Header="TopLeft2" />
</telerik:RadPaneGroup>
<telerik:RadPaneGroup Name="BottomLeft" TabStripPlacement="Top" >
<telerik:RadPane Name="BottomLeft1" Header="BottomLeft2">
</telerik:RadPane>
<telerik:RadPane Name="BottomLeft2" Header="BottomLeft2" >
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
<telerik:RadSplitContainer Width="600" >
<telerik:RadPaneGroup Background="GhostWhite" >
<telerik:RadPane Name="Middle1" Header="Middle" Tag="Blue" CanUserClose="True" Background="Transparent" >
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
<telerik:RadSplitContainer InitialPosition="DockedRight" Name="TopRight" Width="350" Height="640">
<telerik:RadPaneGroup >
<telerik:RadPane Header="TopRight" >
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking>

Thank you!

Docking

answered on 22 May 2024