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

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

4 Answers 480 Views

Docking

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

jgill asked on 11 Aug 2010, 07:37 PM

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>

</Window>

4 Answers, 1 is accepted

answered on 13 Aug 2010, 02:53 PM

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

answered on 18 Aug 2010, 12:03 AM

ideal.png

modified.png

original-sample.png

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.

Accepted

answered on 19 Aug 2010, 02:49 PM

dockandribbon.zip

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