Default layout and sizing of rad panes

4 posts, 1 answers
  1. Graham
    Graham avatar
    11 posts
    Member since:
    Jan 2010

    Posted 15 Jan 2010 Link to this post

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

    <> <>

    Height 20%

    Constant

    Height & Width

     

    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:

    <Grid x:Name="LayoutRoot">
      <telerikDocking:RadDocking Margin="0" x:Name="docking">

     

                <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

  2. Answer
    Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 19 Jan 2010 Link to this post

    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>
            </telerikDocking:RadPaneGroup>
     
            <telerikDocking:RadPaneGroup>
                <telerikDocking:RadPane Header="TopRight">
                    <TextBlock TextWrapping="Wrap"
                            Text="This pane is bigger than the top-right one, because its group is using the default relative width." />
                </telerikDocking:RadPane>
            </telerikDocking:RadPaneGroup>
        </telerikDocking:RadSplitContainer>
     
        <telerikDocking:RadSplitContainer Orientation="Vertical">
            <telerikDocking:RadPaneGroup
                    telerikDocking:ProportionalStackPanel.RelativeSize="100, 50">
                <telerikDocking:RadPane Header="Height: 20%" />
            </telerikDocking:RadPaneGroup>
            <!-- This group doesn't need RelativeSize as its default value is 100, 100. -->
            <telerikDocking:RadPaneGroup
                    telerikDocking:ProportionalStackPanel.RelativeSize="100, 100">
                <telerikDocking:RadPane Header="Height: 40%" />
            </telerikDocking:RadPaneGroup>
            <!-- This group doesn't need RelativeSize as its default value is 100, 100. -->
            <telerikDocking:RadPaneGroup
                    telerikDocking:ProportionalStackPanel.RelativeSize="100, 100">
                <telerikDocking:RadPane Header="Height: 40%" />
            </telerikDocking:RadPaneGroup>
        </telerikDocking:RadSplitContainer>
    </telerikDocking:RadDocking>

    Please, notice that setting VerticalAlignment, HorizontalAlignment, Width and Height properties of the split containers, pane groups and panes might affect in breaking the layout of the Docking control.

    Sincerely yours,
    Miroslav Nedyalkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Graham
    Graham avatar
    11 posts
    Member since:
    Jan 2010

    Posted 03 Feb 2010 Link to this post

    Miroslav

    Thank you very much for the solution provided - much appreciated.

    Although I have read the comments provided with the solution I don't understand them fully and would appreciate it if you could tell me where I could access some more information to get a better understanding of telerik docking.

     

    Thanks again
    Graham

  4. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 03 Feb 2010 Link to this post

    Hi Graham,

     You could refer to our online documentation: http://www.telerik.com/help/silverlight/raddocking-overview2.html.

    All the best,
    Miroslav Nedyalkov
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
Back to Top