RadSplitContainer Minimum Height problem

[Tijana]

We have some issue using RadSplitContainer in RadWindow and we don't know how to solve it for some time.
What we want is to have two re-sizable panels, one below eachother, where first would have minimum height and other one's height would fill the rest.
In that first panel we load different controls, which have different height and we don't want to use vertical scroll bar, but to have the minimum height. Also, as an alternative, we could have fixed height of the first panel, it would be the solution, too.
In RadPaneGroup we load RadPane containing different types of our custom controls.

Here is the code:

<telerik:RadDocking  HorizontalAlignment="Stretch"  Name="radDocking1" VerticalAlignment="Stretch"
    x:Class="Layout.Containers"
    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"
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="800"
                     telerik:RadDocking.SerializationTag="DockCtrl"
                     HasDocumentHost="False"

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

    <telerik:RadSplitContainer x:Name="RootContainer"
                               Orientation="Vertical" InitialPosition="DockedTop"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch">

        <!--Actions - here different controls will be loaded -->
        <telerik:RadSplitContainer  HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                InitialPosition="DockedTop" telerik:ProportionalStackPanel.RelativeSize="0, 70"
               Name="ActionContainer"  >

            <telerik:RadPaneGroup

                     telerik:RadDocking.SerializationTag="ActionPanelGroup"
                        Name="ActionPanelGroup">
                <!-- we load  RadPane here containing one of several  controls -->
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>

        <!--Invoices-->
        <telerik:RadSplitContainer HorizontalAlignment="Stretch"

                    InitialPosition="DockedTop"
                    telerik:ProportionalStackPanel.RelativeSize="0, 30"
               Name="InvoiceGridContainer" >

            <telerik:RadPaneGroup

                     telerik:RadDocking.SerializationTag="InvoiceGridPanelGroup"
                         Name="InvoiceGridPanelGroup">
               <!-- we load  RadPane here containing other control -->

            </telerik:RadPaneGroup>

        </telerik:RadSplitContainer>

    </telerik:RadSplitContainer>

</telerik:RadDocking>

The issue occurs when we resize the window... only when we set min-height and resize or when min-height is bigger than some value... like.. bigger then 70% in this case, because of  telerik:ProportionalStackPanel.RelativeSize="0, 70"

Some white (light) control apears, inline with separator between those two splitt containers.

Attached are initial look when there is no resizing or min-height is not set...: controls.png
And another one which shows how control looks like when it is resized: resized.png


Please, help us, thank you in advance!

[Masha]

Hi Tijana,

We are aware of the described issue. Unfortunately RelativeSize property is not working with Height Property  at the same time. I can suggest you to have fixed Height size at the top SplitContainer (you could not be able to resize it) and the second one to be resizable.

Please, take a look at the attached project and let me know if this solution works for you.

Greetings,
Maria
the Telerik team