How to add unusable area inside RadDocking but place a usable button in that area

1 Answer 15 Views
Top achievements
Rank 1
Vladimir asked on 05 May 2021, 01:42 PM | edited on 10 May 2021, 03:20 PM

I have a RadDocking element in my xaml. I need to add one main button that opens and closes the main menu above the RadDocking element.

The problem is, the RadPane-s that open inside the RadDocking element would go below the button and the title of a given RadPane is hidden.

I want my main button to be above the RadDocking element, but the header/title of all the panes should be at all time visible and not hidden by the button.

I was wondering, can there be some constrained area inside RadDocking tag where RadPanes would not go or cover, so I can place my button above the RadDocking in that area?

Seems a bit non-sense but there has to be a way.

Should I use conditional docking? But how would that work, mark each new pane with a tag and then choose HeaderTemplate with HeaderTemplateSelector whether to add or not, space to the left in the RadPane header?


I maybe need some polygon-like container element that supports direct content. I need to be able to dock on right and below the button but panes should not go below the button and hide their title.

Check attached image.

Here is my modified ControlTemplate:

<ControlTemplate x:Key="RadDockingControlTemplate" TargetType="tk:RadDocking">
                <Grid x:Name="Root">
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>

                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    <Button Width="80" Height="36"  Content="Text" Grid.Column="0" Grid.Row="0"/>
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}">
                        <tk:RadDockPanel x:Name="RootDockPanel">
                            <dock:AutoHideArea x:Name="LeftAutoHide" tk:RadDockPanel.Dock="Left" TabStripPlacement="Left" BackgroundVisibility="Collapsed" TabOrientation="Vertical"/>
                            <dock:AutoHideArea x:Name="RightAutoHide" tk:RadDockPanel.Dock="Right" TabStripPlacement="Right" BackgroundVisibility="Collapsed" TabOrientation="Vertical"/>
                            <dock:AutoHideArea x:Name="TopAutoHide" tk:RadDockPanel.Dock="Top" TabStripPlacement="Top" BackgroundVisibility="Collapsed" TabOrientation="Horizontal"/>
                            <dock:AutoHideArea x:Name="BottomAutoHide" tk:RadDockPanel.Dock="Bottom" TabStripPlacement="Bottom" BackgroundVisibility="Collapsed" TabOrientation="Horizontal"/>
                            <tk:DockingPanel x:Name="ContentDockPanel" Margin="0">
                                <dock:DocumentHost x:Name="DocumentHost" IsTabStop="{TemplateBinding IsTabStop}"/>


Vladimir Stoyanov
Telerik team
commented on 10 May 2021, 10:19 AM

Hello, Vladimir

To answer your question directly - you can consider extracting and editing the ControlTemplate of the RadDocking. This way you can place the button inside the RadDocking and it will be arranged along with the other elements in the control. 

If the above suggestion proves unhelpful, may I ask you to share some picture(s) demonstrating your current setup? You can also provide some xaml showing how the view is arranged. This will hopefully allow me to get a better understanding of the scenario and further assist you.

Top achievements
Rank 1
commented on 10 May 2021, 03:13 PM | edited

Hmm good idea. However, it works the same like it is working at the moment. Check the edit I added. Also if the moderator can delete the answer i added?

1 Answer, 1 is accepted

Sort by
Vladimir Stoyanov
Telerik team
answered on 13 May 2021, 07:53 AM

Hello Vladimir,

Thank you for the update. I deleted the answer as requested. 

I noticed that you have added two RowDefinitions and ColumnDefinitions to the ControlTemplate and placed the Button in the first row and column. My suggestion would be to skip the ColumnDefinitions and to only include the RowDefinitions. Alternatively, you can place the Button inside the RadDockPanel.

I am attaching a sample project demonstrating the above suggestions with the ControlTemplate from the Fluent theme. Do check it out and let me know, if it helps. 

Vladimir Stoyanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Asked by
Top achievements
Rank 1
Answers by
Vladimir Stoyanov
Telerik team
Share this question