This is a migrated thread and some comments may be shown as answers.

Default layout and sizing of rad panes

3 Answers 504 Views

Docking

This is a migrated thread and some comments may be shown as answers.

Graham asked on 15 Jan 2010, 03:34 PM

The following describes how we are required to set up the default Rad Docking Panes:

<> <>

Height 20%	Constant Height & Width
Height 20%	Height - whatever is left Constant Width
Height 40%
Height 40%

There are three panes on the left hand side (LHS) that are in a splitter docked to the bottom with horizontal alignment. These should occupy the whole height of the container and be in the proportion 20:40:40.

There are two panes on the right hand side (RHS) that are is a splitter docked to the RHS with vertical alignment. It is required that the top pane has a fixed height and the top pane occupies the remainder of the height. I would like the top pane to have a fixed width and height even when the user makes it floating.

Below is the XAML that I am using:

            <telerikDocking:RadSplitContainer InitialPosition="DockedRight" Width="324" Orientation="Vertical" MinWidth="324" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

                <telerikDocking:RadPaneGroup VerticalAlignment="Top" MinHeight="15">
                    <telerikDocking:RadPane Header="Plan Time" CanUserClose="False">
                        <local:TimeSliderView x:Name="planTimeView" Height="50" MinHeight="50" MaxHeight="50"/>
                    </telerikDocking:RadPane>
                </telerikDocking:RadPaneGroup>

                <telerikDocking:RadPaneGroup Height="Auto" VerticalAlignment="Stretch" Margin="0" HorizontalAlignment="Stretch">
                    <telerikDocking:RadPane Header="MovesByTime" VerticalAlignment="Stretch" CanUserClose="False">
        <moveByTime:MovesView x:Name="movesView" Width="Auto" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
        </telerikDocking:RadPane>
        <telerikDocking:RadPane Header="Conflitcts" VerticalAlignment="Bottom" CanUserClose="False"/>
       </telerikDocking:RadPaneGroup>
   </telerikDocking:RadSplitContainer>

            <telerikDocking:RadSplitContainer InitialPosition="DockedBottom" Height="420" Orientation="Vertical">

                <telerikDocking:RadPaneGroup>
                    <telerikDocking:RadPane Header="Pane01" CanUserClose="False">
                        <local:MyControl x:Name="pane01Control"/>
                    </telerikDocking:RadPane>
                </telerikDocking:RadPaneGroup>

                <telerikDocking:RadPaneGroup Height="Auto">
                    <telerikDocking:RadPane Header="Pane02" CanUserClose="False">
                        <local:MyControl x:Name="pane02Control" />
                    </telerikDocking:RadPane>
                </telerikDocking:RadPaneGroup>

                <telerikDocking:RadPaneGroup>
                    <telerikDocking:RadPane Header="Pane03" CanUserClose="False">
     <local:MyControl x:Name="pane03Control" />
    </telerikDocking:RadPane>
    </telerikDocking:RadPaneGroup>
   </telerikDocking:RadSplitContainer>

</telerikDocking:RadDocking>
</Grid>

Any help would be much appreciated.

Thanks
Graham

3 Answers, 1 is accepted

Accepted

answered on 19 Jan 2010, 01:58 PM

Hi Graham,

Here is the XAML you need - the explanations are in comments in the XAML:

<!--The HasDocumentHost property will let you remove the DocumentHost area and make the last split container to

fill the space left.-->

<telerikDocking:RadDocking HasDocumentHost="False">

<!-- The telerikDocking:DockingPanel.InitialSize attached property is setting the actual width or height of

a root-level SplitContainer(that is directly added to the Docking control), depending on its dock position.

This split container has InitilPosition DockedRight, so only the Width will be used.-->

<telerikDocking:RadSplitContainer Orientation="Vertical" InitialPosition="DockedRight"

telerikDocking:DockingPanel.InitialSize="300, 240">

<!--The telerikDocking:ProportionalStackPanel.RelativeSize property is setting the relative size

of an element that is in a SplitContainer. The default value is 100, 100. The actual width and

height are calculated using the orientation of the split container and relative sizes of all of

its children.-->

<telerikDocking:RadPaneGroup

telerikDocking:ProportionalStackPanel.RelativeSize="100, 20">

<telerikDocking:RadPane Header="TopRight">

<TextBlock TextWrapping="Wrap"

Text="This pane will have constant width, but cannot have constant height." />

</telerikDocking:RadPane>