[Solved] raddocking layout

[Jonam]

Hello in the code beneath is my page. Its a simple ribbonbar with below a raddocking component. In the designer it looks good. But when i start it and it opens in the explorer window an ugly white bar appears between the docking component and the ribbonbar. All the properties are set to stretch? How can i enable that the layout stays as in the designer

<navigation:Page xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="SilverlightApplication1.Page4" 

           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"

           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

           d:DesignWidth="640" d:DesignHeight="480"

           Title="Page4 Page">

    <Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>

            <RowDefinition Height="140*" />

            <RowDefinition Height="340*" />

        </Grid.RowDefinitions>

        <telerik:RadRibbonBar 

            ApplicationButtonImageSource="/SilverlightApplication1;component/Images/AppIcon.png" 

            Title="Microsoft Word" >

  

            <telerik:RadRibbonBar.ApplicationMenu>

                <telerik:ApplicationMenu>

                    <!-- set the content in right pane -->

                    <telerik:ApplicationMenu.Content>

                        <StackPanel Width="250">

                            <telerik:RadGroupHeader Content="Recent Pictures"/>

                            <telerik:RadRibbonButton Content="1 Untitled.png" HorizontalAlignment="Stretch"/>

                            <telerik:RadRibbonButton Content="2 TelerikLogo.png" HorizontalAlignment="Stretch"/>

                            <telerik:RadRibbonButton Content="3 Silverlight 3.png" HorizontalAlignment="Stretch"/>

                            <telerik:RadRibbonButton Content="4 Test.png" HorizontalAlignment="Stretch"/>

                        </StackPanel>

                    </telerik:ApplicationMenu.Content>

                    <!-- set the content in footer -->

                    <telerik:ApplicationMenu.FooterContent>

                        <StackPanel Orientation="Horizontal">

                            <telerik:RadRibbonButton Content="Options"/>

                            <telerik:RadRibbonButton Content="Exit"/>

                        </StackPanel>

                    </telerik:ApplicationMenu.FooterContent>

                    <telerik:RadRibbonButton LargeImage="save.png" Text="Save"/>

                    <telerik:RadRibbonSplitButton LargeImage="saveas.png" Text="Save as ...">

                        <telerik:RadRibbonSplitButton.DropDownContent>

                            <StackPanel>

                                <telerik:RadRibbonButton Content="PDF"/>

                                <telerik:RadRibbonButton Content="Html Page"/>

                            </StackPanel>

                        </telerik:RadRibbonSplitButton.DropDownContent>

                    </telerik:RadRibbonSplitButton>

                </telerik:ApplicationMenu>

            </telerik:RadRibbonBar.ApplicationMenu>

  

            <telerik:RadRibbonTab Header="Home">

                <telerik:RadRibbonGroup Header="Clipboard">

                    <telerik:RadRibbonSplitButton Text="Paste" LargeImage="/SilverlightApplication1;component/Images/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:RadMenuItem Header="Paste Form"/>

                            </telerik:RadContextMenu>

                        </telerik:RadRibbonSplitButton.DropDownContent>

                    </telerik:RadRibbonSplitButton>

                </telerik:RadRibbonGroup>

            </telerik:RadRibbonTab>

            <telerik:RadRibbonTab Header="View"/>

        </telerik:RadRibbonBar>

          

        <telerik:RadDocking x:Name="radDocking" Grid.Row="1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

  

            <telerik:RadDocking.DocumentHost>

                <telerik:RadSplitContainer VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">

                    <telerik:RadPaneGroup x:Name="radPaneGroup" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

                        <telerik:RadPane x:Name="radPane1" Header="Document 1" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">

                            <TextBlock TextWrapping="Wrap" Text=""></TextBlock>

                        </telerik:RadPane>

                        <telerik:RadPane x:Name="radPane2" Header="Document 2" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">

                            <TextBlock TextWrapping="Wrap" Text=""></TextBlock>

                        </telerik:RadPane>

                        <telerik:RadPane x:Name="radPane3" Header="Document 3" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">

                            <TextBlock TextWrapping="Wrap" Text=""></TextBlock>

                        </telerik:RadPane>

                    </telerik:RadPaneGroup>

                </telerik:RadSplitContainer>

            </telerik:RadDocking.DocumentHost>

  

        </telerik:RadDocking>

    </Grid>

</navigation:Page>

[Jonam]

just reposted the code now its readable ;)

[Dani]

Hello Jonam,

Thank you for contacting us for advice.

The problem is that you have set the height of each of the two grid rows, but they do not amount to the whole height of the window and so you are left with empty space in between.

I suggest that when you use Grid.Row with * height, you should make sure that the sum of all rows equals to a whole 1 unit. For example, try the following in your project:

<Grid.RowDefinitions>
           <RowDefinition Height="0.14*" />
           <RowDefinition Height="0.86*" />
</Grid.RowDefinitions>

Please, get back to us with any further questions. We will be glad to help.

All the best,
Dani
the Telerik team

[Jonam]

great that worked. Now the ugly white line is gone. But when i resize the internet explorer window to small the ribbonbar suddenly disappears. Is their anyway to avoid this behaviour?

