Home / Community & Support / Developer Productivity Tools Forums / WPFDockingResizing Raddocking With Window Resize (100% Vertical Height Within Grid Row)

Answered Resizing Raddocking With Window Resize (100% Vertical Height Within Grid Row)

Feed from this thread

jgill Intermediate

Posted on Aug 11, 2010 (permalink)

Hi,
We are having trouble getting a RadDock in WPF to resize to the height/width of it's container. We'd like it to be 100% of the grid row's height and width so it adjusts to the size of the window as it's the main area users will work in.

We want a RadRibbon to appear at the top of the screen in a manner where the user cannot remove it then have the docking area for windows appear beneath that taking up the remaining space in height.

<Window x:Class="Company.ApplicationName.UI.DesktopClient.Windows.Main"

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

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

    xmlns:controls="clr-namespace:Company.ApplicationName.UI.DesktopClient.Controls"

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

    WindowStartupLocation="CenterScreen"

    WindowState="Maximized" Height="600" Width="700" Icon="/Company.ApplicationName.UI.DesktopClient;component/Resources/application_icon.png">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <telerik:RadRibbonBar Margin="0,0,0,0" Name="radRibbonBar1" VerticalAlignment="Top" Title="Main Dashboard" ApplicationName="Available To Promise" ApplicationButtonImageSource="/Company.ApplicationName.UI.DesktopClient;component/Resources/application_logo.png" ClipToBounds="True" >

            <telerik:RadRibbonBar.ApplicationMenu>

                <telerik:ApplicationMenu>

                    <telerik:RadRibbonButton LargeImage="/Company.ApplicationName.UI.DesktopClient;component/Resources/MenuItems/save.png" Text="Save"/>

                    <telerik:RadRibbonButton LargeImage="/Company.ApplicationName.UI.DesktopClient;component/Resources/MenuItems/exit.png" Text="Exit"/>

                </telerik:ApplicationMenu>

            </telerik:RadRibbonBar.ApplicationMenu>



            <telerik:RadRibbonTab Header="Home">

                <telerik:RadRibbonGroup Header="Clipboard">

                    <telerik:RadRibbonSplitButton Text="Paste" LargeImage="/Company.ApplicationName.UI.DesktopClient;component/Resources/MenuItems/paste.png" Size="Large"

              telerik:ScreenTip.Title="Paste(Ctrl+V)"

              telerik:ScreenTip.Description="Paste the contents the Clipboard.">

                        <telerik:RadRibbonSplitButton.DropDownContent>

                            <telerik:RadContextMenu BorderThickness="0">

                                <telerik:RadMenuItem Header="Paste"/>

                            </telerik:RadContextMenu>

                        </telerik:RadRibbonSplitButton.DropDownContent>

                    </telerik:RadRibbonSplitButton>

                </telerik:RadRibbonGroup>

            </telerik:RadRibbonTab>

            <telerik:RadRibbonTab Header="Admin">

            </telerik:RadRibbonTab>

            <telerik:RadRibbonTab Header="View"/>

            </telerik:RadRibbonBar>

            <telerik:RadRibbonTab Header="Planning">

            </telerik:RadRibbonTab>

            <telerik:RadRibbonTab Header="Reports">

            </telerik:RadRibbonTab>

            <telerik:RadRibbonTab Header="Modeling Scenarios">

            </telerik:RadRibbonTab>

        <Grid Grid.Row="1">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <telerik:RadDocking ClipToBounds="True" Margin="0,0,0,0" AllowUnsafeMode="True" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >

            <telerik:RadDocking.DocumentHost>

                <telerik:RadSplitContainer>

                    <telerik:RadPaneGroup>

                        <telerik:RadPane Header="Description">

                            <TextBlock TextWrapping="Wrap" Text="On the Documents tab above press Ctrl + Mouse Left button to display the Popup Menu. You can use the same combination on every tab."/>

                        </telerik:RadPane>

                        <telerik:RadPane Header="NonDraggable" CanFloat="False">

                            <TextBlock TextWrapping="Wrap" Text="This pane cannot be dragged, because it has its property CanFloat set 'False'."/>

                        </telerik:RadPane>

                    </telerik:RadPaneGroup>

                </telerik:RadSplitContainer>

            </telerik:RadDocking.DocumentHost>



            <telerik:RadSplitContainer InitialPosition="DockedLeft" VerticalAlignment="Bottom">

                <telerik:RadPaneGroup>

                    <telerik:RadPane Header="Progress/Schedule">

                        <controls:ProgressBar></controls:ProgressBar>

                    </telerik:RadPane>

                    <telerik:RadPane Header="Server Explorer"/>

                </telerik:RadPaneGroup>

            </telerik:RadSplitContainer>



            <telerik:RadSplitContainer InitialPosition="DockedRight">

                <telerik:RadPaneGroup>

                    <telerik:RadPane Header="Properties"/>

                    <telerik:RadPane Header="Solution Explorer"/>

                </telerik:RadPaneGroup>

            </telerik:RadSplitContainer>



            <telerik:RadSplitContainer InitialPosition="DockedBottom">

                <telerik:RadPaneGroup>

                    <telerik:RadPane Header="Output"/>

                    <telerik:RadPane Header="Error List"/>

                </telerik:RadPaneGroup>

            </telerik:RadSplitContainer>



        </telerik:RadDocking>

            </Grid>



    </Grid>

