TabControl with width adjusted to available space

6 posts, 0 answers
  1. Sodi We
    Sodi We avatar
    160 posts
    Member since:
    Apr 2010

    Posted 12 Oct 2010 Link to this post


    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
  2. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 15 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Sodi We
    Sodi We avatar
    160 posts
    Member since:
    Apr 2010

    Posted 21 Oct 2010 Link to this post

    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
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 26 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. pradeep kumar
    pradeep kumar avatar
    1 posts
    Member since:
    Jul 2012

    Posted 05 Jul 2012 Link to this post

    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.
  7. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 10 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner