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

[Vladimir]

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?

EDIT:

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">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                
                    <Button Width="80" Height="36"  Content="Text" Grid.Column="0" Grid.Row="0"/>
                
                    <Border
                        Grid.Row="0"
                        Grid.Column="1"
                        Grid.RowSpan="2"
                        x:Name="Border"
                        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}"/>
                            </tk:DockingPanel>
                        </tk:RadDockPanel>
                    </Border>
                </Grid>
            </ControlTemplate>

 

[Vladimir Stoyanov]

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.

[Vladimir]

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?

[Vladimir Stoyanov]

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. 

Regards,
Vladimir Stoyanov
Progress Telerik