Embedding an ItemsControl within a ScrollViewer

Question

There are several questions related to ScrollViewer that I've researched, but none of them have worked for me. This almost certainly comes down to my lack of understanding regarding the size of an element. First, my XAML (other than the UserControl definition, this is the entire control):

<DockPanel Width="Auto">
            <ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" CanContentScroll="True" BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1" Background="{DynamicResource LightGradientBackgroundBrush}">
            <ItemsControl Focusable="false" Width="Auto"  MinHeight="30" ItemsSource="{Binding RequiredFields}" OverridesDefaultStyle="False">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <DockPanel />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="3,0,3,3">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="110"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label Content="{Binding Path=Header, Mode=OneTime}" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="0"/>
                            <TextBox Text="{Binding Path=Value}" HorizontalAlignment="Stretch" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="1"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
        </DockPanel>

This control is loaded within a tab as the content. The window that hosts the tab is resizable, and the tab content minimum size is 60. What I'm attempting to do is have the scrollviewer fill the tab, but not push the tab past the bounds of the window. With the above XAML, excess content results in the tab height expanding, and a scrollbar appearing on the Window, not the Tab.

The scrollviewer is expanding to the size of its children, therefore pushing the tab height out. What I want, is the scrollviewer to be fixed to the size of the tab, and have the content within the scrollviewer grow within the bounds of the scrollviewer, so that a scrollbar is presented when there is too much content.

Where am I going wrong?

Edit:

The problem is the Height, not the Width. The width is behaving as it should. I've changed the wrapper to a grid as suggested, but unless I set the Height property, the grid expands to fit the contents of the expanded scrollviewer, causing the same issue as before.

Updated XAML:

<Grid MinHeight="60" VerticalAlignment="Top">
        <Border BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1">
        <ScrollViewer 
            HorizontalScrollBarVisibility="Auto" 
            VerticalScrollBarVisibility="Visible" 
            CanContentScroll="True" 
            BorderBrush="{DynamicResource PanelBorder}" 
            BorderThickness="1,1,1,1" 
            Background="{DynamicResource LightGradientBackgroundBrush}"
            >
            <ItemsControl Focusable="false" Width="Auto"  MinHeight="30" ItemsSource="{Binding RequiredFields}" OverridesDefaultStyle="False">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="3,0,3,3">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="110"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label Content="{Binding Path=Header, Mode=OneTime}" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="0"/>
                            <TextBox Text="{Binding Path=Value}" HorizontalAlignment="Stretch" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="1"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemContainerStyle>
                    <Style>
                        <Setter Property="DockPanel.Dock" Value="Top"/>
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </ScrollViewer>
        </Border>
    </Grid>

None of the answers below have helped to make this work, but I'm fairly confident that the answers would work in the majority of cases.

My control is hosted within a tab page. It is dynamically loaded in, and I have no control over how the tab page is designed. My gut feeling is that the tab control allows as much space as the content within it. Because the grid in my control is saying use up all the space available, and the tab page offers as much space as the child container needs, and the itemscontrol is trying to use as much space as the grid offers; it culminates in the tab page expanding to contain the entire ItemsControl content.

If the tab page was created to not expand to fit its content, the solutions below would work. Unfortunately, I don't believe this to be the case.

One whole day wasted on this. Time to move on.

Answer 1

Ah yes the intricacies of WPF layout is a pain sometimes. What's killing you is the combination of the DockPanel and the Width="Auto" on your ItemsControl. The DockPanel tells its children that they can have as much space as they want for layout. Your ItemsControl then tells its children the same thing. In the end, the Window creates a ScrollViewer to handle the oversized content.

Replace the outer DockPanel with a grid and all should be well.

Answer 2

To have scrollviewer not to strength, you need to use Grid container

<Grid>            
<ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" CanContentScroll="True" BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1" Background="{DynamicResource LightGradientBackgroundBrush}">  
...
</ScrollViewer>        
</Grid>

DockPanel and StackPanel always stretch to fit it's children

Also look at this note (i've copied from here)

Panel X Dimension Y Dimension

Canvas No No

Dock Yes Yes

StackPanel (Vertical) Yes No

StackPanel (Horizontal) No Yes

Grid Yes* Yes*

WrapPanel No No

• Except when using "Auto" rows and columns

Yes in the above table means "Children are stretched to available size"

No in the above table means "Children are their desired size"