Distribute RadTabItems Evenly Among Rows

2 posts, 0 answers
  1. Max
    Max avatar
    2 posts
    Member since:
    Apr 2014

    Posted 28 Jan 2015 Link to this post


    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.

  2. Max
    Max avatar
    2 posts
    Member since:
    Apr 2014

    Posted 30 Jan 2015 Link to this post

    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

    <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
            <primitives:TabPanel />
    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!
Back to Top