带有ItemsControl和Grid的WPF动态布局

我正在创建一个WPF表单。其中一个要求是，它具有基于扇区的布局，以便控件可以显式放置在其中一个扇区/单元中

我在下面创建了一个tic-tac-toe示例来表达我的问题：

有两种类型和一种基本类型：

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

public类MainViewModel:ViewModelBase
{
公共主视图模型（）
{
移动=新的ObservableCollection（）
{
新的xmoviewmodel（）{Row=0，Column=0}，
新的OMoveViewModel（）{Row=1，Column=0}，
新的xmoviewmodel（）{Row=1，Column=1}，
新的OMoveViewModel（）{Row=0，Column=2}，
新的xmoviewmodel（）{Row=2，Column=2}
};
}
公开募捐行动
{
得到；
设置
}
}

最后，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/数据绑定/MVVM友好的解决方案

谢谢

我把最后的代码放在这里：

---

你走在正确的轨道上。您只需创建一个

样式

，并将其应用于

ItemsControl.itemsContainerStyle

。然后，在样式中，为

Grid.Row

和

Grid.Column

指定一个setter。

ItemContainerStyle

将应用于为每个项目生成的容器。

Aha！我知道我错过了什么。谢谢你的帮助。这很有效。我正试图在Silverlight中做完全相同的事情，有人知道这样做的方法吗？（ItemContainerStyle在Silverlight中不可用…）嘿，Jason，有机会获得你的tic-tac-toe的完整代码吗？我想看看。谢谢不幸的是，这个项目只是一个例子，并不是一个功能齐全的游戏。这是一个大型（非tic-tac-toe）项目的原型。如果您仍然感兴趣，我已经在原始问题下面添加了最终代码的链接。这是一个很好的问题，也是一个很好的答案——非常感谢您发布最终代码的链接！它真的帮了我很多。源代码是MVVM的一个很好的例子。真的很快为我指明了正确的方向！非常感谢，您指出了ItemsControl.ItemContainerStyle，它允许配置行和列，也解决了我的问题！我创建了一个带有10x10圆圈的UserControl，以指示cafe应用程序的表布局。