TabItem Background Color

[Ben Hayat]

I have a tab that has two items. This tab is on a grid which has a dark gray background. The content area of each tab shows as dark gray with my content. However the tab items, have a silver color background (I'm not talking about the header area content, but rather underneath). Is it possible Blend I can set this area as transparent or dark gray? Then the two Tab items, with their nice corner will show up nicer on the darker color?

Thanks!

Time to test other controls... ;-)

[Miroslav]

Hi Ben,

Yes, you can use the BackgroundVisibility property to switch the visibility of the header background. Like so:



BackgroundVisibility="Collapsed"



If you would like to change the background, you will need to edit the template. Do come back to us if you need help with this.

Greetings,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mike Hanson]

In your image the background colour of the content area is Green how do I set the colour of this area, I am struggling to find a way to set it.  RadTabItem.Background sets the Header background but not the content.

[Ben Hayat]

>>In your image the background colour of the content area is Green how do I set the colour of this area, I am struggling to find a way to set it.  RadTabItem.Background sets the Header background but not the content.<<

Michael;
Go to the Tab section first. Then Select  background color on the color chart and then set the Alpha channel to 100. Right now it's zero, and that's why you don't see any color.

I left it at zero and I use the background color to come through.
Hope this helps!

[Ben Hayat]

Miroslav;

Thank you, Thank you!
I'm sure this question will come up from others again. You may want to put t his in the KB.

[Mike Hanson]

Thanks Ben, I don't use Blend but your response has given me another direction to look in.

[Ben Hayat]

>>I don't use Blend<<

Oh man, are you kidding me? ;-) You should... Saves you a lot of time. Do all your layout in Blend and coding in VS.

Good luck!

[Mike Hanson]

If it were free I might use it, but I have paid MS a lot of money for VS 2008 Pro and don't see why I should have to pay them another fortune for an RTM version.  I should be able to choose one tool and do everything with that.

[Miroslav]

Hi Ben & Michael,

Yes, you can use the Background property of the TabControl to set the background of the content area. I created the project in blend when and changed the properties. I am attaching so that you can have a look at it, if you need to.

It might be a bit confusing which of the properties are taken from the TabItems and used by the TabControl. Since we are currently working on the help articles for the controls, I will try to summarize some of the more interesting points for the TabControl here. Hopefully it will be helpful if you are trying to use the TabControl now.

• As a rule of thumb, the TabControl is made as much WPF-like as possible (with some improvements).
• The BorderBrush, BorderThickness & Background properties affect the content area.
• The BackgroundVisibility property affects the background of the headers.
• Content, ContentTemplate and IsBreak are the only properties of the tabItem used by the TabControl, all other properties - margin, background, etc affect the TabItem itself.
• If you set a SelectedIndex and there are not enough items for it (Selected index = 4, only 3 items present) and then later you add more items (without changing the index), item with index 4 will be selected when it is added, the SelectedIndex will change accordingly.
• If you need to track the selection, it is best to use SelectedItem, since SelectedIndex might change without changing the selection (e.g. when items are added before the currently selected item).
• If you add an item with IsSelected = true, it becomes the selected item.
• If an item is a non-visual item, it will be set as a DataContext of the Content area (so that binding will work, as in this example: http://www.telerik.com/demos/silverlight/#Examples/TabControl/HeaderContent,
• The TabControl actually uses 4 templates, which are exposed as properties: TopTemplate, BottomTemplate, LeftTemplate and RightTemplate. The templates are switched when the TabStripPlacement property is changed.
• If you need to change the template of the TabControl, it is best to set the above-mentioned properties since they will be used during the next switch (== placement property change).
• Items would not automatically form a second row in the TabStrip, you need to set the IsBreak property of the TabItem to true.
• If the focus has been set to a child of the currently selected content, the focus will be moved to the first focusable control in the new content (this for example does not happen in the MS TabControl and it is why you cant use TextBoxes as content).

As for Blend - it has its shortcomings and advantages. A quick change will be done faster in VS, but a complete design without Blend will be a hard thing to do.

Until we get the help articles done the forums will be the forums will be the best place for information on the controls, so do not hesitate to ask about things even in the sense of "I wonder whether <this> can be done with your controls", "I wonder whether <this> can be done in Silverlight".

Sincerely yours,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ben Hayat]

>>If it were free I might use it,<<

Michael, Blend 2.5 is free during trail, and looks like it be on trail for a long time. Take advantage of it.
--------------
Miroslav;

Thank you for your info. The support is first class here!

[Mike Hanson]

Thanks Miroslav I will take a look at the example.  In the app I am working on at the moment the Background when applied to the RadTabControl is only being applied to the TabStrip area and not the background area behind the child controls.  Basically all I want is the content area to be transparent so the colour of the page layout grid comes through, but I get a big white area.  I will double check after looking at the sample you attached.

Ben: I understand Blend is free for now, but I will at some point either have to pay up or switch to hand coding the XAML, so I prefer to learn how to get the most out of XAML from the start.

With the intellisense support in VS hand coding is not so difficult, not a huge difference from hand coding web sites which I have always done anyway.  Just another language to learn, granted significantly more complex than HTML but still just a language.

[Mike Hanson]

Found my problem.  The Telerik.*.dll files we were referencing were downloaded as part of the Trial version of the controls, and did not contain an embedded generic.xaml file so no default template.  I am guessing that they got corrupted on download.

After much hair pulling I downloaded the Default Style Browser from Silverlight.net and it threw an exception when I pointed it at the dlls in our project.  Stepping through the code for the browser I found the exception was a missing generic.xaml.

Now I have copied the Telerik.*.dlls from the sample provided earlier in this thread and bingo I have a styled RadTabControl and my background is working as expected.

[Miroslav]

Hello Michael,

The .dlls in the attached project are the ones you get with the download, so feel free to use them. The missing generic.xaml though is a real surprise! I am sorry to hear that you have had to go through all of that to get it working, but hopefully you would not have problems now.

Your feedback on the controls is always welcome.

Sincerely yours,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ben Hayat]

Excellent work Mike! Thanks for sharing, in case we run into similar case in the future!

[AK]

2 Questions:

1. How do I change color of the tabs (active, inactive, highlighted/rollover) ... Can I assign custom colors?

2. How do I change the color and width of a scroll bar?

Thanks,
Your help is greatly appreciated!

[Valentin.Stoychev]

Hello Alex,

For both of your question the answer is to edit the control template for the TabControl and for the ScrollBars.

There are no exposed properties about what you are trying to achieve.

Best wishes,
Valentin.Stoychev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Karl Mikesell]

Loading the example the default tab foreground color toggles between 'selected black' or 'unselected white'.  How can the foreground colors be changed?

This is an issue when Background and Foreground have the same color when tab is selected, and unable to find a workaround.

[Dimitrina]

Hi Karl,

We made some changes in the templates of the Themes in the Q1 release.

In the previous version of our control it was possible to change the foreground color of TabItem because we used  telerikNavigationPrimitives:TabItemContentPresenter .
 In the new version (Q1) we use ContentPresenter. Unfortunately, it is not possible to change the foreground of the TabItem because of the ContentPresenter that the Tab uses internally. The ContentPresenter itself does not expose a Foreground property.

Please find attached a project with a workaround. In the project I made a custom theme of TabItem control and replaced the ContentPresenter with ContentControl.  Using this change means that you will not be able to change the theme at Runtime.

Regards,
Dimitrina
the Telerik team