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

Dynamic Resize Pane Pains....

14 Answers 390 Views

Docking

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

This question is locked. New answers and comments are not allowed.

14 Answers, 1 is accepted

answered on 06 Aug 2009, 02:25 PM

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.

answered on 07 Sep 2009, 10:41 AM

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

answered on 08 Sep 2009, 07:20 AM

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

and this video: http://silverlight.net/learn/learnvideo.aspx?video=33733.

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.

answered on 18 Jan 2011, 05:54 PM

floating-pane.png

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

answered on 29 Jun 2012, 06:32 PM

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"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

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" />

</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;

}

answered on 05 Jul 2012, 11:04 AM

DockingAbsoluteSizes.zip

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 >>

answered on 10 Jul 2012, 04:27 PM

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"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

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" />

</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;

}

answered on 11 Jul 2012, 01:27 PM

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 >>