This is a migrated thread and some comments may be shown as answers.

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

11 Answers 184 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Alan Lee
Top achievements
Rank 1
Alan Lee asked on 06 Aug 2010, 04:10 AM
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.

11 Answers, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 09 Aug 2010, 12:55 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Andrew
Top achievements
Rank 1
answered on 06 Dec 2011, 10:45 PM
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.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>
0
Dani
Telerik team
answered on 12 Dec 2011, 01:49 PM
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
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Erik Damgaard
Top achievements
Rank 1
answered on 17 Jul 2012, 08:57 AM
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
0
Dani
Telerik team
answered on 20 Jul 2012, 03:20 PM
Hi Erik,

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

Hope this will be helpful.

Regards,
Dani
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Mirko
Top achievements
Rank 1
answered on 16 Aug 2012, 08:41 AM
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 
0
Masha
Telerik team
answered on 20 Aug 2012, 01:33 PM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Sarah
Top achievements
Rank 1
answered on 30 Oct 2012, 02:47 PM
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
0
Masha
Telerik team
answered on 01 Nov 2012, 02:42 PM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Sathish
Top achievements
Rank 1
answered on 29 Jul 2019, 02:10 PM
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.
0
Martin Ivanov
Telerik team
answered on 31 Jul 2019, 10:20 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Docking
Asked by
Alan Lee
Top achievements
Rank 1
Answers by
Dani
Telerik team
Andrew
Top achievements
Rank 1
Erik Damgaard
Top achievements
Rank 1
Mirko
Top achievements
Rank 1
Masha
Telerik team
Sarah
Top achievements
Rank 1
Sathish
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or