Add Icon to RadPane's Header in Dynamically in C#

[Alan Lee]

I am trying to add different icon to each RadPane in RadPaneGroup dynamically in C#. I tried to define DataTemplate but not sure how to change in the icon in the template and link the template to the RadPane.

<UserControl.Resources>

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

</UserControl.Resources>

Any help is appreciated.

Thanks.

[Dani]

Hi Alan Lee,

Thank you for your interest in RadDocking.

There are two approaches which you can take:

1. You can set a different DataTemplate for each RadPane in XAML only. You can link the DataTemplate you have manually  to a particular RadPane as a regular Staticresource in XAML:

<telerikDock:RadPane HeaderTemplate="{StaticResource HeaderTemplate}">
...
</telerikDock:RadPane>

2. You can use the HeaderTemplateSelector property of RadPane which will switch between DataTemplates programatically.
The HeaderTemplateSelector must inherit the DataTemplateSelector class, which is located in the Telerik.Windows.Controls assembly. Override the SelectTemplate method and implement your custom logic in it.
The HeaderTemplateSelector must be defined as a resource in XAML before using it as a property of RadPane.

I hope this information is helpful.


Greetings,
Dani
the Telerik team

[Andrew]

I wonder if I can somehow bind the fields of the data template to the actual control that resides in the pane? This approach doesn't work -

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="DockingSL.MainPage1" Width="640" Height="480">

    <UserControl.Resources>
        <DataTemplate x:Key="HeaderTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding}"/>
                <TextBlock Text="{Binding Text}"/>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <telerik:RadDocking x:Name="radDocking">
            <telerik:RadDocking.DocumentHost>
                <telerik:RadPaneGroup TabStripPlacement="Top" x:Name="radPaneGroup" >
                    <telerik:RadDocumentPane Header="Welcome">
                            <telerik:RadSplitContainer Orientation="Vertical">
                                <telerik:RadPaneGroup x:Name="rpgGrid" >
                                    <telerik:RadPane Header="{Binding ElementName=viewer1}" HeaderTemplate="{StaticResource HeaderTemplate}">
                                        <TextBlock x:Name="viewer1" Text="V1" />
                                    </telerik:RadPane>
                                </telerik:RadPaneGroup>
                                <telerik:RadPaneGroup>
                                    <telerik:RadPane Header="{Binding ElementName=viewer2}" HeaderTemplate="{StaticResource HeaderTemplate}">
                                        <TextBlock x:Name="viewer2" Text="V2" />
                                    </telerik:RadPane>
                                </telerik:RadPaneGroup>
                            </telerik:RadSplitContainer>
                        </telerik:RadDocumentPane>
                </telerik:RadPaneGroup>
            </telerik:RadDocking.DocumentHost>
        </telerik:RadDocking>
    </Grid>
</UserControl>

[Dani]

Hi Andrew,

Please use the TitleTemplate and the Title property to set the header in the way you wish. Also, update your Binding to have the text property as Path:

<telerik:RadPane Title="{Binding Text, ElementName=viewer1}" TitleTemplate="{StaticResource HeaderTemplate}">
                                    <TextBlock x:Name="viewer1" Text="Test this!" />
</telerik:RadPane>

I hope this will be helpful.

Greetings,
Dani
the Telerik team

[Erik Damgaard]

Will up please give me some sort of code.I have tried many time but i was not able to add icon to RadPane's Header programmically
any help would be greatly appreciated

[Dani]

Hi Erik,

Simply use the HeaderTemplate property of RadPane. Attached is a demonstration.

Hope this will be helpful.

Regards,
Dani
the Telerik team

[Mirko]

Great sample thank. I have one question, I like to make the icon visible or hide it in dependence of a ViewModel Property.

Have a got any possibility?

Thanks 

[Masha]

Hello Mirko,

I have modified the project in order to demonstrate how you could bind Visibility property of the Icon to a property in the ViewModel. Please download it and give it a try.

Regards,
Maria
the Telerik team

[Sarah]

Would it also be possible to have an icon in the top-header of the pane?
Now it is only visible at the bottom.
When pane is in floating-state, you don't see the icon.

Thanks in advance.

Sarah

[Masha]

Hi Sarah,

In order to apply an Icon to the RadPane, you should change all four control templates inside RadPaneStyle to reflect changes everywhere. The below example demonstrated the approach only for the BottomTemplate. When RadPane is unpinned a new ToolWindow is created, so you need to modify the ToolWindowStyle.

Hope this helps.

All the best,
Maria
the Telerik team

[Sathish]

Can I change the pin icon with my own icon or icon font in radpane title? Please share the code sample if it is possible to achieve.

[Martin Ivanov]

Hello Sathish,

There is no code sample showing this.

However, you can achieve it by customizing the RadPane templates. Basically, can extract the RadPaneStyle along with its ControlTemplate - Template, LeftTemplate, TopTemplate, RightTemplate, BottomTemplate and DocumentHostTemplate. Then you will need to find the RadButton controls that show the pinned and unpinned icons and replace their content with your custom icon.

After this you can apply the customized style and templates using an implicit style targeting the RadPane elements.

Regards, Martin Ivanov
Progress Telerik