This is a migrated thread and some comments may be shown as answers.

Distribute RadTabItems Evenly Among Rows

1 Answer 44 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Max
Top achievements
Rank 1
Max asked on 28 Jan 2015, 11:19 PM
Hi,

We currently switched over from the default Silverlight TabControl to RadTabControl, and there are a few functionality differences. 

Say we have 12 RadTabItems in a RadTabControl, and have Overflow="True".  Depending on the window size, we will get 1, 2 or 3 rows of tabs.  Say the window size produces 2 rows, currently the RadTabControl will give us 10 Tabs in the first row and then 2 Tabs in the second row.  Then as I shrink the window size, the RadTabControl will continue removing Tabs from the first row and adding them to the second row until a third row appears.

Rather than showing 10 Tabs on one row and 2 Tabs on a second row, we would like when the window size does not allow all the tabs to fit on 1 row that the Tabs will be split in half and appear on both rows evenly distributed and justified.  So if the screen size forces 2 rows, we would like 6 Tab items to appear in each row, but stretching to fit the screen size.  Then if the screen size forces there to be 3 rows, there would be 4 Tab items in each row and so forth.

We use the Align property set to "Justify" to stretch the current Tabs, but the Tabs do not evenly distribute per row.  The original TabControl distributes the tabs by an even amount and it looks much cleaner than having 10 small tabs on the first row and 2 super stretched tabs on the second row.

We were wondering how we can achieve this behavior in editing the ControlTemplate.
 
 Thanks!


1 Answer, 1 is accepted

Sort by
0
Max
Top achievements
Rank 1
answered on 30 Jan 2015, 09:22 PM
After a lot more research and digging, I've fixed the issue.  For those of you wonder how to recreate the Silverlight TabControl default behavior of equally balancing tab amount per row, you have to create a custom ItemsPanelTemplate like this:

Add the reference
xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls"

<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
        <primitives:TabPanel />
</ItemsPanelTemplate>
 
and then in your custom RadTabControl style add:

<Setter Property="ItemsPanel" Value="{StaticResource ItemsPanelTemplate}" />

which will then force the RadTabControl to use a TabPanel rather than a TabWrapPanel as the ItemsPanelTemplate, which is what the default Silverlight control uses.  The TabPanel will take care of all the nice wrapping and spacing of tabs on the rows.

Best of luck!
Tags
TabControl
Asked by
Max
Top achievements
Rank 1
Answers by
Max
Top achievements
Rank 1
Share this question
or