Que tal, buen día, el
día de hoy graficaremos un tablero de ajedrez en WPF.
1.- Crear un proyecto en WPF.
2.- Crear un control de usuario para un tablero de ajedrez.
2.- Crear un control de usuario para un tablero de ajedrez.
Aquí les pongo el código en XAML.
<UserControl x:Class="WPFChessProject.ChessBoard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="800">
<Grid x:Name="grdPrincipal">
<StackPanel x:Name="stkBoard">
</StackPanel>
</Grid>
</UserControl>
Ahora construiremos nuestro tablero.
Primero que nada, lo que necesitamos es definir el color de
las piezas blancas y de las piezas negras, por lo que necesitamos dos
propiedades de tipo color.
public
Color colorOfWhitePiece { get; set; }
public
Color ColorOfBlackPiece { get; set; }
También es necesario tener el conjunto de casillas agrupadas.
public
List<StackPanel>
Boxs { get; set;
}
Aquí las agrupamos en una lista de StackPanels que nos permitirán mostrar cualquier
objeto derivado de la clase UIElement,
esto con el fin de que si el proyecto crece se podrán crear controles como
piezas de ajedrez para simular una partida de ajedrez.
El control StackPanel
es un contenedor que nos permite tener una serie de controles derivados con el
fin de hacer uso de los mismos.
En los controles de WPF, en los contenedores se cuenta con
la propiedad Childrens, que es una lista de UIElement que son los objetos que se graficaran
en nuestra pantalla.
Una vez que tenemos declaradas nuestras propiedades, es
necesario crear e implementar un método que nos permita renderear nuestro tablero
de ajedrez.
public void RenderBoard()
{
StackPanel box;
bool isWhite = true;
for (int i = 0; i < 8; i++)
{
StackPanel rowBoxes = new StackPanel();
rowBoxes.Orientation = Orientation.Horizontal;
for (int j = 0; j < 8; j++)
{
box = new StackPanel();
box.Width = this.Width / 8;
box.Height = this.Height / 8;
if (isWhite)
{
box.Background = new SolidColorBrush(ColorOfWhitePiece);
isWhite = false;
}
else
{
box.Background = new SolidColorBrush(ColorOfBlackPiece);
isWhite = true;
}
rowBoxes.Children.Add(box);
Boxs.Add(box);
}
if (isWhite)
isWhite = false;
else
isWhite = true;
this.stkBoard.Children.Add(rowBoxes);
}
}
En el método RenderBoard creamos
dos variables locales, una variable representa una casilla de nuestro tablero
de ajedrez y otra variable booleana que nos permite saber si la casilla es color
blanco o negro según el ajedrez.
StackPanel box;
bool isWhite = true;
También tenemos dos ciclos for que nos permiten recorrer el
tablero de ajedrez
for (int i = 0; i <
8; i++)
{
StackPanel rowBoxes = new StackPanel();
rowBoxes.Orientation
= Orientation.Horizontal;
for (int j = 0; j <
8; j++)
{
box
= new StackPanel();
box.Width = this.Width / 8;
box.Height = this.Height / 8;
Las dos primeras
lineas representan una fila de un tablero de ajedrez con ocho columnas
StackPanel rowBoxes = new StackPanel();
rowBoxes.Orientation
= Orientation.Horizontal;
en las primeras líneas del segundo for tenemos la instancia de una casilla de ajedrez y la asignación de ancho y alto.
box = new StackPanel();
box.Width = this.Width / 8;
box.Height = this.Height / 8;
la condicional nos indica cuando tenemos que graficar una casilla blanca o negra
if (isWhite)
{
box.Background = new SolidColorBrush(ColorOfWhitePiece);
isWhite = false;
}
else
{
box.Background = new SolidColorBrush(ColorOfBlackPiece);
isWhite = true;
}
Terminando el for de las columnas, lo que
necesitamos es cambiar el color de nuestra bandera booleana que nos indica de qué
color es la casilla.
Después de esto, solo basta agregar la fila de
casillas a nuestra stack panel stkBoard
if
(isWhite)
isWhite = false;
else
isWhite = true;
this.stkBoard.Children.Add(rowBoxes);
aquí les dejo todo el codigo fuente del user control.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WPFChessProject
{
/// <summary>
/// Lógica de interacción para ChessBoard.xaml
/// </summary>
public partial class ChessBoard : UserControl
{
public List<StackPanel> Boxs { get; set; }
public Color ColorOfWhitePiece { get; set; }
public Color ColorOfBlackPiece { get; set; }
public ChessBoard(Color pieceWhiteColor,Color pieceBlackColor,double width, double height)
{
InitializeComponent();
Boxs = new List<StackPanel>();
this.Width = width;
this.Height = height;
stkBoard.Orientation = Orientation.Vertical;
this.ColorOfWhitePiece = pieceWhiteColor;
this.ColorOfBlackPiece = pieceBlackColor;
RenderBoard();
}
public void RenderBoard()
{
StackPanel box;
bool isWhite = true;
for (int i = 0; i < 8; i++)
{
StackPanel rowBoxes = new StackPanel();
rowBoxes.Orientation = Orientation.Horizontal;
for (int j = 0; j < 8; j++)
{
box = new StackPanel();
box.Width = this.Width / 8;
box.Height = this.Height / 8;
if (isWhite)
{
box.Background = new SolidColorBrush(ColorOfWhitePiece);
isWhite = false;
}
else
{
box.Background = new SolidColorBrush(ColorOfBlackPiece);
isWhite = true;
}
rowBoxes.Children.Add(box);
Boxs.Add(box);
}
if (isWhite)
isWhite = false;
else
isWhite = true;
this.stkBoard.Children.Add(rowBoxes);
}
}
}
}
3.- Consumir el Control de usuario.
ahora en nuestra aplicación principal del proyecto tendremos que instanciar nuestro tablero, les muestro el XAML de la aplicación principal.
Ahora veamos el codebehind:
Básicamente consiste en crear una instancia de ChessBoard y agregarlo al gridPrincipal y listo.
<Window x:Class="WPFChessProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="grdPrincipal">
</Grid>
</Window>
Ahora veamos el codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WPFChessProject
{
/// <summary>
/// Lógica de interacción para MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
ChessBoard chessBoard = new ChessBoard(Colors.Green, Colors.Black,400,400);
grdPrincipal.Children.Add(chessBoard);
}
}
}
Básicamente consiste en crear una instancia de ChessBoard y agregarlo al gridPrincipal y listo.
4.- Ejecutar la aplicación.:
Y así lucirá nuestro tablero de ajedrez ;)
Que pasen buen día, buena vibra
