Dynamic Resize Pane Pains....

15 posts, 0 answers
  1. Doug
    Doug avatar
    22 posts
    Member since:
    Apr 2009

    Posted 04 Aug 2009 Link to this post

    I have a Panel that is in a pane group that is in a split container (just like the serverexplorer pane in the example).   This pane will be pinned/floated/docked etc.  The content of this pane will grow/shrink dynamically as the user makes changes within.

    I want to resize the pane, and therefore automatically adjust it’s various containers/states as my contents change.  I’m managing to manage some of this but it causes funky interference and mislayouts, obviously I’m going about this the wrong way.

    What are my options? Thanks in advance.

  2. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 06 Aug 2009 Link to this post

    Hello Doug,

    As this behavior of the Docking control is not by design it would be a little tricky to achieve what you want. First of all it depends in which cases you need to change the size of the Pane
    There are mainly 2 cases - when your pane is in a PaneGroup that is in a SplitContainer that is directly positioned in the Docking control. In this case you need to change the Width or Height of this SplitContainer
    The other case is when your SplitContainer is in another SplitContainer. In this case it needs to change its RelativeSize attached property. 

    The following code demonstrates how to manipulate both of these cases. You also need to know that you may have a complex scenario that may need manipulate not the direct parent of the parent PaneGroup of the pane, but a SplitContainer that is upper in the VisualTree. These complex scenarios are not implemented.

    private void ResizeHorizontal(RadPaneGroup group, double newWidth) 
        var sc = group.Parent as RadSplitContainer; 
        if (sc.Parent is RadDocking && 
            (RadDockPanel.GetDock(sc) == Dock.Left || RadDockPanel.GetDock(sc) == Dock.Right)) 
        { 
            sc.Width = newWidth; 
        } 
        else 
        { 
            // This case needs more efforts. 
            if (sc.Orientation == Orientation.Horizontal) 
            { 
                double relWidthSum = 
                    sc.Items.Select(i => 
                        { 
                            var ii = i as DependencyObject; 
                            if (ii != null
                            { 
                                return ProportionalStackPanel.GetRelativeSize(ii).Width; 
                            } 
                            return 0; 
                        }).Sum(); 
     
                double renderWidth = sc.RenderSize.Width; 
     
                Size oldRS = ProportionalStackPanel.GetRelativeSize(group); 
                ProportionalStackPanel.SetRelativeSize(group, new Size(relWidthSum * newWidth / renderWidth, oldRS.Height)); 
            } 
            else 
            { 
                // Go up and find the SplitContainer you need to resize. 
            } 
        } 
     
    private void ResizeVertical(RadPaneGroup group, double newHeight) 
        var sc = group.Parent as RadSplitContainer; 
        if (sc.Parent is RadDocking && 
            (RadDockPanel.GetDock(sc) == Dock.Top || RadDockPanel.GetDock(sc) == Dock.Bottom)) 
        { 
            sc.Height = newHeight; 
        } 
        else 
        { 
            // This case needs more efforts. 
            if (sc.Orientation == Orientation.Vertical) 
            { 
                double relHeightSum = 
                    sc.Items.Select(i => 
                        { 
                            var ii = i as DependencyObject; 
                            if (ii != null
                            { 
                                return ProportionalStackPanel.GetRelativeSize(ii).Height; 
                            } 
                            return 0; 
                        }).Sum(); 
     
                double renderHeight = sc.RenderSize.Height; 
     
                Size oldRS = ProportionalStackPanel.GetRelativeSize(group); 
                ProportionalStackPanel.SetRelativeSize(group, new Size(oldRS.Width, relHeightSum * newHeight / renderHeight)); 
            } 
        } 


    If you have further questions, don't hesitate to ask.

    Regards,
    Miroslav Nedyalkov
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  3. DevCraft banner
  4. Kingsley Magnus-Eweka
    Kingsley Magnus-Eweka avatar
    54 posts
    Member since:
    Aug 2009

    Posted 07 Sep 2009 Link to this post

    Hi
    could you show an implementation of how these methods work?
    I have a simiar issue where i have a radpane and have a stack panel witha number of controls within it, what i want to happen is simple when i float my radpane all of the controls within the stackpanel which is housed in the radpane should resize and scale to fit and show correctly in the radpane no matter if i resize (shrink, enlarge, stretch) my radpane, regarldess if it is floating, docked or tabbed this behaviour should persist: dynamic resizing and rescaling of all controls within the radpane (housed within stackpanel in the radpane)
    if you could please post a code sample and xaml on how to do this it would be most appreciated.

    Kingsley Magnus-Eweka
  5. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 08 Sep 2009 Link to this post

    Hello Kingsley,

    You can do this using Grid panel. Here is an example of what I mean:
    <telerikDocking:RadPane Header="Some pane"
        <Grid> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="*" /> 
                <RowDefinition Height="*" /> 
                <RowDefinition Height="*" /> 
                <RowDefinition Height="*" />                                     
            </Grid.RowDefinitions> 
     
            <Button Content="Child 1" Grid.Row="0" /> 
            <Button Content="Child 2" Grid.Row="1" /> 
            <Button Content="Child 3" Grid.Row="2" /> 
            <Button Content="Child 4" Grid.Row="3" /> 
        </Grid> 
    </telerikDocking:RadPane> 

    For more informating how to use Grid panel, refer to the following article: http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx

    If you have further questions, don't hesitate to ask.

    Regards,
    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.
  6. Kingsley Magnus-Eweka
    Kingsley Magnus-Eweka avatar
    54 posts
    Member since:
    Aug 2009

    Posted 09 Sep 2009 Link to this post

    thanks Miroslav,
    I will give it a go i currently have a way...i am doing it by adding the Radsplit container in a grid cell.. as illustrated in your demo for the weatherview raddocking in the examples.
  7. Rakesh
    Rakesh avatar
    42 posts
    Member since:
    Jun 2010

    Posted 18 Jan 2011 Link to this post

    Hello Telerik team,

    I have similar issue.

    I have a grid in my pane and when undocked\floating, I want the pane to get resized automatically.

    I donot have  a pre-defined size whereas I can specify the max height and width and then I want the pane to take exact size needed rather than some blank areas on the grid in edges.

    This is my xaml

    <telerikDock:RadDocking x:Name="rad_Docking" Height="285" Background="Gainsboro" >
    <telerikDock:RadDocking.DocumentHost >
    <telerikDock:RadSplitContainer telerikDock:RadDocking.FloatingLocation="10,10" telerikDock:RadDocking.FloatingSize="700,500" >
    <telerikDock:RadPaneGroup x:Name="tabMain" AllowDragReorder="False" >
    <telerikDock:RadPane Header="Tasks" CanUserClose="False">
    <ScrollViewer telerik:StyleManager.Theme="Office_Black" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Button x:Name="tabTask"/>
    </ScrollViewer>
    </telerikDock:RadPane>
    <telerikDock:RadPane Header="History" CanUserClose="False">
    <ScrollViewer telerik:StyleManager.Theme="Office_Black" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Button x:Name="tabHist"/>
    </ScrollViewer>
    </telerikDock:RadPane>
    </telerikDock:RadPaneGroup>
    </telerikDock:RadSplitContainer>
    </telerikDock:RadDocking.DocumentHost>
    </telerikDock:RadDocking>

     

     

     

    my code-behind event handler:
    void rad_Docking_PaneStateChange(object sender, Telerik.Windows.RadRoutedEventArgs e)
    {
    RadPane pane = e.Source as RadPane
     
    if (pane != null && pane.IsFloating) 
     {
     
    ToolWindow toolWindow = pane.ParentOfType<ToolWindow>(); 
     pane.MaxHeight = 700;
    pane.MaxWidth = 600;
    pane.Height = pane.ActualHeight;
    pane.Width = pane.ActualWidth;
    pane.UpdateLayout();
    }
    }

    2 Issues:
    1. Auto-Height Re-size ; I can provide max and min heights, widths respectively for floating pane
    2. Because of the extra space in Floating window and I have placed the usercontrol in Button, I can click the empty area as shown in pic \ Or Can I use any other control with content property inside the rad-pane and scrollviewer?


    Bottomline: I need to get the heights fixed properly

     

     

     

     

     

     

     

  8. George
    Admin
    George avatar
    1332 posts

    Posted 24 Jan 2011 Link to this post

    Hi Doug,

    Unfortunately, the RadDocking control doesn't support dynamically resizing of RadPanes.
    I would suggest you to use telerik:RadDocking.FloatingSize property. For more information, please refer to our online documentation - http://www.telerik.com/help/silverlight/raddocking-features-panes-docked-floating-panes.html

    Greetings,
    George
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  9. Joseph
    Joseph avatar
    11 posts
    Member since:
    Feb 2012

    Posted 29 Jun 2012 Link to this post

    I've tried dynamically resizing the SplitContainer as described in the second post in this thread.  However, changing the SplitContainer's width seems to have no visual effect.

    Here is the xaml:
    <UserControl x:Class="DockingTest.MainPage"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
      
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadDocking Background="White">
                <telerik:RadDocking.DocumentHost>
                    <telerik:RadSplitContainer>
                        <telerik:RadPaneGroup BorderThickness="0">
                            <telerik:RadDocumentPane Visibility="Collapsed"
                                                     CanUserClose="False"
                                                     PaneHeaderVisibility="Collapsed">
                                <telerik:RadTileView ItemsSource="{Binding Items}">
                                    <telerik:RadTileView.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Name}" />
                                        </DataTemplate>
                                    </telerik:RadTileView.ItemTemplate>
                                    <telerik:RadTileView.ContentTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Name}" />
                                        </DataTemplate>
                                    </telerik:RadTileView.ContentTemplate>
                                </telerik:RadTileView>
                            </telerik:RadDocumentPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
                </telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer x:Name="DockedSplitContainer"
                                           InitialPosition="DockedRight">
                    <telerik:RadPaneGroup>
                        <telerik:RadPane Header="Pane 1"
                                         IsPinned="False"
                                         PaneHeaderVisibility="Collapsed">
                            <Grid Background="Silver" />
                        </telerik:RadPane>
                        <telerik:RadPane Header="Pane 2"
                                         IsPinned="False"
                                         PaneHeaderVisibility="Collapsed">
                            <Grid x:Name="Pane2Grid"
                                  Background="Silver"
                                  HorizontalAlignment="Center"
                                  Loaded="Pane2Grid_Loaded">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Rectangle Width="80"
                                           Height="80"
                                           Fill="Black"
                                           Margin="5"
                                           Grid.Row="0" />
                                <Rectangle Width="80"
                                           Height="80"
                                           Fill="Black"
                                           Margin="5"
                                           Grid.Row="1" />
                                <Rectangle Width="80"
                                           Height="80"
                                           Fill="Black"
                                           Margin="5"
                                           Grid.Row="2" />
                            </Grid>
                        </telerik:RadPane>
                        <telerik:RadPane Header="Pane 3"
                                         IsPinned="False"
                                         PaneHeaderVisibility="Collapsed">
                            <Grid Background="Silver" />
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
        </Grid>
    </UserControl>

    Here is the code behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Telerik.Windows.Controls;
      
    namespace DockingTest
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
      
                this.DataContext = new MainViewModel();
            }
      
            private void Pane2Grid_Loaded(object sender, RoutedEventArgs e)
            {
                if(DockedSplitContainer.Parent is RadDocking &&
                    RadDockPanel.GetDock(DockedSplitContainer) == Dock.Right)
                    DockedSplitContainer.Width = Pane2Grid.ActualWidth;
            }
        }
    }
  10. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 03 Jul 2012 Link to this post

    Hi Joseph,

    In your sample code you are setting the Width of a root split container which should work correctly if the container is already initialized. Else its Width is set from the DockingPanel.InitialSize attached property. For more information on sizing SplitContainer you may refer to this article.

    Kind regards,
    Miroslav Nedyalkov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  11. Joseph
    Joseph avatar
    11 posts
    Member since:
    Feb 2012

    Posted 03 Jul 2012 Link to this post

    Can you explain what you mean by "if the container is already initialized?"  Also, can you give an example of how to set the SplitContainers width in code behind?  I added "telerk:DockingPanel.InitialSize='240,200'" to DockedSplitContainer, but the width still will not change to the width of the grid.
  12. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 05 Jul 2012 Link to this post

    Hello Joseph,

    Please refer to the attached project that demonstrates the idea.

    Kind regards,
    Miroslav Nedyalkov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  13. Joseph
    Joseph avatar
    11 posts
    Member since:
    Feb 2012

    Posted 09 Jul 2012 Link to this post

    Is there a way to make the resize work if the pane is not pinned?
  14. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 10 Jul 2012 Link to this post

    Hello Joseph,

    This article gives more information about Unpinned panes. For setting their size you could use the AutoHideWidth and AutoHideHeight properties.

    Hope this helps.

    Regards,
    Miroslav Nedyalkov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  15. Joseph
    Joseph avatar
    11 posts
    Member since:
    Feb 2012

    Posted 10 Jul 2012 Link to this post

    I think we are really close.  I have changed the code to use AutoHideWidth.  The problem is that the first time I open the pane, the width does not change.  On every subsequent opening of the pane, the width is resized.  Is there a better place to set the AutoHideWidth of the pane than the loaded event of the the Grid?  I even tried binding AutoHideWidth of the pane to the ActualWidth of the grid, but that didn't work at all.

    Here is the xaml:
    <UserControl x:Class="DockingTest.MainPage"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
      
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadDocking Background="White">
                <telerik:RadDocking.DocumentHost>
                    <telerik:RadSplitContainer>
                        <telerik:RadPaneGroup BorderThickness="0">
                            <telerik:RadDocumentPane Visibility="Collapsed"
                                                     CanUserClose="False"
                                                     PaneHeaderVisibility="Collapsed">
                                <telerik:RadTileView ItemsSource="{Binding Items}">
                                    <telerik:RadTileView.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Name}" />
                                        </DataTemplate>
                                    </telerik:RadTileView.ItemTemplate>
                                    <telerik:RadTileView.ContentTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Name}" />
                                        </DataTemplate>
                                    </telerik:RadTileView.ContentTemplate>
                                </telerik:RadTileView>
                            </telerik:RadDocumentPane>
                        </telerik:RadPaneGroup>
                    </telerik:RadSplitContainer>
                </telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer InitialPosition="DockedRight">
                    <telerik:RadPaneGroup>
                        <telerik:RadPane Header="Pane 1"
                                         IsPinned="False"
                                         PaneHeaderVisibility="Collapsed">
                            <Grid Background="Silver" />
                        </telerik:RadPane>
                        <telerik:RadPane x:Name="Pane2"
                                         Header="Pane 2"
                                         IsPinned="False"
                                         PaneHeaderVisibility="Collapsed">
                            <Grid x:Name="Pane2Grid"
                                  Background="Silver"
                                  HorizontalAlignment="Center"
                                  Loaded="Pane2Grid_Loaded">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Rectangle Width="80"
                                           Height="80"
                                           Fill="Black"
                                           Margin="5"
                                           Grid.Row="0" />
                                <Rectangle Width="80"
                                           Height="80"
                                           Fill="Black"
                                           Margin="5"
                                           Grid.Row="1" />
                                <Rectangle Width="80"
                                           Height="80"
                                           Fill="Black"
                                           Margin="5"
                                           Grid.Row="2" />
                            </Grid>
                        </telerik:RadPane>
                        <telerik:RadPane Header="Pane 3"
                                         IsPinned="False"
                                         PaneHeaderVisibility="Collapsed">
                            <Grid Background="Silver" />
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
        </Grid>
    </UserControl>

    Here is the code behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Telerik.Windows.Controls;
      
    namespace DockingTest
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
      
                this.DataContext = new MainViewModel();
            }
      
            private void Pane2Grid_Loaded(object sender, RoutedEventArgs e)
            {
                Pane2.AutoHideWidth = Pane2Grid.ActualWidth;
            }
        }
    }
  16. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 11 Jul 2012 Link to this post

    Hello Joseph,

    The problem is that when the pane content's Loaded event is fired, the value of the AutoHideWidth property is already used and the next time it is used is when the pane is shown again. Unfortunately setting the width to the popup element doesn't help as well as the animation is already started when the loaded event is fired and it overrides the width. This cannot be worked around only for initially unpinned panes which you'd like to be auto-sized and breaks only for the initial animation.

    All the best,
    Miroslav Nedyalkov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner