WPF动态布局与ItemsControl和Grid

33 浏览
0 Comments

WPF动态布局与ItemsControl和Grid

我正在创建一个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()
        {
            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 Moves
    {
        get;
        set;
    }
}

最后，XAML如下所示：

当我开始时，对我来说不太明显的是ItemsControl元素实际上将每个项包装在一个容器中，因此我的Grid.Row和Grid.Column绑定被忽略，因为图像不直接包含在网格中。因此，所有图像都被放置在默认的行和列（0, 0）中。

正在发生的事情：

[What is happening](https://i.stack.imgur.com/yMvkv.png)

期望的结果：

[The desired result](https://i.stack.imgur.com/MeHee.png)

所以，我的问题是：我如何在网格中实现动态放置我的控件？我更喜欢一个XAML/Data Binding/MVVM友好的解决方案。

谢谢。

我将最终代码放在这里：[TicTacToe.zip](http://www.centrolutions.com/downloads/TicTacToe.zip)

0

1 答案

0 Comments

WPF动态布局的问题是如何在ItemsControl和Grid中实现。问题的原因是在ItemsControl中动态布局时，需要为每个生成的容器指定一个Grid.Row和Grid.Column。解决方法是创建一个Style并将其应用到ItemsControl.ItemContainerStyle中，然后在样式中为Grid.Row和Grid.Column指定setter。这样，ItemContainerStyle会应用到为每个项生成的容器中。

对于Silverlight中的相同问题，解决方法是使用其他方法来实现动态布局，因为Silverlight中没有ItemContainerStyle可用。

0