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

[jgill]

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>

[Miroslav Nedyalkov]

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

[jgill]

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.

[Miroslav Nedyalkov]

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

[jgill]

Thanks!  Now I see what you mean.