Windows 8 - XAML - Putting Grid Inside ListView

Question

Inside my XAML/C# app for Windows 8 Store, I am trying to create a ListView where each ListItem is a horizontal Grid, so I am using the XAML below:

  <ListView Name="ResultsView">
    <ListView.ItemTemplate>
      <DataTemplate>
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="4*" />
            <ColumnDefinition Width="4*" />
          </Grid.ColumnDefinitions>
          <TextBlock Text="{Binding BestRank}" Grid.Column="0"/>
          <TextBlock Text="{Binding PlayerName}" Grid.Column="1"/>
          <TextBlock Text="{Binding BestScore}" Grid.Column="2"/>
        </Grid>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

When I run this program, the listview contains all the items from the list it is bound to (through code behind). However in every list-item, contents of all three columns appear together without any space between them. When I create a similar grid outside the listview, it displays fine and takes up entire width of the screen and divides it between the three columns as specified in the XAML above.

What am I doing wrong?

Answer 1

I believe the issue is the ItemContainerStyle needs to have a HorizontalContentAlignment of Stretch. Try this adding this to the ListView:

<ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>