构建国际象棋应用程序需要WPF控件

我正在尝试构建一个国际象棋应用程序。 我有后端逻辑(差不多)。 但我没有在UI上工作太多。 我计划使用C#,我听说WPF是要走的路。

你能否指点一下如何构建UI界面和各种硬币? 我是否必须为硬币构建某种控件? 另外,我应该用什么控制来开发电路板?

我将再次尝试这个问题并实际向您展示如何使用WPF正确执行此操作。 但是请注意,如果你之前从未做过任何WPF,那么一开始这可能有点压倒性,但希望它应该让人知道数据驱动的WPF是如何以及一旦你掌握了它的强大程度它。

首先,您需要创建一个WPF项目并运行NuGet包管理器来添加MVVM Light包(或者如果您愿意,可以手动添加它)。 接下来,您需要设置几个枚举来定义您的片段类型,并设置一个类来表示棋盘上片段的实际实例:

public enum PieceType { Pawn, Rook, Knight, Bishop, Queen, King } public enum Player { White, Black } public class ChessPiece : ViewModelBase { private Point _Pos; public Point Pos { get { return this._Pos; } set { this._Pos = value; RaisePropertyChanged(() => this.Pos); } } private PieceType _Type; public PieceType Type { get { return this._Type; } set { this._Type = value; RaisePropertyChanged(() => this.Type); } } private Player _Player; public Player Player { get { return this._Player; } set { this._Player = value; RaisePropertyChanged(() => this.Player); } } } 

几乎所有其他内容都是在XAML中完成的。 首先,您需要为电路板本身创建一个棋盘画笔,如果您愿意,这可以是位图,但我会继续创建几何图形。 此代码需要放在Window.Resources部分中:

                    

接下来,您需要一种基于正在渲染的部分选择图像的方法。 有很多方法可以做到这一点,但我在这里要做的方法是声明一个Image风格,然后使用触发器根据片段类型和播放器选择合适的位图。 对于这个例子,我只是热链接到wpclipart网站上的一些剪贴画。 这个XAML块很长,但它对每个片段类型都做同样的事情:

  

现在董事会本身。 使用上面的代码设置这个位非常简短,我们只是要渲染一个ItemsControl(即项目列表),我们将容器设置为canvas,我们将它的背景设置为我们的棋盘和对于每件作品,我们将根据Pos属性设置位置。 显然,我们还将使用上面设置的ChessPieceStyle图像样式来选择要渲染的正确图像:

                  

