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

本文关键字：网格 集合 观察 | 更新日期: 2023-09-27 18:36:10

当我为Windows Phone 8编写应用程序时，我遇到了一个问题。在视图中我有模型

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

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

在视图中，我指定了要放置网格（10 行 x 10 列）的Grid.Row，然后我想在每个网格单元格中放置一个来自 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>

我尝试定义 Grid（10 行 x 10 列），然后在此网格范围内，我尝试使用 DataTemplate 添加ItemsControl，但我不确定它是否正确，因为在执行过程中我得到了一些未经处理的异常......我该如何解决这个问题？

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

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

  <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>
球图像

名称是球图像的属性，请添加定位文件的来源。（例如："图像/我的图像.png"）

相关文章：