RadPaneGroupDocumentHost Borders (Metro Theme)

[Olya]

I need to remove the light-blue inner border inside the container of RadPaneGroupDocumentHost. And I also would like to change the white background for the content in the container. But I need to do this with the rest of Metro theme style applied to the component. Is there a way to do it? I'm using RadControls Q3 2011 and Expression Blend.

I have the following code with a picture attached:

        <telerik:RadDocking telerik:StyleManager.Theme="Metro" Width="300" Height="200" Margin="84,200,256,80" Background="White">
        <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Description">
                    <ScrollViewer BorderBrush="{x:Null}" BorderThickness="0" Background="#FFB18989" Margin="0"/>
                </telerik:RadPane>
                <telerik:RadPane Header="NonDraggable" CanFloat="False">
                    <TextBlock TextWrapping="Wrap" Text="This pane cannot be dragged, because it has its property CanFloat set 'False'."/>
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
        </telerik:RadDocking.DocumentHost>
        </telerik:RadDocking>

[Dani]

Hi Olya,

First off, let me say it is best if you upgrade to a newer version of the controls. After 2011 Q3 we have made significant changes in the theming mechanism which have to do with implicit styling. And using implicit styles you can take advantage of easier application of your custom styles to RadDocking control.

Since you are using the Metro theme, you need to modify the xaml for RadDocking in Metro theme. Generally, you will find the xaml in your RadControls installation folder , then Themes folder. If you upgrade, you should copy resources from Themes.Implicit folder. More details on the folder structure, files and resources with implicit styles can be found here.

Next, edit the RadPaneGroupDefaultControlTemplate and RadPaneGroupDocumentHostControlTemplate. These templates contain simple Rectangles with AccentBrush strokes, which visualize the active pane border and the thick border in the DocumentHost. You can hide these borders.

For changing the background, you can set a Background to the Grid containing the ContentPresenter again in both of these templates. For example:

<Grid Margin="5" Background="Pink">
         <ContentPresenter x:Name="ContentElement" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved,        Converter={StaticResource InvertedBooleanToVisibilityConverter}}" ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
         <Grid x:Name="ContentElementsPanel" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BooleanToVisibilityConverter}}" />
       </Grid>

I hope this helps.

All the best,
Dani
the Telerik team

[Olya]

Dani,

First of all, thank you VERY much for the help. Your advice was exactly what I needed and you provided really useful information about implicit styles.

Secondly, I would like to comment about upgrading to a newer version of RadControls. For developing our silverlight application our team is using the latest Q1 2012 version and in Visual Studio I use that version. But, because it is for Silverlight 5 applications, I have to use an older version of controls in Expression Blend to visualize resources, extract templates and so on. If I add references to the newest version of controls to a Blend project, I get conflicts with references from Silverlight 4 framework. And it seems Blend, for now, can work only with Silverlight 4 projects.

Is it possible to use Q1 2012 RadControls in Expression Blend at the moment?

[Dani]

Hello Olya,

You can create and edit Silverlight 5 projects with Expression Blend Preview for Silverlight 5. It is not good to use control templates and styles from an older version of the controls with newer assemblies. This will in most cases result in errors being thrown because changes have most likely been made, especially with the Q1 release or Q1 SP1 where we released significant theming changes.

If you cannot use the SL5 Preview version of Blend for some reason, you should obtain the styles directly from your RadControls installation folder. For the 2012 Q1 assemblies the styles are located in the Themes folder. Drill down to find the xaml that corresponds to the theme and control you need, then merge it in your own project.

I hope this helps.

Kind regards,
Dani
the Telerik team

[Olya]

Thanks a lot, Dani!
I was obtaining styles directly from the folder and merging it in my project, as you said. But I was thinking about starting to use Expression Blend Preview and now, after your advice, I'll try it out.