8 Answers, 1 is accepted
0
MW
Top achievements
Rank 1
answered on 12 Aug 2009, 01:12 PM
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
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
0
Hi Mark,
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:
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.
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> |
<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.
0
MW
Top achievements
Rank 1
answered on 17 Aug 2009, 10:23 AM
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?
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?
0
Hello Mark,
The part you need to edit is after the comment <!--Content-->.
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.
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> |
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.
0
Brian Swiger
Top achievements
Rank 1
answered on 16 Sep 2009, 08:20 PM
Is there an easier way to do this today...simply removing the thick, gray border around a documenthost? Thanks!
0
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.
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.
0
Kjell
Top achievements
Rank 1
answered on 07 Dec 2010, 12:25 AM
Hi, I think the above code is out of date with the newest controls, can you provided an updated example? Thank You!
0
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
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