Display Icon + text in TabControl Dropdown

10 posts, 1 answers
  1. Jacobus
    Jacobus avatar
    4 posts
    Member since:
    Feb 2011

    Posted 16 Mar 2012 Link to this post

    Hi

    I need to display an icon as well as a string in the Tab header as well as in the Dropdown available. So far it looks as if I can only have a text box in the header and it'll be picked up correctly for display in the dropdown. I have a grid container in my header and that causes some unwanted results iun the dropdown.

    Anyone run into this and maybe know how to get around this.
    Thank you
     Jacobus
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 19 Mar 2012 Link to this post

    Hello Jacobus,

    If you've defined the RadTabControl in XAML then you need to set the RadTabItems DropDownContent property. I attached a sample project demonstrating both a declaratively defined and databound RadTabControl which TabItem.Headers contain text and image.

    Let me know if it helps.

    Regards,
    Tina Stancheva
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Jacobus
    Jacobus avatar
    4 posts
    Member since:
    Feb 2011

    Posted 20 Mar 2012 Link to this post

    Tina,

    Thank you for the sample and all.

    I've tried this in our solution but the changes suggested would have far reaching repurcussions throughout the rest of the app, especially with the navigation pieces.

    Are there any other method of getting the icons and text on the tabs and the dropdown that would not involve changing the implementation so drastically? Currently we're defining the first few tabs in the XAML and then we've got code that add new TabItems to t he collection. I know that this is not preferred but that the parameters that I've got to work within.

    Additional:
     I've also tried using the "DropDownContent", but could not get any binding to work. Is this something that's known or just something that I'm doing wrong? I'd want the content of this to be bound to the same data as in the Header.

    Thank you
     Jacobus
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Mar 2012 Link to this post

    Hello Jacobus,

    The RadTabItem provides a DropDownContentTemplate property where you can define a DataTemplate for the DropDownContent and bind it similarly to the Header property. However I am not really sure what is your scenario and which changes you can't implement and it seems that I might be missing something from your scenario.

    You said that you've defined the RadTabItems both in xaml and in code-behind so I thought that you're creating RadTabItems. But then I am not sure how you bind the Header property and why you can't set the DropDownContent property. If you can send us a sample application or modify my application to better demonstrate your scenario, we will examine it and look for a better suited approach for you to take.

    Greetings,
    Tina Stancheva
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Jacobus
    Jacobus avatar
    4 posts
    Member since:
    Feb 2011

    Posted 26 Mar 2012 Link to this post

    Tina,

    Thank you for the reference to "DropDownContentTemplate". I used that in my hardcoded XAML and all works great. I then tried incorporating it in the template but got nothing back. All the items are there but without either description or icon. I suspect I have to use a relative path but I'm not sure what it'll be.

    I've tried to attached a reworked version of the app that you've send me to look at but the website/forum won't allow me. Seems I'll have to open an support ticket.

    Regards
     Fick
  7. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 27 Mar 2012 Link to this post

    Hello Fick,

    Thank you for starting a support thread. I modified the solution to demonstrate how to get over the issue. Give it a try and let me know how it goes.

    Regards,
    Tina Stancheva
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  8. Jay
    Jay avatar
    5 posts
    Member since:
    Mar 2012

    Posted 28 Mar 2012 Link to this post

    Hi,

    I was working on the tab control and wanted to template the tab header and the corresponding DropDownItem.

    <DataTemplate x:Key="RadPaneHeaderTemplate">  

     <StackPanel Orientation="Horizontal" ToolTipService.ToolTip="{Binding Converter={StaticResource ConvertToolTip}}">
     
      <Image Source="{Binding Converter={StaticResource ConvertDisplayImage}}" Width="16" Height="16"/>

      <TextBlock Text="{Binding Path=RootObject.Name}" Margin="5 0 0 0"/>

     </StackPanel>

    </DataTemplate>


     

    I am creating RadPanes from code and manually setting the "HeaderTemplate" and "DropDownContentTemplate".

    The header is showing up properly as expected. But the corresponding dropdownitem is given as the namespace of the object being set as the datacontext for the pane.

    Please advice.

    Thanks
    Jay.

  9. Jacobus
    Jacobus avatar
    4 posts
    Member since:
    Feb 2011

    Posted 28 Mar 2012 Link to this post

    Jay,

    Have you looked at the sample app that was attached in the begining of this thread? It should give you a good starting point.

    My "RadTabItem" defenition looks like: 

    RadTabItem
      RadTabItem.Header
        Grid
           Image
           TextBlock
           Button
        /Grid
      /RadTabItem.Header 
     RadTabItem.DropDownContent
        Grid
          Image
          TextBlock
        /Grid
      /RadTabItem.DropDownContent
    /RadTabItem

    All of my data are bound and I'm getting the desired results. Unfortunastely there's no way to attach anything but an image to the forums. I've gotten it working with either a template or not, just depends on the implementation you have.

    If you try the sample and still have issues I'll try to help as much as I can.

    Got to give credit to Tina from the support team for her help in ghetting mne through this.

    Hope this helps
     Jacobus.
  10. Jay
    Jay avatar
    5 posts
    Member since:
    Mar 2012

    Posted 17 Apr 2012 Link to this post

    Hi,

    The issue I am facing is that on applying the datatemplate to the Header property of the Radpane, it is working properly.

    But when i set the DropDownContentTemplate to the same template, it is not working.

    in XAML :

    <UserControl.Resources>

    <DataTemplate x:Key="RadPaneHeaderTemplate">  

         <StackPanel Orientation="Horizontal" ToolTipService.ToolTip="{Binding Converter={StaticResource ConvertToolTip}}">  
              <Image Source="{Binding Converter={StaticResource ConvertDisplayImage}}" Width="16" Height="16"/>

              <TextBlock Text="{Binding Path=RootObject.Name}" Margin="5 0 0 0"/>

         </StackPanel>

    </DataTemplate>

    </UserControl.Resources>

    in Code :  while adding a radpane dynamically to the group

    RadPane radPane= new RadPane();

    radPane.HeaderTemplate =

     

    this.Resources["RadPaneHeaderTemplate"] as DataTemplate;

     

    radPane.DropDownContentTemplate =

     

    this.Resources["RadPaneHeaderTemplate"] as DataTemplate;

     

    radPane.DataContext = myModelObject;


    Please advice.

    Thanks in advance
    Jay
  11. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 20 Apr 2012 Link to this post

    Hello Jay,

    We aren't aware of such issues in the RadTabControl, however from your information it seems you're using the RadDocking control.

    So I tested your code in a sample RadDocking application, but I still couldn't reproduce it. Please have a look at it and let me know if I'm missing something.

    Regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner