telerik:RadDocking section alignment

[Selvakumar]

Hi All,

I am using "telerik:RadDocking" in my wpf application.  I want to create a layout as follows - X1 is section 1, X2 is section 2 and X3 is section 3. (---- and | are section dividers)

X1 | X3

---- | X3

X2 | X3

X1 - using "telerik:RadSplitContainer" for defining section 1 and it contains non-editable data.

X2 - using "telerik:RadDocking.DocumentHost" for defining section 2 and it using for multiple "RadPane".

X3 - using "telerik:RadSplitContainer" for defining section 1 and it contains non-editable data.  It is single section with same height of X1+X2

Issue:

Section X3 has fixed width. if I try to reduce the width for X1, X2 then I can increase the width of the X3 control.  but the problem here is after the realignment I am unable to resize the section X1 and X2 and also X3 will overlap to other two section.  

If I resize the window then control is not aligning,  based on the window size I need to set some width for each section and these each section should support resizing also.

Please help me to fix this issue.  Please let me know if you need more information.

I appreciate your support in advance.

Thanks

Selvakumar R

 

[Nasko]

Hi Selvakumar,

We are not exactly sure that we completely understand the observed by you issue.

With the current version of RadDocking setting a fixed size to the Pane or Group is not supported and might lead to some unexpected behavior - in order to set a size to the Pane we suggest to use the ProportionalStackPanel.RelativeSize attached property. 

 

That panel is provided by the SplitContainer element in the Docking control and it inherits the default WPF panel class. Its RelativeSize property is used to divide the width and height occupied by the RadPaneGroups placed in the same RadSplitContainer. For example if you have two SplitContainers and you want the first one to occupy 1/3 of the available width you need to set the RelativeSize to "200,200" and the second SplitContainer should have size "400,200" - thus it will occupy the remaining 2/3. The same is also valid if you want to divide the height - 400 indicates the width of the size and 200 is the height.

Hope the provided information about he fixed sizes of the Docking control will be helpful for you.

Regards,
Nasko
Telerik

[Selvakumar]

Thanks for your support.  But after changing relative size also the screen is still same.  Please find the design of screen.
Container 3 width is always constant and it is not increasing or decreasing after setting the relative size.

User Control size
d:DesignHeight="800"
d:DesignWidth="1128"


<Grid Margin="0,0,5,5">
        <Grid Name="Grid2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
            </Grid.RowDefinitions>

                
                <telerik:RadDocking  Background="AliceBlue">

                    <telerik:RadSplitContainer InitialPosition="DockedRight" telerik:ProportionalStackPanel.RelativeSize="300, 200">
                        <telerik:RadPaneGroup>
                            <telerik:RadPane Header="Container 3" CanUserPin="False" CanUserClose="False">
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>


                <telerik:RadSplitContainer Orientation="Horizontal" InitialPosition="DockedTop" telerik:ProportionalStackPanel.RelativeSize="400, 100">
                        <telerik:RadPaneGroup>
                            <telerik:RadPane Header="Container 1" CanUserPin="False" CanUserClose="False" >
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>


                    <telerik:RadDocking.DocumentHost>
                        <telerik:RadSplitContainer telerik:ProportionalStackPanel.RelativeSize="400, 200">
                        <telerik:RadPaneGroup TabStripPlacement="Top">

                            <telerik:RadPane Header="Tab 1" CanUserPin="False" CanUserClose="False">
                            </telerik:RadPane>
                            
                            <telerik:RadPane Header="Tab 2" CanUserPin="False" CanUserClose="False">
                            </telerik:RadPane>
                            
                            <telerik:RadPane Header="Tab 3" CanUserPin="False" CanUserClose="False">
                            </telerik:RadPane>
                            
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
                    </telerik:RadDocking.DocumentHost>

                </telerik:RadDocking>

        </Grid>
    </Grid>

[Nasko]

Hi Selvakumar,

As already explained in my previous response setting a fixed size to the Pane or Group is not supported with the current version of RadDocking. Because of that fixed sizes could not be set to the panes docked Top and inside the DocumentHost.

If you want the size of the SplitContainer to the Right to change you need to change its current size. You could do that for example inside the SizeChanged event of the Window:

private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
    //implement your logic here for changing the sizes of the SplitContainer
    //this.rightSplitContainer1.Width=...
    //this.rightSplitContainer1.Height=...
}

Hope this helps.

Regards,
Nasko
Telerik