Question

I have a TabControl that has four tabs:

<TabControl> 
    <TabItem><TextBox/></TabItem>
    <TabItem><UserControl/></TabItem>
    <TabItem><Label/></TabItem>
    <TabItem><Image/></TabItem>
</TabControl> 

each of the items are standard WPF controls but the second one, which is a custom UserControl, can have an arbitrary size.

Textbox binds to some property but can be empty or can have a long text. Same with Label.

The Image instead has always the biggest size.

The TabControl is defined in a Window that changes size depending on the size of the tab.

Currently the behaviour is such that every time I switch from one tab to the following, the window changes size.

I am puzzled on which is the best way to obtain the following:

• The TabControl sets its size according to the UserControl size
• The TextBox will fit in the TabItem panel but if it desired size is bigger than the second panel’s size then it will show the vertical scroll bar
• Once the form is loaded and the tab displayed, changing from one tab to the next will not resize the Window.

Any ideas on how this can be achieved without having to write custom controls?

Answer 1

You should be able to achieve this using a couple ElementName bindings and a ScrollViewer:

<TabControl Name="tabControl" Height="{Binding ElementName=userControl, Path=Height}">
    <TabItem Header="ONE">
        <ScrollViewer Height="{Binding ElementName=tabControl,Path=Height}">
            <TextBox Height="400" VerticalAlignment="Top"/>
        </ScrollViewer>
     </TabItem>
     <TabItem Header="TWO"><UserControl Name="userControl" Height="200" Width="400" /></TabItem>
     <TabItem Header="THREE"><Label/></TabItem>
     <TabItem Header="FOUR"><Image/></TabItem>
</TabControl>