ItemsControl Grid.Row Grid.Column Binding in Silverlight

ItemsControl Grid.Row Grid.Column Binding in Silverlight

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

Here is a simplified version of it:

ViewModel which the DataContext is set to:

public class ViewModel {     public ObservableCollection<GridItem> Data { get; set; }      public ViewModel()     {         Data = new ObservableCollection<GridItem>();         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 < 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;     } } 

The XAML:

<Grid x:Name="LayoutRoot" Background="Transparent">      <ItemsControl ItemsSource="{Binding Data}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">         <ItemsControl.ItemsPanel>             <ItemsPanelTemplate>                                 <Grid Background="Orange">                 <Grid.ColumnDefinitions>                     <ColumnDefinition />                     <ColumnDefinition />                     <ColumnDefinition />                     <ColumnDefinition />                     <ColumnDefinition />                     <ColumnDefinition />                     <ColumnDefinition />                     <ColumnDefinition />                     <ColumnDefinition />                     <ColumnDefinition />                     <ColumnDefinition />                 </Grid.ColumnDefinitions>                 <Grid.RowDefinitions>                     <RowDefinition />                     <RowDefinition />                     <RowDefinition />                     <RowDefinition />                     <RowDefinition />                     <RowDefinition />                     <RowDefinition />                     <RowDefinition />                     <RowDefinition />                     <RowDefinition />                     <RowDefinition />                 </Grid.RowDefinitions>             </Grid>         </ItemsPanelTemplate>         </ItemsControl.ItemsPanel>         <ItemsControl.ItemTemplate>             <DataTemplate>                 <Ellipse                      Grid.Row="{Binding Y}"                      Grid.Column="{Binding X}"                     Fill="{Binding Color}"                     Stroke="White" />             </DataTemplate>         </ItemsControl.ItemTemplate>     </ItemsControl> </Grid> 

This is the result (it placed all ellipses on top of eachother):

While it should have done this:

Does anyone know why this doesn't work?

Answers & Comments...

Answer: 1

Try setting the binding for the Grid.Row and Grid.Column within the ContentPresenter rather than as part of the DataTemplate that defines the Ellipse:

    <ItemsControl.Resources>         <Style TargetType="ContentPresenter">             <Setter Property="Grid.Row" Value="{Binding Y}"/>             <Setter Property="Grid.Column" Value="{Binding X}"/>         </Style>     </ItemsControl.Resources>     <ItemsControl.ItemTemplate>          <DataTemplate>              <Ellipse                   Fill="{Binding Color}"                  Stroke="White" />          </DataTemplate>      </ItemsControl.ItemTemplate>  

by : lori.lalondehttp://stackoverflow.com/users/1410533

---