TabControl with width adjusted to available space

[Licenses]

Hello,

I'm currently using a RadTabControl on several pages in my application. One of these TabControls contains more tabs than the page width can handle.

I would like to avoid a horizontal scrollbar at the bottom of the page.

And giving the TabControl a fixed width does not really solve the problem. This enables the overflow buttons of the TabControl, but it also creates unused space at the right of the TabControl (with HorizontalAlignment set to 'Left'), depending upon the screen resolution.

So is there a way to make sure that the TabControl takes the full width of the available space, and at the same time shows the overflow buttons when the control has more tabs than can be shown?

Thanks
Sodi

[Alex Fidanov]

Hi Sodi We,

If you want the RadTabControl to take all the space available in its container, you need to set the HorizontalAlignment to Stretch. However, this behavior depends on the type of the container as well. What container are you using?

Best wishes,
Alex Fidanov
the Telerik team

[Licenses]

Hi Alex,

I tried your suggestion, but it did not give the desired result: the RadTabControl does not have overflow buttons and the page has a horizontal scrollbar instead.

The following code snippet gives an idea of the structure of the XAML:

<UserControl>
 <Grid x:Name="LayoutRoot">
  <ScrollViewer Style="{StaticResource ScrollViewerStyle}">
   <StackPanel HorizontalAlignment="Stretch">
    <Grid>
     //some other controls
    </Grid>
    <telerikNavigation:RadTabControl HorizontalAlignment="Stretch" OverflowMode="Scroll" ScrollMode="Item">
    </telerikNavigation:RadTabControl>
   </StackPanel>
  </ScrollViewer>
 </Grid>
</UserControl>

This is the style definition of the ScrollViewer:

<Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer">
 <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
 <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
 <Setter Property="Padding" Value="0"/>
 <Setter Property="BorderThickness" Value="0"></Setter>
 <Setter Property="telerik:StyleManager.Theme" Value="Summer"/>
</Style>

Any idea about what I should change?

Thanks
Sodi

[Petar Mladenov]

Hi Sodi We,

 
In order to disable the horizontal scrollbar you can do  like so:

<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>

Also, you can have dropdown button showing the non-visible tabs with declaring  DropDownDisplayMode="Visible": 

<telerik:RadTabControl x:Name="radTabControl"  HorizontalAlignment="Stretch"
               OverflowMode="Scroll" DropDownDisplayMode="Visible" ScrollMode="Item">

Feel free to ask if you need more info. I would be glad to assist you further.

All the best,
Petar Mladenov
the Telerik team

[pradeep kumar]

HI Petar, 

I am working on RadTabControl as well, 
I have placed the RadTabControl in another usercontrol using ItemControl, But on loading the page, the ItemControl is stretching to the available space. I tried Horizontal Alignment = Stretch, But didn't workout, 
Do i need to set any property for making it stretch.

Kindly help me on this. Thanks.

[Zarko]

Hi Pradeep,
Could you please send us some code snippets on how exactly are you using the RadTabControl and the userControl that it's in (and what do you want the result to be)? Also are you using ItemsControl or a ContentControl ? If you're using ContentControl you could set its ContentAlignments:

<ContentControl VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
    <local:MyControl  />
</ContentControl>

I've attached a sample project so could you please examine it and if you have further questions feel free to ask.

Greetings,
Zarko
the Telerik team