ListBox scrolling with variable height

Question

I have a problem with ListBox scrolling. Everytime I have more items than can be shown on screen and I try to scroll through the list it automatically snaps back to the top. I found this can be fixed by setting a fixed height to the ListBox. However, I need to add items to the list dynamically and hence the height changes.

The Listbox is in the second row of a grid nested in a PivotItem.

How can I either set the height of the Listbox dynamically with XAML or achieve a scrolling effect that does not always snap to the top and hence prevents me from reading/editing items on the bottom?

Here is the XAML:

<Grid x:Name="LayoutRoot">
 ...
    <controls:Pivot Title="Malts">
        <controls:PivotItem Header="Gravity" Name="GravityPivot">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>


                <Grid> some more controls in row 0</Grid>
                <Grid
                    Grid.Row="1">  
                    <ListBox
                 VerticalAlignment="Stretch"         
                 ItemsSource="{Binding ItemList}" 
                    Padding="10,10,0,10"
                    ItemContainerStyle="{StaticResource ListBoxItemStyle}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel>
                                    <TextBlock 
                                    Style="{StaticResource PhoneTextExtraLargeStyle}" 
                                    Text="{Binding Name}" 
                                    VerticalAlignment="Bottom"/>

                                    <StackPanel>
                                        <StackPanel 
                                        Orientation="Horizontal" >

                                            <TextBlock
                                                Text="{Binding Amount, Converter={StaticResource WeightConverter},StringFormat=' {0:f2}'}" 
                                                Margin="10,0,5,0"
                                                Style="{StaticResource PhoneTextNormalStyle}"/>
                                            <TextBlock
                                                Text="{Binding ., Converter={StaticResource UnitExtension}, ConverterParameter='Weight'}"
                                                Style="{StaticResource PhoneTextNormalStyle}"/>
                                        </StackPanel>
                                    </StackPanel>

                                    <toolkit:ContextMenuService.ContextMenu>
                                        <toolkit:ContextMenu>
                                            <toolkit:MenuItem                                                 
                                            Header="Edit"
                                            Command="{Binding ElementName=MaltList, Path=DataContext.EditCommand}"
                                            CommandParameter="{Binding}"/>
                                            <toolkit:MenuItem 
                                            Header="Remove"
                                            Command="{Binding ElementName=MaltList, Path=DataContext.RemoveCommand}"
                                            CommandParameter="{Binding}"/>
                                        </toolkit:ContextMenu>
                                    </toolkit:ContextMenuService.ContextMenu>
                                </StackPanel>

                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </Grid>
        </controls:PivotItem>

Thank you!

Can you post the rest of the LayoutRoot properties, including any Grid.RowDefinitions? I suspect it is something like <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> If this is the case, if you get rid of the row definitions, the ListBox should behave appropriately. — codechinchilla
The layout root is pretty uninteresting. Juts contains a style to force the the listbox items to takte the whole width and some background image. <Grid.Resources> <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="HorizontalAlignment" Value="Stretch"/> </Style> </Grid.Resources>  <Rectangle Fill="{StaticResource PhoneForegroundBrush}" ... </Rectangle> — Tom

Chris W. Chris W. · Accepted Answer · 2012-12-26T20:32:01

Try this, should fix you up;

<ListBox>

            <!-- You want this part... -->
            <ListBox.Template>
                <ControlTemplate>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                                  VerticalScrollBarVisibility="Auto">
                        <ItemsPresenter/>           
                    </ScrollViewer>         
                </ControlTemplate>      
            </ListBox.Template>

</ListBox>

ListBox scrolling with variable height

1 Answers