就是这样! 我们现在拥有了渲染国际象棋棋盘所需的一切。 剩下的就是创建一个我们的部分数组,将它放在一个ObservableCollection中(以便GUI在添加和删除部分时获取更新)并将其绑定到我们的棋盘:

 this.ChessBoard.ItemsSource = new ObservableCollection { new ChessPiece{Pos=new Point(0, 6), Type=PieceType.Pawn, Player=Player.White}, new ChessPiece{Pos=new Point(1, 6), Type=PieceType.Pawn, Player=Player.White}, new ChessPiece{Pos=new Point(2, 6), Type=PieceType.Pawn, Player=Player.White}, new ChessPiece{Pos=new Point(3, 6), Type=PieceType.Pawn, Player=Player.White}, new ChessPiece{Pos=new Point(4, 6), Type=PieceType.Pawn, Player=Player.White}, new ChessPiece{Pos=new Point(5, 6), Type=PieceType.Pawn, Player=Player.White}, new ChessPiece{Pos=new Point(6, 6), Type=PieceType.Pawn, Player=Player.White}, new ChessPiece{Pos=new Point(7, 6), Type=PieceType.Pawn, Player=Player.White}, new ChessPiece{Pos=new Point(0, 7), Type=PieceType.Rook, Player=Player.White}, new ChessPiece{Pos=new Point(1, 7), Type=PieceType.Knight, Player=Player.White}, new ChessPiece{Pos=new Point(2, 7), Type=PieceType.Bishop, Player=Player.White}, new ChessPiece{Pos=new Point(3, 7), Type=PieceType.King, Player=Player.White}, new ChessPiece{Pos=new Point(4, 7), Type=PieceType.Queen, Player=Player.White}, new ChessPiece{Pos=new Point(5, 7), Type=PieceType.Bishop, Player=Player.White}, new ChessPiece{Pos=new Point(6, 7), Type=PieceType.Knight, Player=Player.White}, new ChessPiece{Pos=new Point(7, 7), Type=PieceType.Rook, Player=Player.White}, new ChessPiece{Pos=new Point(0, 1), Type=PieceType.Pawn, Player=Player.Black}, new ChessPiece{Pos=new Point(1, 1), Type=PieceType.Pawn, Player=Player.Black}, new ChessPiece{Pos=new Point(2, 1), Type=PieceType.Pawn, Player=Player.Black}, new ChessPiece{Pos=new Point(3, 1), Type=PieceType.Pawn, Player=Player.Black}, new ChessPiece{Pos=new Point(4, 1), Type=PieceType.Pawn, Player=Player.Black}, new ChessPiece{Pos=new Point(5, 1), Type=PieceType.Pawn, Player=Player.Black}, new ChessPiece{Pos=new Point(6, 1), Type=PieceType.Pawn, Player=Player.Black}, new ChessPiece{Pos=new Point(7, 1), Type=PieceType.Pawn, Player=Player.Black}, new ChessPiece{Pos=new Point(0, 0), Type=PieceType.Rook, Player=Player.Black}, new ChessPiece{Pos=new Point(1, 0), Type=PieceType.Knight, Player=Player.Black}, new ChessPiece{Pos=new Point(2, 0), Type=PieceType.Bishop, Player=Player.Black}, new ChessPiece{Pos=new Point(3, 0), Type=PieceType.King, Player=Player.Black}, new ChessPiece{Pos=new Point(4, 0), Type=PieceType.Queen, Player=Player.Black}, new ChessPiece{Pos=new Point(5, 0), Type=PieceType.Bishop, Player=Player.Black}, new ChessPiece{Pos=new Point(6, 0), Type=PieceType.Knight, Player=Player.Black}, new ChessPiece{Pos=new Point(7, 0), Type=PieceType.Rook, Player=Player.Black} }; 

这是结果:

WPF棋盘

这似乎只是绘制棋盘的工作量很多,但请记住,现在这是一个完全由数据驱动的界面….如果你添加或删除碎片或更改你的棋子中的任何一个字段那些变化会立即传播到前端。 它也很容易扩展,修改和添加其他function,如动画,3D,reflection等。但也许最令人印象深刻的是,我没有必须创建任何自定义用户控件,为了做到这一点,WPF数据绑定机制足够强大,可以轻松地支持这种开箱即用的东西。

如果您需要任何进一步的说明和/或希望看到一个独立的项目,那么请务必告诉我。

如果它是2D,那么Canvas是显而易见的方法,你可以在它上面放置图像或任何你喜欢的东西,并将它们移动到任意位置。 您还可以将其包装在Viewbox中,以便它及其中的所有内容自动缩放到父窗口。

通常,您不需要进行任何用户控件。 WPF对用户控件的重视程度要低得多,一般而言,当您需要添加需要复制的现有框架未涵盖的非常具体的行为时,您只需要它们。 在国际象棋应用中不太可能出现这种情况。

ComponentOne有一个名为checkers的棋盘游戏的Silverlight演示。 您可以在线查看此演示,源代码免费提供。 当然,它对你开始很有帮助。 请注意,移植到WPF会非常简单。

1.设计canvas并决定你将给棋盘的大小,或者你想在游戏中显示的得分区域球员名称或任何其他额外信息

2.设计硬币的图像和板背景图像

3.现在设置场景,你应该有一个单独的图形类。 更新它并处理它会更容易(由你如何编写它)。

4.为动画创建一个类,即图像在特定动作上的移动方式。

5.如果您打算使用,请为声音创建一个单独的类。

6.创建另一个包含游戏逻辑的类

7. 玩家需要多上一节课

在完成它们之后,它完全取决于你如何处理它们的逻辑。

链接在这里 ,它在vb.net上,但你可以了解设计UI。