DocumentHost border

9 posts, 0 answers
  1. MW
    MW avatar
    8 posts
    Member since:
    Aug 2009

    Posted 12 Aug 2009 Link to this post

    Hi

    Is there any way to turn off this border for the 'DocumentHost' element?  The 3d thick border doesn't fit with the rest of my application.

    Thanks
  2. MW
    MW avatar
    8 posts
    Member since:
    Aug 2009

    Posted 12 Aug 2009 Link to this post

    Alternatively, do I have to have a DocumentHost section?

    Could I split the page in half and have a 'RadSplitContainer' docked left and another docked right?  If you try this there is always the 'grey bit on the middle'.

    Thanks
  3. DevCraft banner
  4. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 13 Aug 2009 Link to this post

    Hi Mark,

    The border you mentioned is owned by the PaneGroup control. When a group is displayed in the DocumentHost area, it changes its template. The control template that is applied is called DocumentHostTemplate. The following code demonstrates how to remove the border for a single group. If you need remove the borders of all the PaneGroups you have in your Docking control you could do the same with a custom theme for the Docking control. Here is the code:
    <radDock:RadDocking> 
        <radDock:RadDocking.DocumentHost> 
     
            <radDock:RadSplitContainer x:Name="DocumentSplitPanel"
                <radDock:RadPaneGroup x:Name="DocumentPane" AllowDragReorder="False"
                    <radDock:RadPaneGroup.Resources> 
                        <!--<SolidColorBrush x:Key="TabControlBackground" Color="#F8F8F8" />--> 
                        <SolidColorBrush x:Key="PaneGroupDocumentDarkerBorder" Color="#a0a0a0" /> 
                        <SolidColorBrush x:Key="PaneGroupDocumentHighlight" Color="#FFFFFF" /> 
                        <SolidColorBrush x:Key="PaneGroupDocumentColor" Color="#d5d9de" /> 
                        <SolidColorBrush x:Key="PaneGroupDocumentHeaderbackground" 
                                Color="#f0f0f0" /> 
                    </radDock:RadPaneGroup.Resources> 
                    <radDock:RadPaneGroup.DocumentHostTemplate> 
                        <ControlTemplate TargetType="radDock:RadPaneGroup"
                            <Grid> 
                                <vsm:VisualStateManager.VisualStateGroups> 
                                    <vsm:VisualStateGroup x:Name="CommonStates"
                                        <vsm:VisualState x:Name="Disabled" /> 
                                        <vsm:VisualState x:Name="Normal" /> 
                                    </vsm:VisualStateGroup> 
                                    <vsm:VisualStateGroup x:Name="ResizerStates"
                                        <vsm:VisualState x:Name="ResizerLeft"
                                            <Storyboard> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="DockResizer" 
                                                        Storyboard.TargetProperty="Visibility" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="Visible" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="DockResizer" 
                                                        Storyboard.TargetProperty="Width" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="4" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="border" 
                                                        Storyboard.TargetProperty="Margin" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="4 0 0 0" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="ItemsPresenterElement" 
                                                        Storyboard.TargetProperty="Margin" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="6 0 0 0" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </vsm:VisualState> 
                                        <vsm:VisualState x:Name="ResizerTop"
                                            <Storyboard> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="DockResizer" 
                                                        Storyboard.TargetProperty="Visibility" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="Visible" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="DockResizer" 
                                                        Storyboard.TargetProperty="VerticalAlignment" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="Top" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="DockResizer" 
                                                        Storyboard.TargetProperty="HorizontalAlignment" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="Stretch" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="DockResizer" 
                                                        Storyboard.TargetProperty="Placement" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                        <DiscreteObjectKeyFrame.Value> 
                                                            <telerik:Dock>Top</telerik:Dock> 
                                                        </DiscreteObjectKeyFrame.Value> 
                                                    </DiscreteObjectKeyFrame> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="DockResizer" 
                                                        Storyboard.TargetProperty="Height" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="4" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="DockResizer" 
                                                        Storyboard.TargetProperty="(Grid.RowSpan)" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="1" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="DockResizer" 
                                                        Storyboard.TargetProperty="(Grid.Row)" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="0" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames 
                                                        Storyboard.TargetName="ItemsPresenterElement" 
                                                        Storyboard.TargetProperty="Margin" 
                                                        Duration="0"
                                                    <DiscreteObjectKeyFrame KeyTime="0" 
                                                            Value="2 4 0 0" /> 
                                                </ObjectAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </vsm:VisualState> 
                                        <vsm:VisualState x:Name="HideResizer" /> 
                                    </vsm:VisualStateGroup> 
                                </vsm:VisualStateManager.VisualStateGroups> 
                                <Grid.RowDefinitions> 
                                    <RowDefinition Height="auto" /> 
                                    <RowDefinition Height="*" /> 
                                </Grid.RowDefinitions> 
     
                                <Rectangle 
                                        Fill="{StaticResource PaneGroupDocumentHeaderbackground}" 
                                        Visibility="{TemplateBinding BackgroundVisibility}" 
                                        HorizontalAlignment="Stretch" 
                                        VerticalAlignment="Stretch" /> 
     
                                <!--TabStrip--> 
                                <ItemsPresenter Margin="2 0 0 0" x:Name="ItemsPresenterElement" 
                                        Grid.Row="0" /> 
     
                                <!--Content--> 
     
                                <!--<Border x:Name="border" BorderThickness="1" 
                                        BorderBrush="{StaticResource PaneGroupDocumentDarkerBorder}" 
                                        CornerRadius="3" Grid.Row="1"
                                    <Border BorderThickness="1" 
                                            BorderBrush="{StaticResource PaneGroupDocumentHighlight}" 
                                            CornerRadius="2" 
                                            Background="{StaticResource PaneGroupDocumentColor}"
                                        <Border 
                                                BorderBrush="{StaticResource PaneGroupDocumentDarkerBorder}" 
                                                Margin="2" Padding="{TemplateBinding Padding}" 
                                                BorderThickness="1" 
                                                Background="{TemplateBinding Background}"
                                            <ContentPresenter x:Name="ContentElement" 
                                                    Content="{TemplateBinding SelectedContent}" 
                                                    ContentTemplate="{TemplateBinding SelectedContentTemplate}" /> 
                                        </Border> 
                                    </Border> 
                                </Border>--> 
     
                                <ContentPresenter x:Name="ContentElement" Grid.Row="1" 
                                        Content="{TemplateBinding SelectedContent}" 
                                        ContentTemplate="{TemplateBinding SelectedContentTemplate}" /> 
     
                                <docking:RadGridResizer x:Name="DockResizer" Placement="Left" 
                                        ShowsPreview="True" Visibility="Collapsed" 
                                        VerticalAlignment="Stretch" HorizontalAlignment="Left" 
                                        Grid.RowSpan="2" /> 
     
                            </Grid> 
                        </ControlTemplate> 
                    </radDock:RadPaneGroup.DocumentHostTemplate> 
                    <radDock:RadDocumentPane Header="ASDF"
                        <Button Content="TEST" /> 
                    </radDock:RadDocumentPane> 
                </radDock:RadPaneGroup> 
            </radDock:RadSplitContainer> 
        </radDock:RadDocking.DocumentHost> 
    </radDock:RadDocking> 

    About the second question - you can remove the DocumentHost area. What happens when you remove the DocumentHost is the last SplitContainer added fills the whole space. To remove the DocumentHost area you need to change the control template of the Docking control. Here is an example how to do that:
    <radDock:RadDocking x:Name="DockingScreen" Grid.Row="0"
        <radDock:RadDocking.Template> 
            <ControlTemplate TargetType="radDock:RadDocking"
                <Grid x:Name="LayoutRoot"
                    <Border Background="{TemplateBinding Background}" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            Padding="{TemplateBinding Padding}"
                        <telerik:RadDockPanel x:Name="RootDockPanel"
                            <!--TODO Add margin to compensate for not overlapping the other auto-hide areas (everywhere)--> 
                            <docking:AutoHideArea x:Name="LeftAutoHide" 
                                    telerik:RadDockPanel.Dock="Left" TabStripPlacement="Left" 
                                    TabOrientation="Vertical" /> 
                            <docking:AutoHideArea x:Name="RightAutoHide" 
                                    telerik:RadDockPanel.Dock="Right" TabStripPlacement="Right" 
                                    TabOrientation="Vertical" /> 
                            <docking:AutoHideArea x:Name="TopAutoHide" 
                                    telerik:RadDockPanel.Dock="Top" TabStripPlacement="Top" /> 
                            <docking:AutoHideArea telerik:RadDockPanel.Dock="Bottom" 
                                    TabStripPlacement="Bottom" x:Name="BottomAutoHide" /> 
                            <radDock:DockingPanel x:Name="ContentDockPanel"
                                <!--Panes comes here.--> 
                                <!--<docking:DocumentHost x:Name="DocumentHost" />--> 
                            </radDock:DockingPanel> 
                        </telerik:RadDockPanel> 
                    </Border> 
                    <!--<Popup IsOpen="True">--> 
                    <Canvas x:Name="PopupPanel"
                        <docking:VisualCue x:Name="PART_DragCue" Canvas.ZIndex="999997" 
                                Style="{TemplateBinding VisualCueStyle}"
                            <docking:VisualCue.RenderTransform> 
                                <TranslateTransform /> 
                            </docking:VisualCue.RenderTransform> 
                        </docking:VisualCue> 
                        <docking:RootCompass x:Name="PART_RootCompass" 
                                RenderTransformOrigin="0.5, 0.5" 
                                Style="{TemplateBinding RootCompassStyle}" 
                                Visibility="Collapsed" Canvas.ZIndex="999998"
                            <docking:RootCompass.RenderTransform> 
                                <TranslateTransform /> 
                            </docking:RootCompass.RenderTransform> 
                        </docking:RootCompass> 
                        <docking:Compass x:Name="PART_Compass" RenderTransformOrigin="0.5, 0.5" 
                                Style="{TemplateBinding CompassStyle}" Visibility="Collapsed" 
                                Canvas.ZIndex="999999"
                            <docking:Compass.RenderTransform> 
                                <TranslateTransform /> 
                            </docking:Compass.RenderTransform> 
                        </docking:Compass> 
                    </Canvas> 
                    <!--</Popup>--> 
                </Grid> 
            </ControlTemplate> 
        </radDock:RadDocking.Template> 
            <radDock:RadSplitContainer> 
            <radDock:RadPaneGroup> 
                <radDock:RadPane Header="pane1"
                    <Button Content="Pane1" /> 
                </radDock:RadPane> 
            </radDock:RadPaneGroup> 
            <radDock:RadPaneGroup> 
                <radDock:RadPane Header="pane2"
                    <Button Content="Pane2" /> 
                </radDock:RadPane> 
            </radDock:RadPaneGroup> 
            <radDock:RadPaneGroup> 
                <radDock:RadPane Header="pane3"
                    <Button Content="Pane3" /> 
                </radDock:RadPane> 
            </radDock:RadPaneGroup> 
        </radDock:RadSplitContainer> 
    </radDock:RadDocking> 

    Hope this helps.

    Regards,
    Miroslav Nedyalkov
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  5. MW
    MW avatar
    8 posts
    Member since:
    Aug 2009

    Posted 17 Aug 2009 Link to this post

    Thanks for your response

    Unfortunately neither of the suggestions actually work, or have further issues.

    The first one, removing the border, corrupts all the background colours etc or the content of the pane.  I could probably get round this by changing all the properties of each item in the pane if I really have to.

    The second example just blows up becuase its still looking for a document host.  I have split my page into two panes, RadSplit docked left and RadSplit docked right.  There is now a double width splitter - if you resize using the left side it works as expected, but try and resize using the area towards the right it just blows up.

    Any ideas?
  6. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 20 Aug 2009 Link to this post

    Hello Mark,

    First of all I want to apologize for the late response.

    You are right that the first solution will break some template bindings, but you can fix this. Here is the full ControlTemplate that you need to edit - just remove what you don't need in your template move the TemplateBindings where you want to apply the values of the properties:
    <ControlTemplate x:Key="PaneGroupDocumentTemplate" TargetType="Docking:RadPaneGroup"
        <Grid> 
            <vsm:VisualStateManager.VisualStateGroups> 
                <vsm:VisualStateGroup x:Name="CommonStates"
                    <vsm:VisualState x:Name="Disabled" /> 
                    <vsm:VisualState x:Name="Normal" /> 
                </vsm:VisualStateGroup> 
                <vsm:VisualStateGroup x:Name="ResizerStates"
                    <vsm:VisualState x:Name="ResizerLeft"
                        <Storyboard> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" 
                                    Storyboard.TargetProperty="Visibility" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                            </ObjectAnimationUsingKeyFrames> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" 
                                    Storyboard.TargetProperty="Width" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="4" /> 
                            </ObjectAnimationUsingKeyFrames> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" 
                                    Storyboard.TargetProperty="Margin" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="4 0 0 0" /> 
                            </ObjectAnimationUsingKeyFrames> 
                            <ObjectAnimationUsingKeyFrames 
                                    Storyboard.TargetName="ItemsPresenterElement" 
                                    Storyboard.TargetProperty="Margin" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="6 0 0 0" /> 
                            </ObjectAnimationUsingKeyFrames> 
                        </Storyboard> 
                    </vsm:VisualState> 
                    <vsm:VisualState x:Name="ResizerTop"
                        <Storyboard> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" 
                                    Storyboard.TargetProperty="Visibility" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                            </ObjectAnimationUsingKeyFrames> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" 
                                    Storyboard.TargetProperty="VerticalAlignment" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Top" /> 
                            </ObjectAnimationUsingKeyFrames> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" 
                                    Storyboard.TargetProperty="HorizontalAlignment" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Stretch" /> 
                            </ObjectAnimationUsingKeyFrames> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" 
                                    Storyboard.TargetProperty="Placement" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0"
                                    <DiscreteObjectKeyFrame.Value> 
                                        <telerik:Dock>Top</telerik:Dock> 
                                    </DiscreteObjectKeyFrame.Value> 
                                </DiscreteObjectKeyFrame> 
                            </ObjectAnimationUsingKeyFrames> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" 
                                    Storyboard.TargetProperty="Height" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="4" /> 
                            </ObjectAnimationUsingKeyFrames> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" 
                                    Storyboard.TargetProperty="(Grid.RowSpan)" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="1" /> 
                            </ObjectAnimationUsingKeyFrames> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DockResizer" 
                                    Storyboard.TargetProperty="(Grid.Row)" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0" /> 
                            </ObjectAnimationUsingKeyFrames> 
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsPresenterElement" 
                                    Storyboard.TargetProperty="Margin" Duration="0"
                                <DiscreteObjectKeyFrame KeyTime="0" Value="2 4 0 0" /> 
                            </ObjectAnimationUsingKeyFrames> 
                        </Storyboard> 
                    </vsm:VisualState> 
                    <vsm:VisualState x:Name="HideResizer" /> 
                </vsm:VisualStateGroup> 
            </vsm:VisualStateManager.VisualStateGroups> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="auto" /> 
                <RowDefinition Height="*" /> 
            </Grid.RowDefinitions> 
     
            <Rectangle Fill="{StaticResource PaneGroupDocumentHeaderbackground}" 
                    Visibility="{TemplateBinding BackgroundVisibility}" 
                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
     
            <!--TabStrip--> 
            <ItemsPresenter Margin="2 0 0 0" x:Name="ItemsPresenterElement" Grid.Row="0" /> 
     
            <!--Content--> 
            <Border x:Name="border" BorderThickness="1" 
                    BorderBrush="{StaticResource PaneGroupDocumentDarkerBorder}" CornerRadius="3" 
                    Grid.Row="1"
                <Border BorderThickness="1" 
                        BorderBrush="{StaticResource PaneGroupDocumentHighlight}" CornerRadius="2" 
                        Background="{StaticResource PaneGroupDocumentColor}"
                    <Border BorderBrush="{StaticResource PaneGroupDocumentDarkerBorder}" Margin="2" 
                            Padding="{TemplateBinding Padding}" BorderThickness="1" 
                            Background="{TemplateBinding Background}"
                        <ContentPresenter x:Name="ContentElement" 
                                Content="{TemplateBinding SelectedContent}" 
                                ContentTemplate="{TemplateBinding SelectedContentTemplate}" /> 
                    </Border> 
                </Border> 
            </Border> 
     
            <dock:RadGridResizer x:Name="DockResizer" Placement="Left" ShowsPreview="True" 
                    Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Left" 
                    Grid.RowSpan="2" /> 
     
        </Grid> 
    </ControlTemplate> 

    The part you need to edit is after the comment <!--Content-->.

    About the second one - I know it doesn't work fine, but it is a work-around - it is not a supported feature of the RadDocking control. We plan to fix the issues that comes from removing the DocumentHost, so it should start working correctly soon. We've logged this in our TODO list and it should be done for the Q3 release. If it is ready earlier, it will be included in the latest internal builds. Hope this is ok for you.

    Regards,
    Miroslav Nedyalkov
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  7. Brian Swiger
    Brian Swiger avatar
    5 posts
    Member since:
    Jul 2009

    Posted 16 Sep 2009 Link to this post

    Is there an easier way to do this today...simply removing the thick, gray border around a documenthost?  Thanks!


  8. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 18 Sep 2009 Link to this post

    Hi Brian,

    This is the easiest way that comes to my mind and is applicable to the current version of the control. We will think about making such customizations easier for future, but I cannot give you any time frame.

    Regards,
    Miroslav Nedyalkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  9. Kjell
    Kjell avatar
    276 posts
    Member since:
    Jun 2010

    Posted 06 Dec 2010 Link to this post

    Hi, I think the above code is out of date with the newest controls, can you provided an updated example?  Thank You!
  10. Pana
    Admin
    Pana avatar
    748 posts

    Posted 10 Dec 2010 Link to this post

    Hello Kjell,

    I have created an example with the RadDocking that has its Document host borders removed. It has all styles for raddocking.xaml attached so you can further style the control. If you want to find what have been changed search for "NOTE:" in docking.xaml.

    Kind regards,
    Pana
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top
DevCraft banner