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

raddocking layout

4 Answers 133 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Jonam
Top achievements
Rank 1
Jonam asked on 02 Aug 2010, 02:59 PM
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:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           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>


4 Answers, 1 is accepted

Sort by
0
Jonam
Top achievements
Rank 1
answered on 03 Aug 2010, 11:15 PM
just reposted the code now its readable ;)
0
Accepted
Dani
Telerik team
answered on 04 Aug 2010, 01:04 PM
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
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
0
Jonam
Top achievements
Rank 1
answered on 09 Aug 2010, 12:30 AM
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:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           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>
0
Accepted
Dani
Telerik team
answered on 09 Aug 2010, 09:46 AM
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
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
Tags
Docking
Asked by
Jonam
Top achievements
Rank 1
Answers by
Jonam
Top achievements
Rank 1
Dani
Telerik team
Share this question
or