RadPane background color and icon

[Yu]

How could I use code to set the background color and icon image of each RadPane?

The RadPane is created in code and added to RandPanGroup with AddItem method.

For the background, I tried radPane.Background = brush but it has no effect.

For the icon, I can not find any properties for assigning values.

Thanks

[Yu]

Any idea?

[Masha]

Hello Yu Geng,

To apply an icon to the RadPane you should create a custom data template and set it to its HeaderTemplate property. The data template should be like code listed below:

<DataTemplate x:Key="HeaderTemplate">
  <StackPanel Orientation="Horizontal">
    <TextBlock Text="{Binding}"/>
    <Image Source="Icon.jpg" Width="16" Height="16"/>
  </StackPanel>
</DataTemplate>

If you want to set the background of the content of the RadPane, you should set the background of its root element. The background of the RadPane is used for the TabItem. You could use the following code:

<telerik:RadPane>
 <Grid Background="Red">
 ...
 </Grid>
</telerik:RadPane>

In the code-behind you could find the Content first and set its Background.

I hope this will be helpful.

All the best,
Maria
the Telerik team

[Yu]

Hi Maria,

Thanks for reply.

The radPane is created dynamically during ruttime by code.

Can you show me more examples how to specify the databinding in the template for the icon? Each radPane added will have differenct icon in the header. The image ath is passed during runtime.

Also, setting the background for RadPane in code does not seem to have any effect of chaning color of the TabItem.

Thanks

[Masha]

Hi Yu Geng,

The approach is demonstrated in the attached project.

I've created a custom attached property for the RadPane header icon:

RadPaneExtensions.SetIcon(radPane1, new BitmapImage(new Uri("icon-alert.png", UriKind.Relative)));
radPane1.HeaderTemplate = (DataTemplate)this.Resources["HeaderTemplate"];

<DataTemplate x:Key="HeaderTemplate">

    <StackPanel Orientation="Horizontal">

        <Image Source="{Binding Path=Icon, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadPane}}}" Width="15" Height="13"/>

        <TextBlock Text="{Binding}"/>

    </StackPanel>

</DataTemplate>

I have also modified TabChromStyle, which is used in PaneBottomTemplate control template to get bindings for background property for RadPane

<Style x:Key="CustomDocumentTabChromeStyle" TargetType="telerikChromes:ButtonChrome" BasedOn="{StaticResource DocumentTabChromeStyle}">
    <Setter Property="Background" Value="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadPane}}}" />
    <Setter Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_Normal}" />
</Style>

I hope this will be helpful.

Regards,
Maria
the Telerik team