Image in Pane Header

[Bradley]

Is there any easy way to place an image in the header of a pane before the header text?

Regards,
Brad Serbu

[Konstantina]

Hi Bradley,

Thank you for contacting us.

Putting an image in the pane's header is an easy task. All you need to do is to edit the TitleTemplate of the pane. You can do that for example like so:

<telerikDocking:RadDocking>

   <telerikDocking:RadSplitContainer>

        <telerikDocking:RadPaneGroup>

             <telerikDocking:RadPane Header="Pane 1">

                  <telerikDocking:RadPane.TitleTemplate>

                      <DataTemplate>

                         <StackPanel Orientation="Horizontal">

                             <Image Source="images/Button.png" />

                             <TextBlock Text="HeaderText" VerticalAlignment="Center"/>

                          </StackPanel>

                       </DataTemplate>

              </telerikDocking:RadPane.TitleTemplate>

              </telerikDocking:RadPane>

      </telerikDocking:RadPaneGroup>

   </telerikDocking:RadSplitContainer>
</telerikDocking:RadDocking>

If you have further questions please feel free to contact us again.

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

[Bradley]

Konstantina,

This seems really easy.  I'll give it a shot.  Thank you!

Regards,
Brad Serbu

[Garry Clark]

Konstantina,
I am trying this solution in a MVVM Prism application I am working on and I can't quite get the image to show up on my pane. The Header="Binding HeaderInfo" works well, but I do not believe it is actually even looking at the titletemplate as I can change the Text="Hello World" and it will still display the Header="Binding HeaderInfo" as its text.

Any ideas?

Here is my ViewModel Properties ( I have also tried a .png in case it was an image format issue)

public string HeaderInfo
        {
            get { return Resources.HelpTitle; }
        }

        public ImageSource HeaderIcon
        {
            get { return new BitmapImage(ResourceService.GetPackUri("Resources/Help.ico")); }
        }

Here is my View

<telerikDocking:RadPane x:Class="VistaAdmin.Help.Presentation.HelpView"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:v="clr-namespace:VistaAdmin.Help.Presentation"

xmlns:p="clr-namespace:VistaAdmin.Help.Properties"

xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"

Header="{Binding HeaderInfo}">

<telerikDocking:RadPane.TitleTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<Image Source="{Binding HeaderIcon}" />

<TextBlock Text="{Binding HeaderInfo}" VerticalAlignment="Center"/>

</StackPanel>

</DataTemplate>

</telerikDocking:RadPane.TitleTemplate>  </   telerikDocking:RadPane>

[Konstantina]

Hello Garry,

Thank you for contacting us.

The Title of the Pane is of type string. Therefore, the content of the TitleTemplate is of type string. So, it cannot be bound and access your ViewModel properties. We are considering improvement of the Pane's TitleTemplate.
Sorry for any inconveniences caused by not providing the particular required features.

If you have further questions please feel free to ask again.

All the best,
Konstantina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.