ItemsControl items do not render in ScrollViewer in Windows Phone app

Question

I am trying to create a scrolling page within a Windows Phone app. This page has some static content followed by an ItemsControl of items.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            
  <ScrollViewer>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
      </Grid.RowDefinitions>

      <TextBlock Text="Static text line 1" />
      <TextBlock Grid.Row="1" Text="Another lineof static text" />

      <ItemsControl Grid.Row="2" ItemsSource="{Binding Path=MyItems}" ItemTemplate="{StaticResource myTemplate}"></ItemsControl>
    </Grid>
  </ScrollViewer>
</Grid>

Oddly, when I use this approach, the ItemsControl items do not render. However, if I move the ScrollViewer below the static text items, and place the ItemsControl within the ScrollViewer, my items render just fine.

What am I doing wrong? I feel like there has to be something small and insignificant that I'm overlooking. Thank you.

The first TextBlock and the ItemsControl are going to both be in the same grid row, which means one will overwrite the other, however I would think it was the TextBlock you wouldn't be able to see. — Kevin DiTraglia
I missed the Grid.Row definition. Its there now.I agree with your assessment though. Still, my Items are not showing. — JQuery Mobile

ArchieCoder ArchieCoder · Accepted Answer · 2013-02-02T06:05:18

Replace the line <RowDefinition /> by <RowDefinition Height="*" />. The * means it will take all the available space.

ItemsControl items do not render in ScrollViewer in Windows Phone app

1 Answers