如何在UWP / WPF / XAML中创建检查板UI？ [英] How do I create a checkboard UI in UWP/WPF/XAML?

问题描述

大家好，



去年我创建了一个框架，用于在WinC中以MVC风格开发类似国际象棋/棋盘格的游戏。我现在正试图将此框架移动到UWP / XAML（接近WPF）。我有一些使用XAML的经验，但想知道创建UI的最佳方式是什么。



在我的WinForms项目中，我有一个PictureBoxes的2D数组，其中玩家可以使用内置的拖放功能来移动。



在XAML中没有PictureBoxes所以我需要提出另一种方法。一个想法是使网格具有多个单元格/面板/类似。理想情况下，每个单元应具有背景颜色（即黑色或白色），然后可能是所讨论的部件的图像（例如，王或典当）。然后，images / cells / panels / ...需要可拖动，以便可以在棋盘上移动棋子。请注意，检查板可以具有不同的长度，例如4 * 9的正方形，并且长度在Constants类中设置。换句话说，Grid / similar必须在代码隐藏中设置其行数/列数。



我应该如何做到这一点？我不需要数学，只是使用什么控件以及如何在代码隐藏中动态创建它们并且能够执行拖放操作。



非常感谢！



Petter

Hi all,

Last year I created a framework for developing chess/checker-like games in WinForms, in MVC style. I am now trying to move this framework to UWP/XAML (close to WPF). I have some experience with XAML, but wonder what the best way to create the UI would be.

In my WinForms project I had a 2D array of PictureBoxes, which the player could move around using the built-in drag'n'drop functionality.

In XAML there are no PictureBoxes so I need to come up with another approach. One idea is to have a Grid with a number of cells/panels/similiar. Each "cell" should ideally have a background color (ie black or white) and then possibly an image of the piece in question (eg king or pawn). The images/cells/panels/... then need to be draggable, so that the pieces can be moved over the checkboard. Note that the checkboard can have different lenghts, such as 4*9 squares, and that the lengths are set in a Constants class. In other words, the Grid/similar must have its number of rows/columns set in codebehind.

Any ideas of how I should do this? I don't need the math, just what controls to use and perhaps how to create them dynamically in codebehind and to be able to perform drag'n'drop.

Many thanks!

Petter

推荐答案

我可以在WPF上详细回答。我希望你也可以将这些想法用于通用应用程序。



对于游戏场控制，使用画布 。此控件允许将UI元素定位在任意位置，因此它们可以重叠。您可以简单地将类型 Rectangle 的8x8元素设置为描绘一块板。



但我建议稍好一些替代。你放在 Canvas 上的元素本身可以是 Canvas 类型的元素，它允许复杂的矢量图形结构体。因此，您可以使用不同的装饰图案绘制电路板，为电路板和数字绘制几种可选的图形设计，为用户提供设计选择等等。



在一些矢量图形编辑器中绘制这些元素。并非每个编辑器都有用，但只能将图形保存为XAML。我从未见过比开源InkScape更好的东西：

Inkscape - 维基百科，免费的百科全书 [ ^ ]，

主页| Inkscape [ ^ ]。



使用InkScape，您可以为SVG中的电路板和数字创建图形设计。将它作为SVG存储在您的修订控制数据库中，因为这是最通用和紧凑的数据格式。要将此数据导入项目，请将其导出到XAML。您将需要单独的文件为董事会和每个国际象棋人物。此外，一些实现使用电路板领域的突出显示，在三个设计中显示不同的阶段。如果你打算这样做，两个，也为那些单独的字段描绘白色和黑色板字段。



导出到XAML后，你需要做一些额外的工作：从所有元素中删除每个名称属性。一种方法是使用任何带有正则表达式替换的文本编辑器。然后，您可以将所有XAML图形文件复制到项目中的一个或多个词典 ResourceDictionary 中。他们需要给出每个设计元素（顶级 Canvas ）。要允许每个 Canvas 元素在 ResourceDictionary 中工作，您需要添加唯一属性键到每个（使用默认名称空间前缀，它将是 x：Key ，其中名称空间前缀x来自名称空间定义 xmlns：x =http://schemas.microsoft.com/winfx/2006/xaml，每次从Visual Studio中的项模板添加XAML时自动生成）。



您需要为所有元素进行一致的缩放。每个图形应该是整个电路板场的大小，在图形和场方形边界之间具有一致的填充。对所有数字和其他电路板字段使用相同的相对大小。您不需要关心整个板的大小：矢量图形是任意缩放的，当您放置图形时，您只需要相对于整个板的所有图形的坐标（以及那些用于突出显示的额外字段）。每个的位置很容易计算为相对于板的X * W / 8，Y * H / 8（我希望我的符号是自我解释的）。



因此，游戏的所有图形都将减少为在不同位置放置板块 Canvas 的元素，这本身就是放在<$的主实例上C $ C>画布。不要将一个画布作为另一个画布的子画面插入。你所有的XAML Canvas 元素，包括董事会的形象，应该只是一个（透明）顶级 Canvas 元素。



又一步：将顶级 Canvas 元素作为另一个元素的子元素类型 Viewbox ：

Viewbox类（System.Windows.Controls） [ ^ ]。



使整个应用程序可调整大小。 Viewbox 会自动将整个图形缩放到外部容器元素的大小。



