locked
Can't get my ListBox to scroll RRS feed

  • Question

  • I'm creating a page where the user can enter some text to filter the list of results. That part is all working fine but the list results won't scroll properly. By that, I mean that if I try to drag the list upwards to see results near the end of the list, it starts to move but then "squishes" like WP does when you've reached the end, except that when I stop dragging, the list snaps back down and you lose visibility of the end of the list.

    I've tried different nestings of parts to try to get it to work but I cannot hit on the right combo. This is what I've got at the moment:

     

     

     

     

            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
                <StackPanel> 
                    <TextBox Height="72" HorizontalAlignment="Left" Margin="0" Name="filter" Text="search" VerticalAlignment="Top" Width="458" LostFocus="filter_LostFocus" GotFocus="filter_GotFocus" Foreground="Gray" TextChanged="filter_TextChanged" /> 
                    <ScrollViewer> 
                        <StackPanel> 
                            <ListBox HorizontalAlignment="Left" Margin="0,12,0,0" Name="people" VerticalAlignment="Top">  
                                <ListBox.ItemTemplate> 
                                    <DataTemplate> 
                                        <TextBlock Text="{Binding BuiltName}" Style="{StaticResource PhoneTextLargeStyle}"/>  
                                    </DataTemplate> 
                                </ListBox.ItemTemplate> 
                            </ListBox> 
                        </StackPanel> 
                    </ScrollViewer> 
                </StackPanel> 
            </Grid> 

     


    I don't want the filter textbox to scroll off the top, so I need the listbox results to scroll within a defined space. Can someone please tell me what stacking of items I need?

    Thanks.

    Philip

    Wednesday, February 15, 2012 5:54 PM

Answers

  • The key to scrolling is the Height value of the ScrollViewer or ListBox (with its built-in ScrollViewer). The Height should be set to the desired viewport size on the screen. You can set Height to an explicit number, but you can have Silverlight set it to the available height on the screen. Do this by putting the ScrollViewer or ListBox in a Grid row that has Height="*".

            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
                <Grid.RowDefinitions>  
                    <RowDefinition Height="Auto"/>  
                    <RowDefinition Height="*"/>  
                </Grid.RowDefinitions>  
                <TextBox Grid.Row="0" Height="72" HorizontalAlignment="Left" Margin="0" Name="filter" Text="search" VerticalAlignment="Top" Width="458" LostFocus="filter_LostFocus" GotFocus="filter_GotFocus" Foreground="Gray" TextChanged="filter_TextChanged" />  
                <ListBox Grid.Row="1" HorizontalAlignment="Left" Margin="0,12,0,0" Name="people" VerticalAlignment="Top">  
                    <ListBox.ItemTemplate>  
                        <DataTemplate>  
                            <TextBlock Text="{Binding BuiltName}" Style="{StaticResource PhoneTextLargeStyle}"/>  
                        </DataTemplate>  
                    </ListBox.ItemTemplate>  
                </ListBox>  
            </Grid> 

    Row 0 of the grid has Height="Auto" which means its height will expand to the total height of its contents. Row 1 of the grid has Height="*" which means it will be set to the remaining available height on the screen.

    More information about Grid row height: RowDefinition.Height Property


    Richard Woo
    Wednesday, February 15, 2012 7:36 PM

All replies

  • The key to scrolling is the Height value of the ScrollViewer or ListBox (with its built-in ScrollViewer). The Height should be set to the desired viewport size on the screen. You can set Height to an explicit number, but you can have Silverlight set it to the available height on the screen. Do this by putting the ScrollViewer or ListBox in a Grid row that has Height="*".

            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
                <Grid.RowDefinitions>  
                    <RowDefinition Height="Auto"/>  
                    <RowDefinition Height="*"/>  
                </Grid.RowDefinitions>  
                <TextBox Grid.Row="0" Height="72" HorizontalAlignment="Left" Margin="0" Name="filter" Text="search" VerticalAlignment="Top" Width="458" LostFocus="filter_LostFocus" GotFocus="filter_GotFocus" Foreground="Gray" TextChanged="filter_TextChanged" />  
                <ListBox Grid.Row="1" HorizontalAlignment="Left" Margin="0,12,0,0" Name="people" VerticalAlignment="Top">  
                    <ListBox.ItemTemplate>  
                        <DataTemplate>  
                            <TextBlock Text="{Binding BuiltName}" Style="{StaticResource PhoneTextLargeStyle}"/>  
                        </DataTemplate>  
                    </ListBox.ItemTemplate>  
                </ListBox>  
            </Grid> 

    Row 0 of the grid has Height="Auto" which means its height will expand to the total height of its contents. Row 1 of the grid has Height="*" which means it will be set to the remaining available height on the screen.

    More information about Grid row height: RowDefinition.Height Property


    Richard Woo
    Wednesday, February 15, 2012 7:36 PM
  • Thank you, Richard. Perfect answer!

    Philip
    Thursday, February 16, 2012 9:45 AM