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

Question

在为 Windows Phone 8 编写应用程序时，我遇到了一个问题。在 ViewModel 我有

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

每个 Ball 都有其行号和列号。

在 View 中，我指定Grid.Row了要放入网格（10 行 x 10 列）的位置，然后我想将 ListOfBalls 中的一个球放入每个网格单元格中。

所以，那就是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>

我尝试定义网格（10 行 x 10 列），然后在此网格的范围内我尝试添加ItemsControlwith DataTemplate，但我不确定它是否正确，因为在执行期间我遇到了一些未处理的异常......我该如何修复这个？

Answer 1

从您的代码中编辑，添加图像

  <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 是球图像的属性，请添加定位文件的来源。（例如：“图像/myimage.png”）