How to add multiple controls to PivotItem without messing up vertical scrolling?

Question

I have a Pivot control in my Windows Phone Mango application and one the pivot items has a listbox. It works perfectly when I have only a ListBox as content of the PivotItem.

           <controls:PivotItem Header="Item1">
                <ListBox
                    x:Name="longListBox" 
                    ItemsSource="{Binding AllItems}" 
                    Margin="12, 0, 12, 0" Width="440" 
                    ItemTemplate="{StaticResource ItemTemplate}" />
            </controls:PivotItem>

Now I would like to add more controls above the list in the PivotItem, say an Image.

           <controls:PivotItem Header="Item1">
                <StackPanel>
                    <Image 
                         Source="/Images/header.png"
                         Height="48"
                         Width="48"/>

                    <ListBox
                        x:Name="longListBox" 
                        ItemsSource="{Binding AllItems}" 
                        Margin="12, 0, 12, 0" Width="440" 
                        ItemTemplate="{StaticResource ItemTemplate}" />

                </StackPanel>
            </controls:PivotItem>

However, with these changes PivotItem vertical scrolling works very strangely, moving listbox items downwards instead of upwards. Essentially, items on the bottom of the ListBox are not accessible.

I've tried setting StackPanel height to some huge number, tried adding ScrollViewer, but can't get it to work.

How can I fix the scrolling problem?

Justin XL Justin XL · Accepted Answer · 2011-12-04T02:06:25

StackPanel gives its children whatever height/width they ask for, and that makes the inner ListBox miscalculates its actual height and then its ScrollViewer won't work properly.

Try changing the StackPanel to a Grid with two rows and it should work.

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>

How to add multiple controls to PivotItem without messing up vertical scrolling?

1 Answers