Estoy creando un formulario WPF. Uno de los requisitos es que tenga un diseño basado en sectores para que un control pueda colocarse explícitamente en uno de los sectores / celdas.

He creado un ejemplo de tic-tac-toe a continuación para transmitir mi problema:

Hay dos tipos y un tipo base:

public class XMoveViewModel : MoveViewModel
{
}
public class OMoveViewModel : MoveViewModel
{
}
public class MoveViewModel
{
    public int Row { get; set; }
    public int Column { get; set; }
}

El DataContext del formulario se establece en una instancia de:

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        Moves = new ObservableCollection<MoveViewModel>()
        {
            new XMoveViewModel() { Row = 0, Column = 0 },
            new OMoveViewModel() { Row = 1, Column = 0 },
            new XMoveViewModel() { Row = 1, Column = 1 },
            new OMoveViewModel() { Row = 0, Column = 2 },
            new XMoveViewModel() { Row = 2, Column = 2}
        };
    }
    public ObservableCollection<MoveViewModel> Moves
    {
        get;
        set;
    }
}

Y finalmente, el XAML se ve así:

 <Window.Resources>
    <DataTemplate DataType="{x:Type vm:XMoveViewModel}">
        <Image Source="XMove.png" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Column}" Stretch="None" />
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:OMoveViewModel}">
        <Image Source="OMove.png" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Column}" Stretch="None" />
    </DataTemplate>
</Window.Resources>
<Grid>
    <ItemsControl ItemsSource="{Binding Path=Moves}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid ShowGridLines="True">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnD,efinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

Lo que no era tan obvio para mí cuando comencé fue que el elemento ItemsControl en realidad envuelve cada elemento en un contenedor, por lo que mis enlaces Grid.Row y Grid.Column se ignoran ya que las imágenes no están directamente contenidas dentro de la cuadrícula. Por lo tanto, todas las imágenes se colocan en la fila y columna predeterminadas (0, 0).

Qué está pasando:

Lo que está sucediendo http://i48.tinypic.com/29xyl9j.png

El resultado deseado:

El resultado deseado http://i50.tinypic.com/2druhqd.png

Entonces, mi pregunta es esta: ¿cómo puedo lograr la ubicación dinámica de mis controles en una cuadrícula? Preferiría una solución amigable con XAML / Data Binding / MVVM.

Gracias.

He puesto el código final aquí:http://www.centrolutions.com/downloads/TicTacToe.zip