元素，子元素 Canvas ，使用函数 Canvas.SetLeft 和 Canvas.SetTop相对于其父级移动：

Canvas.SetLeft方法（UIElement，Double）（System.Windows.Controls） [ ^ ]，

Canvas.SetTop方法（UIElement，Double）（System.Windows。控件） [ ^ ]。



此外，你可以编辑学习WPF拖放。但是，我建议避免它。相反，此举可以在两个更合乎逻辑的阶段完成。首先，玩家点击该图。如果它是有效数字，则突出显示它或其字段（或两者）。 （这就是我建议突出显示元素的原因;您可能还需要为所有数字突出显示变体。）玩家点击要移动的字段。如果此字段对移动有效，则移动该图并完成移动。可以在选择图形后取消移动，但不能在最后的字段单击后取消。 （我希望你能为游戏的所有动作实现可选的重做。）



但是如果你还想实现拖放，那么你也必须学习它：拖放概述 [ ^ ]。



这就是我所描述的几乎100％的图形工作。我希望我可以为你的家庭练习留下游戏逻辑。 :-)







我差点忘了：使用SVG的完整代码示例WPF应用程序中的XAML矢量图形在我的文章带有声音激活的实用录音机。



请参阅源代码中的WindowAbout.xaml和目录Resource。当然，资源字典可以在一个单独的文件中，并且图形可以按照我上面解释的方式进行缩放。

-SA

I can answer in detail just on WPF. I hope you can use these ideas for Universal Application as well.

For the game field control, use Canvas. This control allows to position UI elements at arbitrary positions, so they can overlap. You can simply put 8x8 elements of the type Rectangle to depict a board.

But I would suggest somewhat better alternative. The elements you put on Canvas themselves could be of the elements of the type Canvas, which allows for complex vector-graphics structure. So, you can draw the board with different decorative patterns, several alternative graphical designs for boards and figures, to give the users the design choice, and a lot more.

Draw these elements in some vector graphical editors. Not every editor will be useful, but only the one which can save graphics as XAML. I never saw anything better than open-source InkScape:
Inkscape - Wikipedia, the free encyclopedia[^],
Home | Inkscape[^].

With InkScape, you can create your graphical designs for the board and figures in SVG. Store it all in your Revision Control Database as SVG, because this is the most universal and compact data format. For importing this data to your project, export it to XAML. You will need separate files for the board and each chess figure. Besides, some implementations use highlight of the field of the board, in one-three designs showing different phases. If you plan to do it, two, also picture those separate fields, for "white" and "black" board fields.

After exporting to XAML, you will need to do a little extra work: remove each name attribute from all elements. One way to do so is using any text editor with Regular Expression replacement. Then you can copy all the XAML graphic files into one or more dictionaries, ResourceDictionary in your project. They you would need to give each design element (top-level Canvas). To allow each such Canvas element to work in ResourceDictionary, you would need to add the unique attribute Key to each (with default namespace prefix, it would be x:Key, where the namespace prefix "x" comes from the namespace definition xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml", which is generated automatically each time you add XAML from the item template in Visual Studio).

You need to take care of consistent scaling for all elements. Each figure should be of the size of the whole board field, with consistent padding between the figure and the field square boundaries. Use the same relative size for all figures and additional board fields. You don't need to care about the size of the whole board: vector graphic is arbitrarily scaled, and you need only the coordinates of all figures relative to the whole board when you position the figure (and those extra fields for highlighting). The position of each would be easily calculated as X * W/8, Y * H/8 relative to the board (I hope my notation is self-explained).

So, all the graphics of your game will be reduced to putting elements on top of the board Canvas at different positions, which is itself is put on the main instance of Canvas. Don't insert one canvas as the child of another one. All your XAML Canvas elements, including the image of the board, should be children on only one (transparent) top-level Canvas element.

One more step: make that top-level Canvas element a children of another element of the type Viewbox:
Viewbox Class (System.Windows.Controls)[^].

Make the whole application resizeable. Viewbox will automatically scale the whole graphics to the size of the outer container element.

The elements, children of Canvas, are moved relative to its parent using the functions Canvas.SetLeft and Canvas.SetTop:
Canvas.SetLeft Method (UIElement, Double) (System.Windows.Controls)[^],
Canvas.SetTop Method (UIElement, Double) (System.Windows.Controls)[^].

Also, you may need to learn WPF drag-n-drop. However, I would suggest to avoid it. Instead, the move could be done in two more logical phases. First, the player clicks on the figure. If it's a valid figure, it or its field (or both) is highlighted. (That's why I suggested highlighted elements; you may also need highlighted variants for all figures.) The the player clicks on the field to move. If this field is valid for a move, you move the figure and finalize the move. The move can be cancelled after figure selection, but not after the final field click. (I hope you are going to implement optional redo for the whole all moves of the game.)

But if you still want to implement drag-n-drop, you have to learn it, too: Drag and Drop Overview[^].

That's all I described nearly 100% of the graphics work for the game. I hope I can leave the game logic for your home exercise. :-)



I almost forgot: a complete code sample for using SVG to XAML vector graphics in WPF application is demonstrated in my article Practical Sound Recorder with Sound Activation.

See "WindowAbout.xaml" in source code and the directory "Resource". Of course, resource dictionary can in in a separate file, and the graphic can be scale the way I explained above.

—SA

这篇关于如何在UWP / WPF / XAML中创建检查板UI？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！