Динамическая компоновка WPF с элементами управления и сеткой

Я создаю форму WPF. Одно из требований заключается в том, что он имеет макет на основе секторов, чтобы элемент управления можно было явно разместить в одном из секторов/ячеек.

Я создал пример крестики-нолики ниже, чтобы передать мою проблему:

Существует два типа и один базовый тип:

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

DataContext формы устанавливается на экземпляр:

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

И, наконец, XAML выглядит следующим образом:

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

Когда я начинал, для меня было не так очевидно, что элемент ItemsControl фактически оборачивает каждый элемент в контейнере, поэтому мои привязки Grid.Row и Grid.Column игнорируются, поскольку изображения не содержатся непосредственно в сетке. таким образом, все изображения помещаются в строку и столбец по умолчанию (0, 0).

Что происходит:

Желаемый результат:

Итак, мой вопрос заключается в следующем: как я могу добиться динамического размещения элементов управления в сетке? я бы предпочел XAML/Data Binding/MVVM-дружественное решение.

Благодаря.

Я поставил окончательный код здесь:http://www.centrolutions.com/downloads/TicTacToe.zip

Ответ 1