</Window>

Reply

Miroslav Nedyalkov Miroslav Nedyalkov

Posted on Aug 13, 2010 (permalink)

Hello Jonathan,
I'm not sure that I fully understand what you need to achieve, but in my opinion removing the inner Grid panel should solve your problem. What I mean is to use the following XAML instead of the one you provided:

<Window x:Class="Company.ApplicationName.UI.DesktopClient.Windows.Main"

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

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

    xmlns:controls="clr-namespace:Company.ApplicationName.UI.DesktopClient.Controls"

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

    WindowStartupLocation="CenterScreen"

    WindowState="Maximized" Height="600" Width="700" Icon="/Company.ApplicationName.UI.DesktopClient;component/Resources/application_icon.png">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <telerik:RadRibbonBar Margin="0,0,0,0" Name="radRibbonBar1" VerticalAlignment="Top" Title="Main Dashboard" ApplicationName="Available To Promise" ApplicationButtonImageSource="/Company.ApplicationName.UI.DesktopClient;component/Resources/application_logo.png" ClipToBounds="True" >

            <telerik:RadRibbonBar.ApplicationMenu>

                <telerik:ApplicationMenu>

                    <telerik:RadRibbonButton LargeImage="/Company.ApplicationName.UI.DesktopClient;component/Resources/MenuItems/save.png" Text="Save"/>

                    <telerik:RadRibbonButton LargeImage="/Company.ApplicationName.UI.DesktopClient;component/Resources/MenuItems/exit.png" Text="Exit"/>

                </telerik:ApplicationMenu>

            </telerik:RadRibbonBar.ApplicationMenu>



            <telerik:RadRibbonTab Header="Home">

                <telerik:RadRibbonGroup Header="Clipboard">

                    <telerik:RadRibbonSplitButton Text="Paste" LargeImage="/Company.ApplicationName.UI.DesktopClient;component/Resources/MenuItems/paste.png" Size="Large"

              telerik:ScreenTip.Title="Paste(Ctrl+V)"

              telerik:ScreenTip.Description="Paste the contents the Clipboard.">

                        <telerik:RadRibbonSplitButton.DropDownContent>

                            <telerik:RadContextMenu BorderThickness="0">

                                <telerik:RadMenuItem Header="Paste"/>

                            </telerik:RadContextMenu>

                        </telerik:RadRibbonSplitButton.DropDownContent>

                    </telerik:RadRibbonSplitButton>

                </telerik:RadRibbonGroup>

            </telerik:RadRibbonTab>

            <telerik:RadRibbonTab Header="Admin">

            </telerik:RadRibbonTab>

            <telerik:RadRibbonTab Header="View"/>

            </telerik:RadRibbonBar>

            <telerik:RadRibbonTab Header="Planning">

            </telerik:RadRibbonTab>

            <telerik:RadRibbonTab Header="Reports">

            </telerik:RadRibbonTab>

            <telerik:RadRibbonTab Header="Modeling Scenarios">

            </telerik:RadRibbonTab>

            <telerik:RadDocking Grid.Row="1" ClipToBounds="True" Margin="0,0,0,0" AllowUnsafeMode="True" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >

            <telerik:RadDocking.DocumentHost>

                <telerik:RadSplitContainer>

                    <telerik:RadPaneGroup>

                        <telerik:RadPane Header="Description">

                            <TextBlock TextWrapping="Wrap" Text="On the Documents tab above press Ctrl + Mouse Left button to display the Popup Menu. You can use the same combination on every tab."/>

                        </telerik:RadPane>

                        <telerik:RadPane Header="NonDraggable" CanFloat="False">

                            <TextBlock TextWrapping="Wrap" Text="This pane cannot be dragged, because it has its property CanFloat set 'False'."/>

                        </telerik:RadPane>

                    </telerik:RadPaneGroup>

                </telerik:RadSplitContainer>

            </telerik:RadDocking.DocumentHost>



            <telerik:RadSplitContainer InitialPosition="DockedLeft" VerticalAlignment="Bottom">

                <telerik:RadPaneGroup>

                    <telerik:RadPane Header="Progress/Schedule">

                        <controls:ProgressBar></controls:ProgressBar>

                    </telerik:RadPane>

                    <telerik:RadPane Header="Server Explorer"/>

                </telerik:RadPaneGroup>

            </telerik:RadSplitContainer>



            <telerik:RadSplitContainer InitialPosition="DockedRight">

                <telerik:RadPaneGroup>

                    <telerik:RadPane Header="Properties"/>

                    <telerik:RadPane Header="Solution Explorer"/>

                </telerik:RadPaneGroup>

            </telerik:RadSplitContainer>



            <telerik:RadSplitContainer InitialPosition="DockedBottom">

                <telerik:RadPaneGroup>

                    <telerik:RadPane Header="Output"/>

                    <telerik:RadPane Header="Error List"/>

                </telerik:RadPaneGroup>

            </telerik:RadSplitContainer>



        </telerik:RadDocking>

    </Grid>

