Styling TabItem

43 posts, 1 answers
  1. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 22 Jun 2010 Link to this post

    Hello Robert Hames,

    Thanks for your feedback.

    I believe that the best way to proceed would be the following:
    • You can send us a sample project or a screen-dump on how you want the tabs to look like. If you decide to send a sample project you can attach the zip file to a new support thread. Also, please state the exact theme you are using
    • We will customize the theme you use to make the tabs look the way you want them to

    Any further details you consider helpful will be greatly appreciated.

    I hope this is acceptable for you.

    Greetings,
    Dimitrina
    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
  2.
  3. Stephane
    Stephane avatar
    27 posts
    Member since:
    Mar 2009

    Posted 03 Nov 2010 Link to this post

    Hi,
    this post is very interesting.

    I try your sample to set dynamically in code behind the Style of my RadTabItem, it's wonderful.

    But i don't find the converter TabItemMarginConverter.

    Can you say me where i can find this converter or post the code?

    Thanks.
  5. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 09 Nov 2010 Link to this post

    Hi Stephane,

    Please find the code for the TabItemMarginConverter class. 

    using System;
    using System.Globalization;
    using System.Windows;
    using System.Windows.Data;
     
    public class TabItemMarginConverter : IValueConverter
    {
        // Methods
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if ((bool)value)
            {
                return this.SelectedMargin;
            }
            return this.UnselectedMargin;
        }
     
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
     
        // Properties
        public Thickness SelectedMargin
        {
            get;
            set;
        }
     
        public Thickness UnselectedMargin
        {
            get;
            set;
        }
    }

    Let me know if this helps. 

    Regards,
    Kiril Stanoev
    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
  7. Stephane
    Stephane avatar
    27 posts
    Member since:
    Mar 2009

    Posted 09 Nov 2010 Link to this post

    Ok for me.

    Thanks.

    Regards,
    Stephane
  8.
  9. Vijay
    Vijay avatar
    13 posts
    Member since:
    May 2012

    Posted 13 Jul 2012 Link to this post

    Hi 

    when i am using the same style in telerik 2009 version works well but i am using the 2012 version then i got "TabItemMarginConverter" error  then i added  TabItemMarginConverter  as suggested by Stephane but there is a small UI issues please help us to solver the Issue

    Thanks,
    RK

  11. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3299 posts

    Posted 17 Jul 2012 Link to this post

    Hello RK,

    I modified the solution to work with the latest version of our controls for Silverlight 5. I implemented the changes you requested both in the style and in the code-behind file. The logic in the code-behind file is used to set the ZIndex of the selected items to a higher value so that it can be displayed on top of the other tab items.

    Please have a look at the solution and let me know if it works for you.

    Greetings,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  13. Jo-Anne
    Jo-Anne avatar
    6 posts
    Member since:
    Feb 2011

    Posted 04 Dec 2012 Link to this post

    Could you please tell me how to get the tab items of the example zip to be right side and vertical, rather than across the top of the content area?
    Thank you,
    Jo
  14.
  15. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3299 posts

    Posted 07 Dec 2012 Link to this post

    Hello Jo,

    In order to display the tabs on the right and vertical, you'll have to set the RadTabControl TabStripPlacement to Right, the TabOrientation to Vertical and the Align to Right. However, you'll also have to further modify the templates of the RadTabControl and the RadTabItems to work with this alignment.

    I slightly modified the solution, so that you can get started on customizing the controls to better fit your design requirements. However, as I'm not sure how exactly you'd like to align the tabs, please let me know if you have any troubles editing the templates.

    Kind regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  17. Jo-Anne
    Jo-Anne avatar
    6 posts
    Member since:
    Feb 2011

    Posted 07 Dec 2012 Link to this post

    Works great - thanks very much!
    Jo
  19. Jo-Anne
    Jo-Anne avatar
    6 posts
    Member since:
    Feb 2011

    Posted 07 Dec 2012 Link to this post

    Sorry, is there a rotate or similar to make the words on the tabs also spin 90 degrees?
    Thanks again,
    Jo
  20.
  21. Vijay
    Vijay avatar
    29 posts
    Member since:
    Nov 2011

    Posted 10 Dec 2012 Link to this post

    Hi Sandeep,

    Please find the below link! Hope this helps better. Click Here

    Regards,
    Vijay
  23. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3299 posts

    Posted 12 Dec 2012 Link to this post

    Hello Jo,

    In order to leave the TabItem.Content alignment horizontal, you can remove the TabOrientation setting. Along with that you may want to display the header value centered in the tab item so I modified the RadTabItem style to set the Vertical/HorizontalContentAlignment properties on the TabItemContentPresenter element. Please take a look at the solution and let me know if it helps.

    Regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  25. Jo-Anne
    Jo-Anne avatar
    6 posts
    Member since:
    Feb 2011

    Posted 12 Dec 2012 Link to this post

    Thanks very much again!
    Jo
  26.
Back to Top