locked
ListBox Not Allowing Scrolling to All Items RRS feed

  • Question

  • My listbox is showing some strange behavior. When I scroll to the bottom I can see that there are some items clipped off and when I stop scrolling they snap back off screen. However, if I go up and down a few times it kinda flickers and then I am able to get to the bottom

    So why is this happening and what can I do about it? The listbox is virtualized and below is the related XAML:

     <controls:PivotItem Header="{Binding ListTitle}">
                    <Grid >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Style="{StaticResource PhoneTextSubtleStyle}" FontSize="24" Margin="0,-15,0,0" Foreground="#4202F5">Stuff Here</TextBlock>
                        <ListBox Height="Auto"  Grid.Row="1" ItemsSource="{Binding WordList}" x:Name="wordList" ScrollViewer.VerticalScrollBarVisibility="Auto">
                                    <ListBox.ItemContainerStyle>
                                        <Style TargetType="ListBoxItem">
                                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                        </Style>
                                    </ListBox.ItemContainerStyle>
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                    <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}">
                                        <TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}" Text="{Binding WordText}" TextWrapping="Wrap" Foreground="#820FBC"/>
                                            </CheckBox>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                    </Grid>
                </controls:PivotItem>

    Friday, February 1, 2013 2:04 AM

All replies

  • Hi Zero,

    Try applying the ScrollViewer control as a tag over the Grid.

    Hope this helps :-)

    <controls:PivotItem Header="{Binding ListTitle}">

    <ScrollViewer> <Grid > <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Style="{StaticResource PhoneTextSubtleStyle}" FontSize="24" Margin="0,-15,0,0" Foreground="#4202F5">Stuff Here</TextBlock> <ListBox Height="Auto" Grid.Row="1" ItemsSource="{Binding WordList}" x:Name="wordList" > <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> </Style> </ListBox.ItemContainerStyle> <ListBox.ItemTemplate> <DataTemplate> <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}"> <TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}" Text="{Binding WordText}" TextWrapping="Wrap" Foreground="#820FBC"/> </CheckBox> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid>

    </ScrollViewer>

    </controls:PivotItem>



    Friday, February 1, 2013 9:50 AM
  • This seems to work, but it breaks the virtualized loading of the list. My page loads and is blank for a while and then everything loads and appears on the screen. I feel like maybe it is somehow related to virtualization in that the ListBox is confused about the height or something and needs to "Re-layout" somehow? This would explain why switching orientation a few times or scrolling up and down seems to make it work.
    • Edited by Zero_gt Saturday, February 2, 2013 12:03 AM Spelling
    Friday, February 1, 2013 11:46 PM
  • I don't see anything wrong with the xaml in the first post. Show your surrounding xaml, because the parent containers can affect the layout.
    Richard Woo
    Saturday, February 2, 2013 3:32 AM
  • I don't see anything wrong with the xaml in the first post. Show your surrounding xaml, because the parent containers can affect the layout.
    Richard Woo
    Below includes the parent info. I have tried a good number of variations. I suspect I must be doing something wrong or others would be seeing this:
    <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            
                <!--Panorama control-->
            <controls:Pivot>
                <controls:Pivot.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Foreground="#FFFF2950" Text="{Binding}" />
                    </DataTemplate>
                </controls:Pivot.HeaderTemplate>
                <controls:Pivot.Background>
                    <ImageBrush ImageSource="Images\PanoramaBackground.png"/>
                </controls:Pivot.Background>
     
                <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
                <controls:PivotItem Header="{Binding ListTitle}">
                    <Grid >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Style="{StaticResource PhoneTextSubtleStyle}" FontSize="24" Margin="0,-15,0,0" Foreground="#4202F5">Stuff Here</TextBlock>
                        <ListBox Height="Auto"  Grid.Row="1" ItemsSource="{Binding WordList}" x:Name="wordList" ScrollViewer.VerticalScrollBarVisibility="Auto">
                                    <ListBox.ItemContainerStyle>
                                        <Style TargetType="ListBoxItem">
                                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                        </Style>
                                    </ListBox.ItemContainerStyle>
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                    <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}">
                                        <TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}" Text="{Binding WordText}" TextWrapping="Wrap" Foreground="#820FBC"/>
                                            </CheckBox>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                    </Grid>
                </controls:PivotItem>
            </controls:Pivot>
        </Grid>


    Saturday, February 2, 2013 6:34 PM