Home / Community & Support / Developer Productivity Tools Forums / Silverlight > TabControl > Tab header shape request

• Ben Hayat MVP

  Posted on Mar 5, 2011 (permalink)

  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
  

  Attached files

  • SS1.jpg
  • ss2.jpg

  Reply

• Tina Stancheva Tina Stancheva

  Posted on Mar 10, 2011 (permalink)

  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!

  Reply

• Ben Hayat MVP

  Posted on Mar 10, 2011 (permalink)

  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!

  Reply

• Answer Tina Stancheva Tina Stancheva

  Posted on Mar 10, 2011 (permalink)

  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!

  Attached files

  • TabDockingControlsSample.zip

  Reply

• Ben Hayat MVP

  Posted on Mar 10, 2011 (permalink)

  Thank you very much;
  You're great AS ALWAYS!
  ..Ben

  Reply

• Bruno

  Posted on Apr 4, 2011 (permalink)

  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.
  

  Attached files

  • seltabitem.png

  Reply

• Tina Stancheva Tina Stancheva

  Posted on Apr 7, 2011 (permalink)

  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

  Reply

• Bruno

  Posted on Apr 7, 2011 (permalink)

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

  Reply

• George George

  Posted on Apr 12, 2011 (permalink)

  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

  Reply

• Ken

  Posted on Dec 23, 2011 (permalink)

  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);

      }

  }

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Dec 28, 2011 (permalink)

  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 >>

  Attached files

  • 255258-TabDockingControlsSample.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > TabControl > Tab header shape request