动态地创建用于扫雷游戏playboard [英] Dynamicly create a playboard for Minesweeper game

问题描述

与学习C＃，XAML，尤其是MVVM的目的，我开始编程的扫雷游戏。我做了第一个版本是没​​有MVVM部分，在那里我创建并添加使用C＃代码中的按钮，而不是通过MVVM方式XAML做的。现在，我尝试在MVVM模式应用到游戏中。

with the objective to learn C#, XAML and especially MVVM I started to program the Minesweeper game. First version I made was without the MVVM part, where I created and added the buttons with C# code instead of doing it in XAML via the MVVM way. Now I try to apply the MVVM pattern into the game.

我做了一个自己的用户控件，其中包含代表雷区部分的按钮。这种控制也有一个视图模型和模型类存储一些状态数据和处理一些命令。在测试项目中，我创建自己的用户控件的4，尽量把他们在这些按键，按2键形成的2方形网格。在后面的代码，按钮被放置在一个ObservableCollection对象。我认为在这个对象的按钮上市及索引，如：

I made an own User Control which contains a button representing a minefield part. This control also has a ViewModel and a Model Class to store some state data and handle some commands. In a test project I create 4 of those own User Controls and try to put them in a grid where the buttons forms a square of 2 by 2 buttons. In the code behind, the buttons are put in an ObservableCollection object. I assume that in this object the buttons are listed and indexed like:

Button1
Button2
Button3
Button4

但在演示文稿中网格我想显示象

but in the presentation grid I want the buttons to be shown like

Button1 | Button2
--------+--------
Button3 | Button4

现在的问题是：我怎么做动态地？原因在我的测试项目我4个按键测试，但在项目中，我想用这个，按键的数量可以根据玩家选择游戏的难度是不同的。

The question is: how do I do that dynamicly? Cause in my test project I test with 4 buttons, but In the project I want to use this, the amount of buttons can be different depending on the difficulty of the game the player has chosen.

和第二个问题是，我怎么能弄清楚什么是neigbhours一个按钮。因此，如果电网是4 5含20的按钮。而且比如我挑按钮8具有作为邻居的按键数量2，3，4，7，9，12，13和14我怎样才能实现这些邻居按钮中所列的按钮时？

And a second question is how I can figure out what the neigbhours are of a button. So if the grid is 4 by 5 containing 20 buttons. And for example I pick button 8 which has as neighbour buttons number 2, 3, 4, 7, 9, 12, 13 and 14. How can I reach those neighbour buttons when the buttons are listed?

我希望我的问题是不够清楚。

I hope my questions are clear enough.

感谢你在前进！

推荐答案

您可以使用的的ItemsControl 有它的 ItemsPanel 设置为电网或 UniformGrid 。我有一些的ItemsControl 例子的此处，可以帮助你，因为我不觉得MDSN的例子非常有帮助。

You can display your collection using an ItemsControl that has it's ItemsPanel set to a Grid or UniformGrid. I have some ItemsControl examples here that may help you, as I don't find MDSN's examples very helpful.

A UniformGrid 将是最简单，如果你可以绑定你的行和列属性属性在视图模型，但要求所有你的细胞是相同的大小，我不记得，如果属性行和列是参与结合系统或不DependencyProperties。

A UniformGrid would be easiest if you can bind your Rows and Columns properties to a property in your ViewModel, however that requires all your cells be the same size, and I can't remember if the properties Rows and Columns are DependencyProperties that participate in the binding system or not.

<ItemsControl ItemsSource="{Binding MyCollection}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="{Binding ColumnCount}" 
                         Rows="{Binding RowCount}" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

如果这不会为你工作，你可以使用电网为 ItemsPanel 并设置 Grid.Row 和网​​格。在 ItemContainerStyle 列绑定。

If this doesn't work for you, you can use a Grid as the ItemsPanel and set the Grid.Row and Grid.Column bindings in the ItemContainerStyle.

这将要求你在每个单元对象的属性的的ObservableCollection 说什么好行/列细胞是，但我怀疑你会需​​要这些反正确定的东西就像在你点击命令相邻的单元格。

This will require you have properties on each of your cell objects in the ObservableCollection to say what Row/Column that cell is in, however I suspect you'll need these anyways to determine things like adjacent cells in your click command.

此外，还有绑定没有内置的方式行/列在你的电网，所以我倾向于使用一些的自定义的附加属性将动态地构建网格的 RowDefinitions 和 Col​​umnDefinitions 基础上限值

In addition, there's no built-in way to bind the number of Rows/Columns in your Grid, so I tend to use some custom attached properties that will dynamically build the Grid's RowDefinitions and ColumnDefinitions based on a bound value.

所以你的最终结果，如果您使用的是网格可能会是这个样子：

So your end result if you're using a Grid would probably look something like this:

<ItemsControl ItemsSource="{Binding Cells}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- This is assuming you use the attached properties linked above -->
            <Grid local:GridHelpers.RowCount="{Binding Height}"
                  local:GridHelpers.ColumnCount="{Binding Width}" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemContainerStyle -->
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Column" 
                    Value="{Binding ColumnIndex}" />
            <Setter Property="Grid.Row" 
                    Value="{Binding RowIndex}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

与模型/视图模型看起来像这样

With a Model/ViewModel looking something like this

public class GameViewModel
{
    // These should be full properties w/ property change notification
    // but leaving that out for simplicity right now
    public int Height;
    public int Width;
    public ObservableCollection<CellModel> Cells;
}

public class CellModel
{
    // Same thing, full properties w/ property change notification
    public int ColumnIndex;
    public int RowIndex;
    public bool IsVisible;
    public bool IsMine;
    public int NumberAdjacentMines;
}

这篇关于动态地创建用于扫雷游戏playboard的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！