Tab header shape request

11 posts, 1 answers
  1. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 05 Mar 2011 Link to this post

    Hi Team;
    If you look at the demo of Docking with "Summer" theme, you see the header shape of the tab pages uses the same shape as Expression Blend uses for it's tabs. Attached pic.

    Can we have the same shape tab header for Tab and Docking control for "Expression_Dark" Theme please?
    Thanks!
    ..Ben
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 10 Mar 2011 Link to this post

    Hello Ben Hayat,

    You can modify the default Expression_Dark theme following the approach described here.

    I prepared a sample project to get you started, illustrating how to customize the Expression_Dark theme RadTabControl style. I added the modified Telerik.Windows.Themes.Expression_Dark.dll in the Referenced Assemblies folder and I also added the RadTabItem modified style to the MainPage Resources so that you can track the changes that should be applied to the TabControl.xaml defined in the Expression_Dark theme project.

    Following the same approach you can customize the RadDocking Expression_Dark theme style as well. Let us know if you need more info.

    Regards,
    Tina Stancheva
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. DevCraft banner
  4. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 10 Mar 2011 Link to this post

    Hi Tina;
    I don't see any sample project. with your post.

    After a long discussion with myself ;-), I've decided to use "Summer" theme than "Expression_Dark". So the docking are already done in the Summer, but I need to do them for Tab control.

    Thanks!
  5. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 10 Mar 2011 Link to this post

    Hello Ben,

    Please accept my apology. Indeed I left out the attachment. Please find it bellow.

    Kind regards,
    Tina Stancheva
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 10 Mar 2011 Link to this post

    Thank you very much;
    You're great AS ALWAYS!
    ..Ben
  7. Bruno
    Bruno avatar
    54 posts
    Member since:
    Jul 2012

    Posted 04 Apr 2011 Link to this post

    Hi Tina

    Thank you for this nice sample.
    Just one question: How can I get the selected Tab in front of the 'not selected'?
    In the sample, the selected Tab (left) seems to be cutted off at the lower right corner (see screenshot).

    Thank you.
  8. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 07 Apr 2011 Link to this post

    Hello Bruno,

    If you want the RadTAbItems to be styled not to overlap each other at all:

    You can define a Margin foe each item:
    <Setter Property="Margin" Value="3,0" />

    If, however, you want the SelectedItem to overlap the unselected item, you need to add some custom logic. For example you can handle the PreviewSelectionChanged() event like so:
    void tabControl_PreviewSelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count != 0)
        {
            RadTabItem newSelectedItem = e.AddedItems[0] as RadTabItem;
            newSelectedItem.SetValue(Canvas.ZIndexProperty, 2);
        }
        if (e.RemovedItems.Count != 0)
        {
            RadTabItem oldSelectedItem = e.RemovedItems[0] as RadTabItem;
            oldSelectedItem.SetValue(Canvas.ZIndexProperty, 0);
        }
    }
    Give this a try and let us know if it helps or if you need more info.

    Regards,
    Tina Stancheva
    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
  9. Bruno
    Bruno avatar
    54 posts
    Member since:
    Jul 2012

    Posted 07 Apr 2011 Link to this post

    Hi Tina

    Thank you for your 'overlap' solution. The code works perfect.
    However befor Q1.2011 it worked without the PeviewSelectionChanged trick.

    Thanks again!
  10. George
    Admin
    George avatar
    1332 posts

    Posted 12 Apr 2011 Link to this post

    Hi Bruno,

    Your remarks are correct and we will definitely look in this bug. I am glad to update your telerik points. Sorry for any inconvenience caused.


    Greetings,
    George
    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
  11. Ken
    Ken avatar
    1 posts
    Member since:
    Jun 2009

    Posted 23 Dec 2011 Link to this post

    Where does this code snippet go exactly, for instance i'm using a grid and not a canvas.

    void tabControl_PreviewSelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count != 0)
        {
            RadTabItem newSelectedItem = e.AddedItems[0] as RadTabItem;
            newSelectedItem.SetValue(Canvas.ZIndexProperty, 2);
        }
        if (e.RemovedItems.Count != 0)
        {
            RadTabItem oldSelectedItem = e.RemovedItems[0] as RadTabItem;
            oldSelectedItem.SetValue(Canvas.ZIndexProperty, 0);
        }
    }
  12. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 28 Dec 2011 Link to this post

    Hello Ken,

     The Canvas.ZIndex is attached property and you don't need Canvas defined in XAML in order to use it. Please check out the attached sample and let us know if it satisfies you.

    Regards,
    Petar Mladenov
    the Telerik team

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

Back to Top
DevCraft banner