RadTabControl OverflowMode="Wrap" Issue

[Enal]

Hi -

We recently replaced a different library with Telerik because complex components like Grid and Chart are well done, but in some other cases we have trouble to restore the look & feel the users expect. We'd like to go with a single vendor if possible. So...

When defining a RadTabControl like so:

<telerik:RadTabControl Name="TabRoot" OverflowMode="Wrap" TabStripPlacement="Bottom"/>

...it appears the Wrap logic is... sub-optimal... ;-)

1. Let's say the wrap results in 3 lines. What we would expect is line 1 and 2 to be filling the entire width and line 3 to be partially filled. What we experience is line 1 partially filled and lines 2 and 3 filling the entire width (but not neatly, see #3).
2. When clicking on an item the lines swap around. The partially filled line can end up on top, in the middle or on the bottom. Clicking on items that cause tab rows to move up should re-flow the wrap.
3. Ideally - to look good - the logic should stretch the 'complete' rows to the entire width - i.e. it should adjust tab sizes to fill the entire width available on 'full' rows.

Any chance of someone re-visiting this implementation into something to be proud of?  :-)

Thanks!

[Tina Stancheva]

Hi Enal,

Thank you for contacting us and this feedback on the RadTabControl layout. I can see your point on the matter and this is why I added your suggestions in our PITS where you can track the progress of the related item.

In the meantime you can edit the default ControlTemplate of the RadTabControl to implement the desired behavior. I attached a sample project where I modified the default style/template of the TabControl to implement your requirements. Can you please have a look at it and let me know if it works for you or if I'm missing something.

Also, I updated your Telerik account for your feedback.

Regards,
Tina Stancheva
the Telerik team

[Enal]

Hi Tina - 

Just checked it out. Great, it justifies the width and it doesn't reorder the rows (I guess as a consequence of ReorderTabRows=False, which I was unaware of)

However, the logic still seems to be inverted when placing the tab bar on the bottom. I'd say within the TabControl TabItems are aligned BottomRight instead of TopLeft - if that makes sense... I guess the attached picture explains it better (tab content is above this bar). Maybe it's a simple setting - I didn't look into the logic yet, just inserted your modded Style.

Thanks for your help so far!

Oh, one more comment - it appears the look (colors) are hard coded. Ultimately we'd like the control to accept Themes, which the user can select application-wide. Thanks.

[Petar Mladenov]

Hi Enal,

 In the solution from Tina , there is no TabStripPlaceMent property set to Bottom, only the Template is changed. So I suggest you to unset the TabStripPlacement in your original project if you want to use the Style from our project.
As for the setting an Application-wide Theme in Silverlight, you can examine this help article and the sub topic named: 

Setting Application-Wide Built-In Theme in the Code-Behind.

Greetings,
Petar Mladenov
the Telerik team

[Enal]

Hi Petar -

Thanks, but this does not help a lot :-)
1. The requirement of our users IS to place the strip on the bottom. I noticed the placement feature has been implemented with a rotate transform in the given example. That of course will never work and explains the broken alignment. I removed that transform, which aligns things correctly but the text is then upside down. I couldn't figure out what or where this is set - how is the tab text rotated?
2. We are already using Themes. The comment was regarding the given example, which seems to include many hard-coded colors and may not be fully 'themable'.

I think we may be better off just taking a Grid, filling it with buttons and implement our own wrapping logic on resize to achieve the desired look and feel.

Regards.

[Tina Stancheva]

Hello Enal,

In the sample project i previously attached I haven't used a RotateTransformation, I only reordered the Content and Header part of the control - since they are hosted inside a Grid, I changed the row number that indicates the order in which they are rendered. I positioned the header part in the second row and the content part in the top row. What I also changed in the custom style is the RadTabControl ItemsPanel to WrapPanel. Using this custom style, as Peter noted, you don't have to use the TabStripPosition property as it will trigger  a visual state that will change the tabs positions and display.

However, you are indeed right that this approach cannot work with application-wide themes as it hard-codes the style of the control. And it might be better in your scenario to create a custom control to display the data on the screen based on your requirements.

As for the RadTabControl, we will definitely work on improving its behavior when changing the TabStripPlacement and we will take your feedback into consideration as it is truly valuable.

Best wishes,
Tina Stancheva
the Telerik team

[Enal]

Hi Tina - 

Not sure we are talking about the same thing. There clearly are active RotateTransforms in your given template. It's probably not part of what you modified but from the original template. One of the original developers seems to have come up with this somehow clever, but in our case flawed trick.

Anyway, we are good for now. Looking forward to test the next release of this component when its ready.

Thanks!