title: ItemsControl Grid.Row Grid.Column Binding in Silverlight
body: <p>I'm trying to fill a Grid using different X and Y values for Grid.Row and Grid.Column using an ItemsControl, I copied it from a WPF project of mine and can't get it to work in Silverlight (Windows Phone).</p>
  
  <p>Here is a simplified version of it:</p>
  
  <p>ViewModel which the DataContext is set to:</p>
  
  <pre><code>public class ViewModel
  {
      public ObservableCollection&lt;GridItem&gt; Data { get; set; }
  
      public ViewModel()
      {
          Data = new ObservableCollection&lt;GridItem&gt;();
          FillData();
      }
  
      // fill Data property with some random color GridItems
      private void FillData()
      {
          string[] colors = { "Red", "Green", "Yellow", "Blue" };
          Random r = new Random();
  
          for (int i = 0; i &lt; 10; i++)
          {
              Data.Add(new GridItem(i, i, colors[r.Next(colors.Length)]));
          }
      }
  }
  
  public class GridItem
  {
      public int X { get; set; }
      public int Y { get; set; }
      public string Color { get; set; }
  
      public GridItem(int x, int y, string color)
      {
          X = x;
          Y = y;
          Color = color;
      }
  }
  </code></pre>
  
  <p>The XAML:</p>
  
  <pre><code>&lt;Grid x:Name="LayoutRoot" Background="Transparent"&gt;
  
      &lt;ItemsControl ItemsSource="{Binding Data}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"&gt;
          &lt;ItemsControl.ItemsPanel&gt;
              &lt;ItemsPanelTemplate&gt;                    
              &lt;Grid Background="Orange"&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition /&gt;
                      &lt;ColumnDefinition /&gt;
                      &lt;ColumnDefinition /&gt;
                      &lt;ColumnDefinition /&gt;
                      &lt;ColumnDefinition /&gt;
                      &lt;ColumnDefinition /&gt;
                      &lt;ColumnDefinition /&gt;
                      &lt;ColumnDefinition /&gt;
                      &lt;ColumnDefinition /&gt;
                      &lt;ColumnDefinition /&gt;
                      &lt;ColumnDefinition /&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition /&gt;
                      &lt;RowDefinition /&gt;
                  &lt;/Grid.RowDefinitions&gt;
              &lt;/Grid&gt;
          &lt;/ItemsPanelTemplate&gt;
          &lt;/ItemsControl.ItemsPanel&gt;
          &lt;ItemsControl.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;Ellipse 
                      Grid.Row="{Binding Y}" 
                      Grid.Column="{Binding X}"
                      Fill="{Binding Color}"
                      Stroke="White" /&gt;
              &lt;/DataTemplate&gt;
          &lt;/ItemsControl.ItemTemplate&gt;
      &lt;/ItemsControl&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>This is the result (it placed all ellipses on top of eachother):</p>
  
  <p><img src="https://i.stack.imgur.com/ozBNm.png" alt="Result"></p>
  
  <p>While it should have done this:</p>
  
  <p><img src="https://i.stack.imgur.com/z40a5.png" alt="intention"></p>
  
  <p>Does anyone know why this doesn't work?</p>