How to Add Icon to the RadPane's Header

The purpose of this tutorial is to show you how to add an icon to the RadPane's Header.

For the purpose of this tutorial the following RadDocking declaration will be used:

• XAML

<telerik:RadDocking x:Name="radDocking"> 
 
    <telerik:RadSplitContainer> 
        <telerik:RadPaneGroup > 
            <telerik:RadPane Header="Pane 1"> 
                <TextBlock Text="Some simple text here"/> 
            </telerik:RadPane> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
 
    <telerik:RadSplitContainer> 
        <telerik:RadPaneGroup > 
            <telerik:RadPane Header="Pane 2"> 
                <TextBlock Text="Some simple text here"/> 
            </telerik:RadPane> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
 
</telerik:RadDocking> 

In order to add an icon to the RadPane's header, you should create a custom data template and set it to the HeaderTemplate property of the RadPane. Consider the following example.

• XAML

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

Set the created data template to the HeaderTemplate property of the RadPane.

• XAML

<telerik:RadDocking x:Name="radDocking1"> 
    <telerik:RadSplitContainer> 
        <telerik:RadPaneGroup> 
 
            <telerik:RadPane Header="Pane 1" HeaderTemplate="{StaticResource HeaderTemplate}"> 
                <TextBlock Text="Some simple text here"/> 
            </telerik:RadPane> 
 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
    <telerik:RadSplitContainer> 
        <telerik:RadPaneGroup > 
 
            <telerik:RadPane Header="Pane 2" HeaderTemplate="{StaticResource HeaderTemplate}"> 
 
                <TextBlock Text="Some simple text here"/> 
            </telerik:RadPane> 
        </telerik:RadPaneGroup> 
    </telerik:RadSplitContainer> 
</telerik:RadDocking> 

Here is the final result: