Change Docking/Position runtime

6 posts, 0 answers
  1. Mikkel
    Mikkel avatar
    58 posts
    Member since:
    Aug 2012

    Posted 25 Oct 2011 Link to this post

    Hi there,

    I have a setup according to the XAML below in a view, and I want to be able to dock the "ReadingPane" top, left, right or bottom when clicking a button or a menu or whatever (just like the reading pane in MS Outlook), but I cannot figure out how to achieve this with your RadDocking...

    <UserControl x:Class="Test"
        mc:Ignorable="d"
        d:DesignHeight="366" d:DesignWidth="626" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
          
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadDocking Name="RadDocking" HasDocumentHost="False">
                <telerik:RadSplitContainer Name="RadSplitContainerToolBar" InitialPosition="DockedTop" Width="Auto" Height="26">
                    <telerik:RadPaneGroup Name="RadGroupToolBar">
                        <telerik:RadPane Name="RadPaneToolBar" PaneHeaderVisibility="Collapsed" CanUserPin="False" CanUserClose="False" CanFloat="False" CanDockInDocumentHost="False" />
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
      
                <telerik:RadSplitContainer Name="RadSplitContainerGridView" InitialPosition="DockedLeft">
                    <telerik:RadPaneGroup Name="RadGroupGridView">
                        <telerik:RadPane Name="RadPaneGridView" PaneHeaderVisibility="Collapsed" CanUserPin="False">
                            <sdk:Frame HorizontalAlignment="Stretch" Name="FrameGridView" VerticalAlignment="Stretch" />
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
      
                <telerik:RadSplitContainer Name="RadSplitContainerReadingPane" InitialPosition="DockedRight">
                    <telerik:RadPaneGroup Name="RadGroupReadingPane">
                        <telerik:RadPane Name="RadPaneReadingPane" PaneHeaderVisibility="Collapsed" CanUserPin="False">
                            <TextBlock>ReadingPane</TextBlock>
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
                  
            <telerik:RadButton Content="Test" Height="Auto" HorizontalAlignment="Left" Margin="39,0,0,0" Name="radButton1" VerticalAlignment="Top" Width="Auto" Click="radButton1_Click" />
            <telerik:RadButton Content="DockLeft" Height="Auto" HorizontalAlignment="Left" Margin="104,0,0,0" Name="radButtonDockLeft" VerticalAlignment="Top" Width="Auto" Click="radButtonDockLeft_Click" />
            <telerik:RadButton Content="DockTop" Height="Auto" HorizontalAlignment="Left" Margin="177,0,0,0" Name="radButtonDockTop" VerticalAlignment="Top" Width="Auto" Click="radButtonDockTop_Click" />
            <telerik:RadButton Content="DockRight" Height="Auto" HorizontalAlignment="Left" Margin="340,-1,0,0" Name="radButtonDockRight" VerticalAlignment="Top" Width="Auto" Click="radButtonDockRight_Click" />
            <telerik:RadButton Content="DockBottom" Height="Auto" HorizontalAlignment="Left" Margin="237,-1,0,0" Name="radButtonDockBottom" VerticalAlignment="Top" Width="Auto" Click="radButtonDockBottom_Click" />
        </Grid>
    </UserControl>

    I also tried with this XAML, with the DocumentHost in it:
    <UserControl x:Class="Test"
        mc:Ignorable="d"
        d:DesignHeight="366" d:DesignWidth="626" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
          
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadDocking Name="RadDocking">
                <telerik:RadDocking.DocumentHost>
                    <telerik:RadSplitContainer Name="RadSplitContainerGridView">
                        <telerik:RadPaneGroup Name="RadGroupGridView">
                            <telerik:RadPane Name="RadPaneGridView" Header="Description" Visibility="Collapsed" CanUserClose="False">
                                <sdk:Frame HorizontalAlignment="Stretch" Name="FrameGridView" VerticalAlignment="Stretch" />
                            </telerik:RadPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
                </telerik:RadDocking.DocumentHost>
      
                <telerik:RadSplitContainer Name="RadSplitContainerToolBar" InitialPosition="DockedTop" Width="Auto" Height="26">
                    <telerik:RadPaneGroup Name="RadGroupToolBar">
                        <telerik:RadPane Name="RadPaneToolBar" PaneHeaderVisibility="Collapsed" CanUserPin="False" CanUserClose="False" CanFloat="False" CanDockInDocumentHost="False" />
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
      
                <telerik:RadSplitContainer Name="RadSplitContainerReadingPane" InitialPosition="DockedLeft">
                    <telerik:RadPaneGroup Name="RadGroupReadingPane">
                        <telerik:RadPane Name="RadPaneReadingPane" PaneHeaderVisibility="Collapsed" Header="Reading Pane" CanUserPin="False">
                            <sdk:Frame HorizontalAlignment="Stretch" Name="FrameReadingPane" VerticalAlignment="Stretch" />
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
                  
            <telerik:RadButton Content="Test" Height="Auto" HorizontalAlignment="Left" Margin="39,0,0,0" Name="radButton1" VerticalAlignment="Top" Width="Auto" Click="radButton1_Click" />
            <telerik:RadButton Content="DockLeft" Height="Auto" HorizontalAlignment="Left" Margin="104,0,0,0" Name="radButtonDockLeft" VerticalAlignment="Top" Width="Auto" Click="radButtonDockLeft_Click" />
            <telerik:RadButton Content="DockTop" Height="Auto" HorizontalAlignment="Left" Margin="177,0,0,0" Name="radButtonDockTop" VerticalAlignment="Top" Width="Auto" Click="radButtonDockTop_Click" />
            <telerik:RadButton Content="DockRight" Height="Auto" HorizontalAlignment="Left" Margin="340,-1,0,0" Name="radButtonDockRight" VerticalAlignment="Top" Width="Auto" Click="radButtonDockRight_Click" />
            <telerik:RadButton Content="DockBottom" Height="Auto" HorizontalAlignment="Left" Margin="237,-1,0,0" Name="radButtonDockBottom" VerticalAlignment="Top" Width="Auto" Click="radButtonDockBottom_Click" />
        </Grid>
    </UserControl>
  2. Mikkel
    Mikkel avatar
    58 posts
    Member since:
    Aug 2012

    Posted 26 Oct 2011 Link to this post

    Seems removing RadSplitContainers from the RadDock and adding them in a specific order sometimes changes the docking position...
  3. DevCraft banner
  4. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 26 Oct 2011 Link to this post

    Hello Mikkel,

    In order to move the pane, first you need to remove it from the previous group using the RemoveFromParent method. Then you can set its new position. Please find more information in this help article.

    Hope this information helps.

    Kind regards,
    Konstantina
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  5. Mikkel
    Mikkel avatar
    58 posts
    Member since:
    Aug 2012

    Posted 26 Oct 2011 Link to this post

    Sorry but that didn't offer much help - I think that my XAML is not setup correctly with panes, splitters, groups etc.

    Do you have an example demonstrating what I describe above?
  6. Mikkel
    Mikkel avatar
    58 posts
    Member since:
    Aug 2012

    Posted 26 Oct 2011 Link to this post

    I have finally solved the docking layout with the XAML and Code Behind below, also see the attached image.

    XAML:
    <UserControl x:Class="GridView"
            xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
        mc:Ignorable="d"
        d:DesignHeight="414" d:DesignWidth="763" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
     
        <Grid>
            <telerik:RadDocking Name="RadDocking" HasDocumentHost="False">
     
                <telerik:RadSplitContainer Name="RadSplitContainerTop" InitialPosition="DockedTop" Width="Auto" Height="30">
                    <telerik:RadPaneGroup Name="RadGroupToolBar" Background="Transparent" BorderThickness="0">
                        <telerik:RadPane Name="RadPaneToolBar" PaneHeaderVisibility="Collapsed">
                            <telerik:RadToolBarTray Name="RadToolBarTray" VerticalAlignment="Top">
                                <telerik:RadToolBar Name="RadToolBar">
                                    <telerik:RadButton Content="Create New" Name="ButtonCreateNew" Click="ButtonCreateNew_Click" />
                                    <telerik:RadButton Content="Delete Selected" Name="ButtonDeleteSelected" Click="ButtonDeleteSelected_Click" />
                                </telerik:RadToolBar>
                            </telerik:RadToolBarTray>
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
     
                <telerik:RadSplitContainer Name="RadSplitContainerBottom" InitialPosition="DockedLeft" Orientation="Horizontal">
                    <telerik:RadPaneGroup Name="RadGroup1" >
                        <telerik:RadPane Name="GridViewPane" PaneHeaderVisibility="Collapsed">
                            <telerik:RadGridView x:Name="RadGridView" />
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
     
                    <telerik:RadPaneGroup Name="RadGroup2" >
                        <telerik:RadPane Name="ReadingPane" PaneHeaderVisibility="Collapsed">
                            <sdk:Frame Name="FrameReadingPane" />
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
     
            </telerik:RadDocking>
     
            <telerik:RadBusyIndicator Name="RadBusyIndicator" IsBusy="{Binding Path=IsBusy, ElementName=_domainDataSource}" telerik:Theming.Theme="Expression_Dark" />
        </Grid>
    </UserControl>


    Code Behind:
    private void radButtonDockLeft_Click(object sender, RoutedEventArgs e)
    {
        RadSplitContainerBottom.Orientation = Orientation.Horizontal;
        ReadingPane.RemoveFromParent();
        GridView.RemoveFromParent();
        RadGroup1.AddItem(ReadingPane, DockPosition.Left);
        RadGroup2.AddItem(GridView, DockPosition.Left);
    }
     
    private void radButtonDockRight_Click(object sender, RoutedEventArgs e)
    {
        RadSplitContainerBottom.Orientation = Orientation.Horizontal;
        ReadingPane.RemoveFromParent();
        GridView.RemoveFromParent();
        RadGroup1.AddItem(GridView, DockPosition.Left);
        RadGroup2.AddItem(ReadingPane, DockPosition.Left);
    }
     
    private void radButtonDockTop_Click(object sender, RoutedEventArgs e)
    {
        RadSplitContainerBottom.Orientation = Orientation.Vertical;
        ReadingPane.RemoveFromParent();
        GridView.RemoveFromParent();
        RadGroup1.AddItem(ReadingPane, DockPosition.Top);
        RadGroup2.AddItem(GridView, DockPosition.Top);
    }
     
    private void radButtonDockBottom_Click(object sender, RoutedEventArgs e)
    {
        RadSplitContainerBottom.Orientation = Orientation.Vertical;
        ReadingPane.RemoveFromParent();
        GridView.RemoveFromParent();
        RadGroup1.AddItem(GridView, DockPosition.Top);
        RadGroup2.AddItem(ReadingPane, DockPosition.Top);
    }

  7. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 27 Oct 2011 Link to this post

    Hi Mikkel,

    We are glad that you have resolved the issue yourself.

    Please let us know if you have further questions.

    Kind regards,
    Konstantina
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top
DevCraft banner