<navigation:Page xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  x:Class="SilverlightApplication1.Page4"
           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"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="Page4 Page">
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="112" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <telerik:RadRibbonBar
            ApplicationButtonImageSource="/SilverlightApplication1;component/Images/AppIcon.png"
            Title="Microsoft Word"
            Grid.Row="0"
            Height="112"
            VerticalAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            HorizontalContentAlignment="Stretch">

            <telerik:RadRibbonBar.ApplicationMenu>
                <telerik:ApplicationMenu>
                    <!-- set the content in right pane -->
                    <telerik:ApplicationMenu.Content>
                        <StackPanel Width="250">
                            <telerik:RadGroupHeader Content="Recent Pictures"/>
                            <telerik:RadRibbonButton Content="1 Untitled.png" HorizontalAlignment="Stretch"/>
                            <telerik:RadRibbonButton Content="2 TelerikLogo.png" HorizontalAlignment="Stretch"/>
                            <telerik:RadRibbonButton Content="3 Silverlight 3.png" HorizontalAlignment="Stretch"/>
                            <telerik:RadRibbonButton Content="4 Test.png" HorizontalAlignment="Stretch"/>
                        </StackPanel>
                    </telerik:ApplicationMenu.Content>
                    <!-- set the content in footer -->
                    <telerik:ApplicationMenu.FooterContent>
                        <StackPanel Orientation="Horizontal">
                            <telerik:RadRibbonButton Content="Options"/>
                            <telerik:RadRibbonButton Content="Exit"/>
                        </StackPanel>
                    </telerik:ApplicationMenu.FooterContent>
                    <telerik:RadRibbonButton LargeImage="save.png" Text="Save"/>
                    <telerik:RadRibbonSplitButton LargeImage="saveas.png" Text="Save as ...">
                        <telerik:RadRibbonSplitButton.DropDownContent>
                            <StackPanel>
                                <telerik:RadRibbonButton Content="PDF"/>
                                <telerik:RadRibbonButton Content="Html Page"/>
                            </StackPanel>
                        </telerik:RadRibbonSplitButton.DropDownContent>
                    </telerik:RadRibbonSplitButton>
                </telerik:ApplicationMenu>
            </telerik:RadRibbonBar.ApplicationMenu>

            <telerik:RadRibbonTab Header="Home" VerticalAlignment="Top">
                <telerik:RadRibbonGroup Header="Nieuw" Height="60" VerticalAlignment="Top">
                    <telerik:RadRibbonButton LargeImage="/SilverlightApplication1;component/Images/new.png" Size="Large" />
                </telerik:RadRibbonGroup>
                <telerik:RadRibbonGroup Header="Wijzig" Icon="/Telerik.Windows.Controls.RibbonBar;component/RibbonGroupCollapsedIcon.png" Height="60" VerticalAlignment="Top">
                    <telerik:RadRibbonButton LargeImage="/SilverlightApplication1;component/Images/Text-Edit-icon.png"
                                             Size="Large"
                                             SmallImage="/SilverlightApplication1;component/Images/Text-Edit-icon.png"

                                             />
                </telerik:RadRibbonGroup>
                <telerik:RadRibbonGroup Header="Verplaats" Icon="/Telerik.Windows.Controls.RibbonBar;component/RibbonGroupCollapsedIcon.png" Height="60" VerticalAlignment="Top">
                    <telerik:RadRibbonButton LargeImage="/SilverlightApplication1;component/Images/Button-Next-icon.png" Size="Large"/>
                </telerik:RadRibbonGroup>
                <telerik:RadRibbonGroup Header="Verwijder" Icon="/Telerik.Windows.Controls.RibbonBar;component/RibbonGroupCollapsedIcon.png" Height="60" VerticalAlignment="Top">
                    <telerik:RadRibbonButton LargeImage="/SilverlightApplication1;component/Images/Button-Close-icon.png" Size="Large" />
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="View"/>
        </telerik:RadRibbonBar>

        <telerik:RadDocking x:Name="radDocking" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0,6,0,0" Grid.Row="1">

            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
                    <telerik:RadPaneGroup x:Name="radPaneGroup" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                        <telerik:RadPane x:Name="radPane1" Header="Document 1" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
                            <TextBlock TextWrapping="Wrap" Text=""></TextBlock>
                        </telerik:RadPane>
                        <telerik:RadPane x:Name="radPane2" Header="Document 2" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
                            <TextBlock TextWrapping="Wrap" Text=""></TextBlock>
                        </telerik:RadPane>
                        <telerik:RadPane x:Name="radPane3" Header="Document 3" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
                            <TextBlock TextWrapping="Wrap" Text=""></TextBlock>
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>

        </telerik:RadDocking>
    </Grid>
</navigation:Page>

[Dani]

Hi Jonam,

Thnak you for your feedback.

The RibbonBar control has a fixed size by default and this is intended standard. In order to prevent it from disappearing once it goes beyond its minimal height, you should use the CollapseThresholdSize property. This property sets the minimal height used as a threshold. Please , try the following:

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <telerik:RadRibbonBar CollapseThresholdSize="20,20"
...
</telerik:RadRibbonBar>

Hope this solves the issue you are experiencing. Please write back with any further questions you might have.


Greetings,
Dani
the Telerik team