Agencement dynamique de WPF avec ItemsControl et Grid

je crée un formulaire WPF. L'une des exigences est de disposer d'une présentation par secteur afin qu'un contrôle puisse être placé explicitement dans l'un des secteurs/cellules.

j'ai créé un exemple de Tic-tac-toe ci-dessous pour transmettre mon problème:

il y a deux types et un type de base:

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

le DataContext du formulaire est défini à une instance 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;
    }
}

Et enfin, le code XAML ressemble à ceci:

 <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 />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

Ce qui n'était pas pour moi, lorsque j'ai commencé, il était évident que L'élément ItemsControl enveloppait chaque élément dans un conteneur, donc ma grille.Ligne et de la Grille.Les reliures de colonnes sont ignorées car les images ne sont pas directement contenues dans la grille. Ainsi, toutes les images sont placées dans la ligne et la colonne par défaut (0, 0).

Ce qui se passe:

Ce qui se passe http://i48.tinypic.com/29xyl9j.png

Le résultat souhaité:

Le résultat souhaité http://i50.tinypic.com/2druhqd.png

alors, ma question Est la suivante: Comment puis-je obtenir le placement dynamique de mes commandes dans une grille? Je préférerais une solution XAML/Data Binding / MVVM-friendly.

Merci.

j'ai mis le code final ici: http://www.centrolutions.com/downloads/TicTacToe.zip