관찰 가능한 컬렉션의 항목을 그리드에 넣는 방법은 무엇입니까?

Question

Windows Phone 8 용 응용 프로그램을 작성하는 동안 문제가 발생했습니다. 내가 가지고있는 ViewModel에서

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

모든 공에는 행 번호와 열 번호가 있습니다.

보기에서 격자 (10 행 x 10 열)를 넣으려는 Grid.Row을 지정한 다음 모든 격자 셀의 ListOfBalls에서 하나의 공을 넣고 싶습니다.

<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 행 × 10 열) 다음이 격자의 범위에 내가 DataTemplate와 ItemsControl을 추가하려고를 정의하려고 노력하지만 잘 모르겠어요 :

그래서, 그 View입니다 실행 중 예외가 발생했기 때문에 ... 어떻게 해결할 수 있습니까? 코드에서

Answer 1

편집,, BallImageName가 볼 이미지의 속성입니다

<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> 

추가 된 이미지의 위치 파일의 소스를 추가하십시오. (예 : "Images/myimage.png")