Silverlight: Difficulty with ScrollViewer - silverlight

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.

Answer 2

It(Scrolling) is working perfectly after I set the Height of the list box.

Answer 3

The ScrollViewer could ONLY work when it is smaller than which it contains (either width or height). If you do not indict the width or height of the ScrollViewer, it will be stretched to fit its content, and as a result the effect would not be perfect.
So what you need to do is to set a fixed size for your ScrollViewer.
By the way, as indyfromoz said, a ListBox already has a ScrollViewer, so you could remove your outer ScrollViewer, and just set the ListBox's size.