</Window>

Hope this helps!
All the best,
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

Reply

jgill Intermediate
Posted on Aug 17, 2010 (permalink)

Hi Miroslav,
The removal of the additional Grid Row did not have the desired effect. I have attached three images that show the window before the change you suggested (and why that is not ideal for our scenario), a screenshot after the suggested change (and why that is also not ideal...e.g. it completely covers the RadRibbon), and an image the ideal state.
Attached files
Reply

Answer Miroslav Nedyalkov Miroslav Nedyalkov
Posted on Aug 19, 2010 (permalink)

Hi Jonathan,
Please refer to the attached sample project that demonstrates the approach I suggested you in the previous post. It looks exactly as the ideal.png image.
Best wishes,
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
Attached files
- dockandribbon.zip
Reply

jgill Intermediate

Posted on Aug 19, 2010 (permalink)

Thanks! Now I see what you mean.

Reply

Home / Community & Support / Developer Productivity Tools Forums / WPFDockingResizing Raddocking With Window Resize (100% Vertical Height Within Grid Row)

Answered Resizing Raddocking With Window Resize (100% Vertical Height Within Grid Row)

.NET Developer Tools DevTools

Hybrid Mobile Development Icenium

HTML5 / JavaScript Development Kendo UI

Software Testing Tools Test Studio

Online Business Platform Sitefinity CMS

Agile Project Management TeamPulse

Contact us

About Telerik