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

10 posts, 0 answers
  1. Alan Lee
    Alan Lee avatar
    4 posts
    Member since:
    Oct 2009

    Posted 05 Aug 2010 Link to this post

    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.

  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 09 Aug 2010 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Andrew
    Andrew avatar
    29 posts
    Member since:
    Oct 2010

    Posted 06 Dec 2011 Link to this post

    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>
  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 12 Dec 2011 Link to this post

    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 >>
  6. Erik Damgaard
    Erik Damgaard avatar
    28 posts
    Member since:
    May 2010

    Posted 17 Jul 2012 Link to this post

    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
  7. Dani
    Admin
    Dani avatar
    848 posts

    Posted 20 Jul 2012 Link to this post

    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.

  8. Mirko
    Mirko avatar
    9 posts
    Member since:
    Aug 2012

    Posted 16 Aug 2012 Link to this post

    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 
  9. Masha
    Admin
    Masha avatar
    355 posts

    Posted 20 Aug 2012 Link to this post

    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.

  10. Sarah
    Sarah avatar
    1 posts
    Member since:
    Oct 2012

    Posted 30 Oct 2012 Link to this post

    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
  11. Masha
    Admin
    Masha avatar
    355 posts

    Posted 01 Nov 2012 Link to this post

    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.

Back to Top
UI for WPF is Visual Studio 2017 Ready