UserControl

Kevin Marois

I'm creating a chess game. The board is made up of a grid of user controls called BoardSqaure:

and

namespace Chess.UI.WPF.Controls
{
public partial class BoardSquare : UserControl
{
public BoardSquare()
{
InitializeComponent();
}

    public static readonly DependencyProperty PieceProperty =
                DependencyProperty.Register("Piece",
                typeof(PieceBase),
                typeof(BoardSquare),
                new PropertyMetadata(null));


    public PieceBase Piece
    {
        get { return (PieceBase)GetValue(PieceProperty); }
        set { SetValue(PieceProperty, value); }
    }
}

}

The DP Piece will hold an instance of PieceBase, which can be King, Queen, Rook.. etc. To load the board in the code behind I'm trying to do

private void SetupBoard()
{
// Do this for the first 2 and last 2 rows for initial set up
BoardSquare square = board.Children.Cast().First(e => Grid.GetRow(e) == 0 && Grid.GetColumn(e) == 0);
square.Piece = new RookBlack();

square = board.Children.Cast().First(e => Grid.GetRow(e) == 0 && Grid.GetColumn(e) == 1);
square.Piece = new BishopBlack();

.
.
.

}

However the pieces never shows up. What am I doing wrong here?

If it's not broken, fix it until it is. Everything makes sense in someone's mind. Ya can't fix stupid.

Jon McKee

Kevin Marois wrote:

BoardSquare square = board.Children.Cast<BoardSquare>().First(e => Grid.GetRow(e) == 0 && Grid.GetColumn(e) == 0); square.Piece = new RookBlack(); square = board.Children.Cast<BoardSquare>().First(e => Grid.GetRow(e) == 0 && Grid.GetColumn(e) == 1); square.Piece = new BishopBlack();

Well first off the bishop doesn't go next to the rook :-D In all seriousness though, I see nothing wrong with the code you've posted. Could you edit with all relevant Queen code? I'm assuming the other pieces are displaying properly?

Kevin Marois

No piece that I assign to the Piece property shows up

If it's not broken, fix it until it is. Everything makes sense in someone's mind. Ya can't fix stupid.

Lost User

There's too many things that you may have accounted for that we can't see: Width Height Visibility Transparency Z-Order Background color Foreground color Top Left Rendering ...

Jon McKee

There's really no way to tell from the code posted what's going on. ContentPresenter is generally used in a ControlTemplate. Using it raw like this means there are SOO many variables that could affect what's going on. Is there a DataTemplate associated with the type? What type of element is PieceBase? Does it have any templates associated with it? ContentPresenter is a very dynamic class. You can see just how many different things it checks and may or may not apply in the remarks section of its MSDN page[^].

Kevin Marois

OK, so what would be the right architecture here for a chess board? Keep in mind that the user will drag/drop pieces around, and pieces will also need to be programmatically added & removed. Thanks

If it's not broken, fix it until it is. Everything makes sense in someone's mind. Ya can't fix stupid.

Jon McKee

You can programmatically remove anything. For drag and drop, the MSDN article Walkthrough: Enabling Drag and Drop on a User Control[^] has everything you need. As far as architecture, that's entirely a personal choice. You can derive your UserControl from ContentControl and use a ContentPresenter. You could use Image controls[^] inside each Grid square. I mean WPF is a huge and flexible architecture. EDIT: I forgot to mention, you can use the ContentPresenter like that - nothing inherently wrong with it. There's just not enough information for me to say why it might not be working without all the code that could affect it.

Meshack Musundi

In a chess app I wrote some time back: WPF: P2P Chess[^], I took an approach similar to what you're doing. I had a bunch of user controls to represent the pieces. Over time I grew uncomfortable with this and decided to take an MVVM friendly approach for an app I'm currently developing, where the user plays against Stockfish. The chess board in my current app is a ListBox whose ItemsPanel is a Grid with eight row and eight columns. The ItemsSource property of the ListBox is bound to a collection of objects that implement the same interface. The collection, in the View Model, is made up of BoardSquares and ChessPieces. The DataTemplate of the ListBox is an Image that uses MultiDataTriggers to determine the appropriate image to display depending on the type of object. I'll be posting an article soon, maybe tommorrow, where you can dig deeper into the code.

"As beings of finite lifespan, our contributions to the sum of human knowledge is one of the greatest endeavors we can undertake and one of the defining characteristics of humanity itself"

Richard Deeming

Check the Visual Studio output window, and you'll probably find a load of binding errors telling you that the property Piece doesn't exist in the data context of the parent window. Update the user control so that it points to itself for the DataContext:

public BoardSquare()
{
InitializeComponent();
DataContext = this;
}

Or:

<UserControl x:Class="Chess.UI.WPF.Controls.BoardSquare"
...
DataContext="{Binding RelativeSource={RelativeSource Self}}"

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Kevin Marois

You were right. Thanks!

If it's not broken, fix it until it is. Everything makes sense in someone's mind. Ya can't fix stupid.

Kevin Marois

I look forward to seeing it. One question... When setting up the board, the board is layout grid with 8 rows & 8 columns, and the pieces are added to the grid during setup. How do you reverse the board for the other player?

If it's not broken, fix it until it is. Everything makes sense in someone's mind. Ya can't fix stupid.

Meshack Musundi

Kevin Marois wrote:

How do you reverse the board for the other player?

By reverse I guess you mean flip. I rotate the ListBox and switch its DataTemplate. One DataTemplate has the Image control rotated at an angle of 0 while the other has the Image control rotated at an angle of 180 degrees.

"As beings of finite lifespan, our contributions to the sum of human knowledge is one of the greatest endeavors we can undertake and one of the defining characteristics of humanity itself"