How to make TabControl Occupies full width available

2 posts, 0 answers
  1. Joseph
    Joseph avatar
    135 posts
    Member since:
    Sep 2007

    Posted 13 Feb 2009 Link to this post

    I have a TabControl inside a StackPanel ( width = Auto ).

    <StackPanel x:Name="panelTabs" Orientation="Horizontal" Grid.Column="0" Width="Auto"  Margin="2,5,5,5" > 
     
                            <telerikNavigation:RadTabControl  FontSize="12"   Margin="0,-4,0,0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Width="768"  > 
                                 
                                <telerikNavigation:RadTabItem Header="Translator"  IsSelected="True" HorizontalAlignment="Stretch" > 
     
                                    <Border BorderBrush="#8CBDCE" BorderThickness="1,0,1,1" Margin="3,-6,1,2"
                                        <StackPanel  > 
                                            <TextBox  BorderThickness="0" Text="Some Textdsdsdsdsd ssds Some Textdsdsdsd Some Textdsdssssssssssssssssdsd ssds Some Textdsdsdsd sdsdTextdsdsdsdsd ssds Some Textdsdsdsd sd d" TextWrapping="Wrap"   ></TextBox
                                        </StackPanel> 
                                    </Border> 
                                </telerikNavigation:RadTabItem> 
     
                                <telerikNavigation:RadTabItem Header="Notes" Background="#E6E7E8"
                                    <Border BorderBrush="#8CBDCE" BorderThickness="1,0,1,1" Margin="3,-6,1,2"
                                        <StackPanel Height="Auto" Width="Auto" > 
                                            <TextBox  BorderThickness="0" Text="Some Textdsdsdsdsd ssds Some Textdsdsdsd Some Textdsdssssssssssssssssdsd ssds Some Textdsdsdsd sdsdTextdsdsdsdsd ssds Some  " TextWrapping="Wrap"  ></TextBox
                                        </StackPanel> 
                                    </Border> 
                                </telerikNavigation:RadTabItem> 
     
                                <telerikNavigation:RadTabItem Header="Query"
                                    <Border BorderBrush="#8CBDCE" BorderThickness="1,0,1,1" Margin="3,-6,1,2"
                                        <StackPanel Height="Auto" Width="Auto" > 
                                            <TextBox  BorderThickness="0" Text="Some Textdsdsdsdsd ssds Some Textdsdsdsd sd Textdsdsdsdsd ssds Some Textdsdsdsd sd sdTextdsdsdsdsd ssds Some Textdsdsdsd sd  " TextWrapping="Wrap"  ></TextBox
                                        </StackPanel> 
                                    </Border> 
                                </telerikNavigation:RadTabItem> 
                                 
                                <telerikNavigation:RadTabItem Header="Search" > 
                                    <Border BorderBrush="#8CBDCE" BorderThickness="1,0,1,1" Margin="3,-6,1,2"
                                        <StackPanel Height="Auto" Width="Auto" > 
                                            <TextBox  BorderThickness="0" Text="Some Textdsdsdsdsd ssds Some Textdsdsdsd Some Textdsdsdsdsd ssds Some Textdsdsdsd sdsdTextdsdsdsdsd ssds Some Textdsdsdsd sd  " TextWrapping="Wrap"  ></TextBox
                                        </StackPanel> 
                                    </Border> 
                                </telerikNavigation:RadTabItem> 
                                 
                                <telerikNavigation:RadTabItem Header="Glossaries" Background="#FCFCFC"
                                    <Border BorderBrush="#8CBDCE" BorderThickness="1,0,1,1" Margin="3,-6,1,2"
                                        <StackPanel Height="Auto" Width="Auto" > 
                                            <TextBox  BorderThickness="0" Text="Some Textdsdsdsdsd ssds Some Textdsdsdsd sd Textdsdsdsdsd ssds Some Textdsdsdsd sdsdTextdsdsdsdsd ssds Some Textdsdsdsd sd   " TextWrapping="Wrap"  ></TextBox
                                        </StackPanel> 
                                    </Border> 
                                </telerikNavigation:RadTabItem> 
                                 
                            </telerikNavigation:RadTabControl> 
     
     
                        </StackPanel> 


    If I set the TabControl width to Auto, the TabControl doesn't take Full width available. It just synchronize with its child templates width.

    I just need it to be fluid, when I drag the browser and reduce the width I need the TabControl to adapt to it. 

    Any Ideas?
  2. Boyan
    Admin
    Boyan avatar
    758 posts

    Posted 13 Feb 2009 Link to this post

    Hi Joseph,

    The problem is that you use Horizontal Stackpanel in your application. When layout is loaded the control takes the available space and then stackpanel just doesn't change the size of its child further. If you remove Orientation="Horizontal"  it will resize as expected.

    I would, however, suggest that you use Grid as it is the better choice in most cases.  For more information about the difference between Grid and Stackpanel you can check  http://msdn.microsoft.com/ .

    Another issue is that you set a fixed value(Width="768") to RadTabControl which restricts the control to take smaller width. If your idea was to restrict resize of control to 768 pixels you should use the MinWidth property.
     <StackPanel x:Name="panelTabs" Grid.Column="0" Width="Auto" 
                    Margin="2,5,5,5"
     
                <telerikNavigation:RadTabControl FontSize="12" Margin="0,-4,0,0" 
                        HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
     
                    <telerikNavigation:RadTabItem Header="Translator" IsSelected="True" 
                            HorizontalAlignment="Stretch"

    I have modified your code to reach the desired effect.  I still recommend that you not use Stackpanel.

    Let me know if this helps.

    Kind regards,
    Boyan
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. DevCraft banner
Back to Top