RadControls for WinForms TabStrip Tips

A recent project has had me spending a lot of time working with Telerik controls for WinForms, and sometimes learning some lesser-known tricks in the process.  Whether by research on Telerik's support site, contact with the fine people at Telerik themselves, or just plain old experimentation, it's been fun to learn these little tidbits that can help turn a control from just functionally acceptable into something much more.

Take the RadTabStrip control, for example.  Beyond the basic functionality of tabbing, it can actually be customized many ways to provide more intuitive navigation between application areas.  We were using the RadTabStrip for such a purpose, and for an unlimited number of tabs, but didn't want to show the scrolling buttons sometimes used to navigate through tabs which are not visible on the strip.

image   image

For many many tabs, scrolling wouldn't work so well, because the user might want to navigate from Tab No. 1 to Tab No. 25 without clicking the scroll button 24 times.  For that, there's the OverFlow button option on the tabstrip.

 image image  

So far, nothing really new here, but consider this:  when the user clicks on a tab in the overflow panel, they actually go to that tab, but the tab name doesn't appear in the list across the top, because we turned off scrolling, remember?  This is where the 'tips' part comes in!  Adding this one line of code to your Form will make the tabstrip scroll the tab clicked in the overflow panel into view.

private void Form1_Load(object sender, EventArgs e)
{
     radTabStrip1.TabStripElement.TabStripOverFlowBehavior =
        Telerik.WinControls.UI.TabStrip.OverFlowBehavior.BringIntoView;
}

Now, there's also the possibility that the tab could be changed programmatically, and you need to scroll THAT tab into view.  In that case, you'll need to use the ScrollIntoView method of the TabStripElement.

radTabStrip1.TabStripElement.ScrollIntoView(newselectedtab);

The final tip has to do with Theming the tabstrip with overflow panel.  In the Visual Style Builder, there's no element that represents the drop down panel, and you may not want the standard white with orange highlights panel.  If you're using an application theme, this becomes a simple fix.  Just add a theme for RadDropDownButton with the same theme name as your tabstrip, and the tabstrip will pick it up. 

For example, using 2 theme files in my sample project and the following code, I can get a custom themed tabstrip with matching overflow dropdown panel.

InitializeComponent();
ThemeResolutionService.RegisterThemeFromStorage(ThemeStorageType.Resource,
"exampleradtabstrip.Theme.TabStrip.xml");
ThemeResolutionService.RegisterThemeFromStorage(ThemeStorageType.Resource,
 "exampleradtabstrip.Theme.DropDownButton.xml");

ThemeResolutionService.ApplicationThemeName = "ExampleTheme";

image    image

Note that if you're using a Theme Manager on your form instead of the ThemeResolutionService, you can just load both your theme files into the manager, and the drop down theme will get picked up.  Just make sure both theme files use the same theme name in their xml files.

For more information, the Telerik knowledge base and forums are an excellent place to start.

comments powered by Disqus