Resizing between two RadDocking Controls and Real Closing of Panes

[Lior ef]

hi guys,

i've been trying out the RadDock control via "RadControls_for_WPF_2009_3_1314_TRIAL.msi" for the past two and something weeks for my company, we're looking to buy docking capabilities to our WPF .Net 3.5 app.

it's looks great, feels great, and easy to program with - NICE work you guys.

some things that i need some help with trying the control:

my basic WPF app - in XAML: i've put a dock panel in a window inside a grid. added an expander (RadExpander of course) docked to the right side. added two RadDock controls one of them docked to the Top and one to the Bottom.

1. i had to set the DockPanel.Dock attached property on both RadDock controls - 

when i set only one to dock to the Top and nothing on the other one - the RadDock didn't show... although it should make the second RadDock fill the available space in the panel, no?

2. i want to be able to resize each of the RadDock controls, 'cause now i can't really control their size as a user on run time. i thought about putting them into a grid with splitter between them, but is that the best way?

3. in that same example - when i drag a pane from the top-docked RadDock control - moving it downwards makes it "hide" behind the bottom-docked RadDock control (that's normal i guess?) but dragging it to the right i can move it, still floated, on top of the RadExpander, it's looks odd 'cause it's hiding behind the bottom-docked RadDock control but on top of the RadExpander,

any ideas of making it look better?

4. the Close button on a pane makes it Hidden (that's great!) but in our app we have the need sometimes to create a lot of floated panes that the user can close and open new ones, i wanna know if there is a way to "really" close the pane i.e. get ride of it, dispose it - whatever, my fear is from large memory usage because some of these panes store lots of data and controls in them,

i'm working on trying big quantities of data and control in panes to see what happens - thought about asking first how to deal with it.

hope i was able to explain myself clearly,

thank you so much in advance.

Lior.

[Miroslav Nedyalkov]

Hello Lior,

 

First of all I'd like to thank you for the good word about the controls.

 I'll answer your questions in the same order:

1. I don't fully understand what is you do in you application and what is wrong. If you could provide a sample XAML for what you explained we could better help in this.

2. This should work fine - I guess there is problem with the configuration of the Docking control. Providing a XAML should help us understand what the problem is and help you solving it.

3. This is because the ToolWindows are currently shown in the Docking control (in a Canvas panel that is in the Docking control). Because of this the ToolWindows are actually part of the layout, so they could be be behind some elements or in front of them.

 We've created a better implementation that enables you to drag the ToolWindows even out of the current window. This implementation will be included in the next release (Q1) and will be included in the upcoming beta as well (it should be available at the end of the month). Hope this time-frame is good for you.

4. What you could do is to handle the PaneClose event of the Docking control that is fired every time a pane is closed. At this point you have two options - you could call its RemoveFromParent method that will dispose it or you could unload its content to save memory. If you decide to use the second option you may handle the PaneOpen event of the Docking control and reload the content of the pane.

Hope this information helps.

Sincerely yours,
Miroslav Nedyalkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Lior ef]

Hi Miroslav,
thanks for the reply.

i'll continue with the original numbering of issues if you don't mind.

about 1 - 3, this is the XAML code

<Window x:Class="DEMO.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:radDock="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"
    xmlns:radNav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    Title="Window1" Height="700" Width="900">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>

        <radNav:RadMenu Grid.Row="0">
            <radNav:RadMenuItem Header="Menu Category #1">
                <TextBlock> Menu Item #1 </TextBlock>
            </radNav:RadMenuItem>
            <radNav:RadMenuItem Header="Menu Category #2">
                <TextBlock> Menu Item #2</TextBlock>
            </radNav:RadMenuItem>
            <radNav:RadMenuItem Header="Menu Category #3">
                <TextBlock> Menu Item #3</TextBlock>
            </radNav:RadMenuItem>
        </radNav:RadMenu>

        <ScrollViewer CanContentScroll="False" HorizontalScrollBarVisibility="Auto"
                      VerticalScrollBarVisibility="Auto" Grid.Row="1">
            <radNav:RadToolBar>
                <telerik:RadWrapPanel>
                    <telerik:RadButton>ToolBar Item #1</telerik:RadButton>
                    <telerik:RadButton>ToolBar Item #2</telerik:RadButton>
                </telerik:RadWrapPanel>
                <radNav:RadToolBarSeparator/>
                <telerik:RadWrapPanel>
                    <telerik:RadButton>ToolBar Item #3</telerik:RadButton>
                    <telerik:RadButton>ToolBar Item #4</telerik:RadButton>
                </telerik:RadWrapPanel>
            </radNav:RadToolBar>
        </ScrollViewer>

        <DockPanel Grid.Row="2">
            <telerik:RadExpander ExpandDirection="Left" IsExpanded="True" DockPanel.Dock="Right">
                <ScrollViewer CanContentScroll="False" HorizontalScrollBarVisibility="Auto"
                              VerticalScrollBarVisibility="Auto">
                    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
                        <telerik:RadButton> Rad Button #1 </telerik:RadButton>
                        <telerik:RadButton>Rad Button #2</telerik:RadButton>
                        <telerik:RadButton>Rad Button #3</telerik:RadButton>
                        <telerik:RadButton>Rad Button #4</telerik:RadButton>
                        <telerik:RadButton>Rad Button #5</telerik:RadButton>
                        <telerik:RadButton>Rad Button #6</telerik:RadButton>
                    </StackPanel>
                </ScrollViewer>
            </telerik:RadExpander>

            <radDock:RadDocking x:Name="MainDockingControl" FlowDirection="RightToLeft" DockPanel.Dock="Top">

                <radDock:RadDocking.DocumentHost>
                    <radDock:RadSplitContainer>
                        <radDock:RadPaneGroup Name="pngMainInDocumentHost" >
                            <radDock:RadPane Header="pane #1">
                                <StackPanel>
                                    <telerik:RadButton Name="CreateNewFloat" Click="CreateNewFloat_Click">
                                        Creat New Float Pane
                                    </telerik:RadButton>

                                    <GroupBox>
                                        <GroupItem>
                                        <StackPanel>
                                            <telerik:RadRadioButton>Radio Button #1</telerik:RadRadioButton>
                                            <telerik:RadRadioButton>Radio Button #1</telerik:RadRadioButton>
                                            <telerik:RadRadioButton>Radio Button #1</telerik:RadRadioButton>
                                            <telerik:RadRadioButton>Radio Button #1</telerik:RadRadioButton>
                                        </StackPanel>
                                        </GroupItem>
                                    </GroupBox>
                                </StackPanel>
                            </radDock:RadPane>

                            <radDock:RadPane Header="pane #2">
                                <TextBlock> This Is Pane #2 </TextBlock>
                            </radDock:RadPane>

                            <radDock:RadPane Header="pane #3">
                                <TextBlock> This Is Pane #3</TextBlock>
                            </radDock:RadPane>
                        </radDock:RadPaneGroup>
                    </radDock:RadSplitContainer>
                </radDock:RadDocking.DocumentHost>
            </radDock:RadDocking>

            <radDock:RadDocking FlowDirection="RightToLeft" DockPanel.Dock="Bottom">
                <radDock:RadDocking.DocumentHost>
                    <radDock:RadPaneGroup>
                        <radDock:RadPane Header="Bottom Docked Control - Pane #1" CanFloat="False">
                            <TextBlock>Bottom Docked Control - Pane #1</TextBlock>
                        </radDock:RadPane>

                        <radDock:RadPane Header="Bottom Docked Control - Pane #2" CanFloat="False">
                            <TextBlock>Bottom Docked Control - Pane #2</TextBlock>
                        </radDock:RadPane>

                        <radDock:RadPane Header="Bottom Docked Control - Pane #3" CanFloat="False">
                            <TextBlock>Bottom Docked Control - Pane #3</TextBlock>
                        </radDock:RadPane>
                    </radDock:RadPaneGroup>
                </radDock:RadDocking.DocumentHost>
            </radDock:RadDocking>
        </DockPanel>

        <radNav:RadToolBar Grid.Row="3">
            <telerik:RadSlider Width="100" Value="1" Orientation="Horizontal" HandlesVisibility="Visible"
                               HorizontalAlignment="Left" Maximum="10" LargeChange="1" Minimum="1"
                               IsMoveToPointEnabled="False"/>
            <radNav:RadToolBarSeparator/>
            <Label Content="Some Content" />
            <radNav:RadToolBarSeparator/>
            <ProgressBar Value="30"/>
        </radNav:RadToolBar>
    </Grid>
</Window>

this is the code for the button:

RadPane FormRadPane = new RadPane() { Header = "Not Document Pane", CanDockInDocumentHost = false };
            TextBlock txtBlock = new TextBlock();
            txtBlock.Text = "This Pane Cannot be docked in to document host";
            FormRadPane.Content = txtBlock;

            RadPaneGroup NewPaneGroup = new RadPaneGroup();
            NewPaneGroup.Items.Add(FormRadPane);

            RadSplitContainer FormSplitContainer = new RadSplitContainer();
            FormSplitContainer.InitialPosition = DockState.FloatingDockable;
            FormSplitContainer.Items.Add(NewPaneGroup);

            MainDockingControl.Items.Add(FormSplitContainer);

as you can see from the example:
the first dock control named "MainDockingControl" is docked to the top of the dock panel.
and the second one is docked to the bottom.

1. from what i know, in dock panel, if i dock the second DockControl to the bottom and the first one i don't dock
it should fill the remaining space, here if i don't dock the first one ("MainDockingControl") the second one does'nt show.

2. my question was can i accomplish resizing between these two DockControl in another way beside what i suggested with grid and grid splitter? a better solution using your controls.

3. if you press the button and create the new float window, try moving it around a bit and you'll see that it's under the bottom
DockControl and on top of the RadExpander, is that the behavior you talked about in your answer?

thanks again in advance.

Lior.

[Lior ef]

btw,

about pane closing:
do you mean handling the PreviewClose of the DockControl?
because there is no PaneClose event in DockControl....

[Miroslav Nedyalkov]

Hi Lior,

 Yes, this is what I mean - the PreviewClose event of the Docking control.

About your questions:

1. The default behavior of the DockPanel (the WPF DockPanel or the RadDockPanel) is dock all its children. If its property LastChildFill is set to true (the default value) it forces its last child to fill the rest (you cannot make child that differs from the last one to fill the space left). If you don't set the DockPanel.Dock property the DockPanel uses its default value - Dock.Left.

2. In my opinion the best approach is to use a Grid panel and a GridSplitter control to achieve this.

3. Yes, this is what I mean. In the new version all the ToolWindows will be displayed in a separate Window and will float over the Docking control.

Hope this helps.

Sincerely yours,
Miroslav Nedyalkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Lior ef]

hi Miroslav,

thank you so much for answering,

i just want to make sure i fully understood what you said.

in the next release of the dock control - ToolWindows will float all over the screen,

but now one of the advantages using the RadDock Control is that i can't take one Pane / ToolsWindow from one dock control

and dock it in another dock control. 

will that ability stay? or at least would i be able to control this feature?

again,

thanks,

Lior.

[Miroslav Nedyalkov]

Hello Lior,

 Yes, you understand correctly - the ToolWindows will float over the window that hosts the Docking control. You will not be able to dock ToolWindows from one Docking control to another.

Regards,
Miroslav Nedyalkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.