A ListBox inside a stackpanel doesn't work

Question

I have these controls:

<StackPanel>
    <TextBlock Text="Bill Benson"/>
    <Image Source="/Assets/Images/BB.png"/>
    <ListBox>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text=""/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <TextBlock Text="ends: 2015"/>
</StackPanel>

ListBox may have any number of items inside it. I want the whole page scroll from top to bottom, but it doesn't scroll down-up. How can I do that? I know the problem is because a scrollable control inside another scrollable one, but don't know how to fix it.

Answer 1

You need to assign the height to the listbox control, as it is taking an auto which means that the height keeps on increasing according to the count of items in it, so its impossible to access the items in the bottom of the control, So either give it a height or instead of stackpanel keep it in a grid with row definitions.

<StackPanel>
    <TextBlock Text="Bill Benson"/>
    <Image Source="/Assets/Images/BB.png"/>
    <ListBox Height="200">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text=""/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <TextBlock Text="ends: 2015"/>
</StackPanel>

Answer 2

Try specifying a height for your controls, especially StackPanel and ListBox, even just an "Auto" Height could work for testing. Also, rather than setting an ItemTemplate, which would be more useful if you had a List of items to bind the ListBox to, try some hardcoded values:

<ListBox>
    <TextBlock Text="1"/>
    <TextBlock Text="Test"/>
    <TextBlock Text="Another"/>
    <TextBlock Text="testing"/>
    <TextBlock Text="Sample"/>
</ListBox>

Try to add more than the ListBox can show, and see if it scrolls.

Answer 3

Try a dock panel instead:

<DockPanel>
    <StackPanel DockPanel.Dock="Top">
        <TextBlock Text="Bill Benson"/>
        <Image Source="/Assets/Images/BB.png"/>
    </StackPanel>
    <TextBlock DockPanel.Dock="Bottom" Text="ends: 2015"/>
    <ListBox>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text=""/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>    
</DockPanel>

The ListBox will automatically expand to fill the space. Note: It has to be the last child in the DockPanel. (You can change this functionality using LastChildFill="False")