Change RadDocking Background and Border

[Paulo]

How can I change the Background color and remove the Border of the RadDocking.

By default, I notice that the Background is DarkGray and the Border is LightGray.

I tried to change the Background property but it did not work.

Below is my code. It is just an empty RadDocking.

<

 

telerikDocking:RadDocking  

 

     x:Name="contentDock"  

 

     Grid.Column="0"  

 

     Grid.Row="1"> 

 

 

</telerikDocking:RadDocking>

 

 

[Miroslav Nedyalkov]

Hi Paulo,

The background that you can see is not the background of the RadDocking control. The DarkGray background is the background of the DocumentHost and the LightGray background is the background of the AutoHide area (where the unpinned panes are placed). You cannot change these backgrounds from the RadDocking yet. We will provide more properties and will extend the customization of the Docking control in the near future.

All the best,
Miroslav Nedyalkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Paulo]

Thanks

[Michele]

are those backgrounds editable now?

[Miroslav Nedyalkov]

Hi Paolo,

Yes, they are editable, like they were before. What you need to do is to change the background color of the AutoHide areas and the DocumentHost.

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.

[Michele]

Hello Miroslav,
I've been able to set the Document host in this way :

 <telerikDocking:RadSplitContainer>
                    <telerikDocking:RadPaneGroup>
                        <telerikDocking:RadDocumentPane Title="Description" CanFloat="False" CanUserClose="False" CanUserPin="False">
                            <telerikDocking:RadDocumentPane.Content>
                                <Grid x:Name="cvContent" Margin="5,0,0,0"  >
                                    <Grid.Background>
                                        <ImageBrush ImageSource="./Images/background.jpg"></ImageBrush>
                                    </Grid.Background>
                                </Grid>
                            </telerikDocking:RadDocumentPane.Content>
                        </telerikDocking:RadDocumentPane>
                    </telerikDocking:RadPaneGroup>
                </telerikDocking:RadSplitContainer>

Since I need to use the document host as the content for my data... I've looked a bit but I was not able to find the AutoSize area...
Here's the portion of the code I use to design mine Menu

 <telerikDocking:RadSplitContainer telerikDocking:DockingPanel.InitialSize="170,150" MaxWidth="600"
                    Name="LeftContainer" InitialPosition="DockedLeft">
                <telerikDocking:RadSplitContainer.Background>
                    <ImageBrush ImageSource="./Images/background.jpg"></ImageBrush>
                </telerikDocking:RadSplitContainer.Background>
                <telerikDocking:RadPaneGroup x:Name="Group1" Background="{Binding}" BackgroundVisibility="Visible" >
                    <telerikDocking:RadPane x:Name="Pane1" Header="Menu"  CanUserClose="False"  CanFloat="False">
                        <telerikNavigation:RadTreeView x:Name="menuTreeView" Margin="0,5" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0,10" TabIndex="2147483647" TabNavigation="Once" Loaded="menuTreeView_Loaded"
                        Width="290" HorizontalAlignment="Left"  VerticalAlignment="Top" ItemTemplate="{StaticResource TopItem}" Visibility="Collapsed">
                        </telerikNavigation:RadTreeView>
                    </telerikDocking:RadPane>
                </telerikDocking:RadPaneGroup>
            </telerikDocking:RadSplitContainer>

Thanks again in advance
Paolo

[Miroslav Nedyalkov]

Hi Paolo,

It is a little bit more complicated than it is supposed to be. We will think about adding properties to the RadDocking control that can be directly set. I'm attaching a sample project that changes both colors you wanted to change to Red.

Greetings,
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.

[Michele]

Hello Miroslav,
thanks for your project... I've tried it right now but when I click on pin the left item, it goes hidden, then when I mouse over it to expand I got an exception "Object not set to an instance of an object..." .. now I'm quite busy and haven't got time to check what happens... later I got a try and let you know...thanks

[Miroslav Nedyalkov]

Hello Paolo,

You might be using older version of RadControls for Silverlight and the templates I placed in the project work with the latest one.

All the best,
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.

[Michele]

Hello Miroslav,
I think I'm using the last version of the controls... I've got this :2009.2.812.1030 for the Telerik.Windows.Controls dll...

[Miroslav Nedyalkov]

Hello Paolo,

