raddocking layout

5 posts, 2 answers
  1. Jonam
    Jonam avatar
    36 posts
    Member since:
    Jul 2010

    Posted 02 Aug 2010 Link to this post

    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>


  2. Jonam
    Jonam avatar
    36 posts
    Member since:
    Jul 2010

    Posted 03 Aug 2010 Link to this post

    just reposted the code now its readable ;)
  3. DevCraft banner
  4. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 04 Aug 2010 Link to this post

    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
  5. Jonam
    Jonam avatar
    36 posts
    Member since:
    Jul 2010

    Posted 08 Aug 2010 Link to this post

    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>
  6. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 09 Aug 2010 Link to this post

    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
Back to Top
DevCraft banner