This is a migrated thread and some comments may be shown as answers.

How to make TabControl Occupies full width available

1 Answer 1238 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Joseph
Top achievements
Rank 1
Joseph asked on 13 Feb 2009, 12:18 PM
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?

1 Answer, 1 is accepted

Sort by
0
Boyan
Telerik team
answered on 13 Feb 2009, 04:51 PM
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.
Tags
TabControl
Asked by
Joseph
Top achievements
Rank 1
Answers by
Boyan
Telerik team
Share this question
or