Silverlight: Difficulty with ScrollViewer

Question

I'm making a wp7 Silverlight app. I have a ScrollViewer that contains a ListBox of ten elements. However, it only lets me scroll down a tiny bit. What could I be doing wrong?

<ScrollViewer>
        <ListBox x:Name="StoryListBox"/>
    </ScrollViewer>

The ListBox is filled with items of the following type:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Image x:Name="Thumbnail" Grid.Column="0" Width="89" HorizontalAlignment="Left" VerticalAlignment="Top" />
    <TextBlock x:Name="Headline" Grid.Column="1" Grid.Row="0" Style="{StaticResource PhoneTextAccentStyle}" TextWrapping="Wrap" HorizontalAlignment="Left" Width="299" FontSize="23.333" VerticalAlignment="Top" />
    <TextBlock x:Name="Teaser" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Left" Style="{StaticResource PhoneTextSubtleStyle}"  TextWrapping="Wrap" VerticalAlignment="Top" Width="384"/>
</Grid>

What could I be doing wrong here?

Answer 1

I do not see the reason why you would need the ListBox to be embedded within the ScrollViewer. If your ListBox has more items than it display in the viewable area, the ListBox items should scroll by themselves. If you edit the ListBox's style using Expression Blend, the style will look like this -

<Style x:Key="ListBoxListStyle" TargetType="ListBox">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Template">
      <Setter.Value>     
        <ControlTemplate TargetType="ListBox">
          <ScrollViewer 
            x:Name="ScrollViewer" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}" 
            Background="{TemplateBinding Background}" 
            Foreground="{TemplateBinding Foreground}" 
            Padding="{TemplateBinding Padding}" >
            <ItemsPresenter/>
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
 </Style>

You can see the ScrollViewer embedded in the ControlTemplate of the ListBox, it takes care of the scrolling of ListBoxItems.

HTH, indyfromoz