如何将可观察集合中的项目放入网格中？

Question

While I was writing an application for Windows Phone 8, I encountered a problem. In ViewModel I have

public ObservableCollection<Ball> ListOfBalls { get; set;}

Every Ball has their row number and column number.

In View I have specified Grid.Row into which I want to put a grid (10 rows x 10 columns) and then I want to put one ball from ListOfBalls in every grid cell.

So, that is View :

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

    <Grid x:Name="GamePlayGrid"
          Grid.Row="1"
          Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!-- I've tried to add ItemsControl here -->
    </Grid>
</Grid>

I try to define Grid (10 rows x 10 columns) and then in scope of this grid I tried to add ItemsControl with DataTemplate , but I'm not sure if it's right, because during execution I got some unhandled exception... How can I fix this?

Answer 1

Edited, from your code, Added Image

  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <ItemsControl ItemsSource="{Binding ListOfBalls}"/>
       <ItemsControl.ItemTemplate>
          <DataTemplate>
            <StackPanel>
             <Image Height="30" Width="30" Source="{Binding Path=BallImageName}"/>
             <TextBlock Text="{Binding BallName}"/>
            <StackPanel>
          </DataTemplate>
       </ItemsControl.ItemTemplate>
    </ItemsControl> 
  </Grid>

BallImageName is a property of ball image, Please add the source of the located file. (eg:"Images/myimage.png")