I've tried this against the latest internal build version, not against the latest official version. I did some corrections on the example I've prepared before and tested it against the version you are using. I found better way to do this - I fixed the control template to use the Background and BorderBrush properties of the Docking control for this colors. This should work by default for the future version of the RadDocking control. For now you need the fixed control template. Please, find the attached project.

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.

[Michele]

Hello Miroslav...
I've tried your solution and it works like mine :

  <telerikDocking:RadDocking  x:Name="radDocking1" Background="{Binding}">
            <telerikDocking:RadDocking.DocumentHost>
                <telerikDocking:RadSplitContainer>
                    <telerikDocking:RadPaneGroup>
                        <telerikDocking:RadDocumentPane Title="Description" CanFloat="False" CanUserClose="False" CanUserPin="False">
                            <telerikDocking:RadDocumentPane.Content>
                                <Grid x:Name="cvContent" Margin="5,0,0,0"  >
                                    <Grid.Background>
                                        <ImageBrush ImageSource="./Images/background.jpg"></ImageBrush>
                                    </Grid.Background>
                                </Grid>
                            </telerikDocking:RadDocumentPane.Content>
                        </telerikDocking:RadDocumentPane>
                    </telerikDocking:RadPaneGroup>
                </telerikDocking:RadSplitContainer>
            </telerikDocking:RadDocking.DocumentHost>
            <telerikDocking:RadSplitContainer telerikDocking:DockingPanel.InitialSize="170,150" MaxWidth="600" MinWidth="3"
                    Name="LeftContainer" InitialPosition="DockedLeft">
                <telerikDocking:RadSplitContainer.Background>
                    <ImageBrush ImageSource="./Images/background.jpg"></ImageBrush>
                </telerikDocking:RadSplitContainer.Background>
                <telerikDocking:RadPaneGroup x:Name="Group1" Background="{Binding}" BackgroundVisibility="Visible">
                    <telerikDocking:RadPane x:Name="Pane1" Header="Menu" CanUserClose="False" CanFloat="False" CanUserPin="True" CanDockInDocumentHost="False">
                        <telerikDocking:RadPane.Background>
                            <ImageBrush ImageSource="./Images/background.jpg"></ImageBrush>
                        </telerikDocking:RadPane.Background>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30"></RowDefinition>
                                <RowDefinition Height="*"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <TextBlock x:Name="tbUserName" Grid.Row="0" Foreground="LightBlue" Grid.Column="0"></TextBlock>
                            <HyperlinkButton x:Name="tbLogOff" Grid.Row="0" Grid.Column="1" Click="lnkLogOut_Click">
                                <TextBlock  Text="LogOff" Foreground="White" ></TextBlock>
                            </HyperlinkButton>
                            <telerikNavigation:RadTreeView Grid.Row="1" Grid.ColumnSpan="2" x:Name="menuTreeView" Margin="0,5" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0,10" TabIndex="2147483647" TabNavigation="Once" Loaded="menuTreeView_Loaded"
                        Width="290" HorizontalAlignment="Left"  VerticalAlignment="Top" ItemTemplate="{StaticResource TopItem}" Visibility="Collapsed">
                            </telerikNavigation:RadTreeView>
                        </Grid>

                    </telerikDocking:RadPane>
                </telerikDocking:RadPaneGroup>
            </telerikDocking:RadSplitContainer>
        </telerikDocking:RadDocking>

The problem I've got with mine and yours is to set a background image on the left docking panel then showing it while in autosize mode... on fixed it works...
thanks

[Miroslav Nedyalkov]

Hi Paolo,

Could you please explain in more details what you are trying to do - are you trying to set background brush to the pane (the Header) or to the panel that holds the content? This will help us to better understand your scenario and give you more adequate help.

All the best,
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.

[Michele]

Hello Miroslav...
I've opened a ticket with two attachment... as you can see in the second it's white while in autohide mode...
The Ticket id is : 241783

Thanks
Paolo

[Miroslav Nedyalkov]

Hi Paolo,

In the first image (when the pane is not in the AutoHide area) it is blue, because the Background of the parent is blue (in this case the RadPaneGroup). In the other case the pane is in the AutoHide area that has white background and as the content of the pane is transparent, it looks white this time. You have two options here - you could change the Background of the AutoHide are or to set Background to the content of the pane (for example you could wrap its content in a border and to set Background to it).

Hope this information is helpful.

Kind 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.