Chess board in WPF

Question

For the many years that I developed using Winforms, now I want to switch to WPF and make a chessboard. Unfortunately, I do not know where to start. Using WPF makes me very uncertain, I feel like a noob again. Can someone outline a basic design? I think I would start with an 8x8 grid and use rectangles for squares, images for pieces. And then? Did I miss something?

Edit: this is just a user interface; what happens behind the scenes is not a problem.

Answer 1

An alternative to the standard grid is to use the UniformGrid link (

any of these answers will give you the desired results.

Answer 2

Chess seems appropriate for the MVVM WPF code template.

The model will be the logic of a game of chess, it sounds as if you are in control of it. The view will look in WPF in the game, and the ViewModel will represent the game in which the View can bind data to.

For presentation, an ItemsControl using UniformGrid will work for a 2D representation of the game.

Here is the initial (untested)

 <ItemsControl ItemsSource="{Binding TheGame}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Columns="8" Rows="8" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <ContentControl Background="{Binding SquareColor}"> <Path Data="{Binding PieceShape}" Fill="{Binding PieceColor}" /> </ContentControl> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> 

For the above to work, your ViewModel must have an ObservableCollection<ChessGridItem> and ChessGridItem must have a DependencyObject displaying DependencyProperties for SquareColor , PieceColor and PieceShape

Answer 3

You can make your interface in XAML or in code with the same results. I recently started using WPF and I recommend the XAML approach. This is a little scary, but he quickly becomes familiar. For me, it seems like a thoughtful approach to user interface design, and now WinForms looks like they just uninstalled .NET on top of what it was before.

You can start with a drag and drop approach, but if you're like me, you'll be pretty quick at working in XAML and using the design surface for visual validation.

This is probably not the way I would have done it, but if you look at any XML or HTML, you can probably guess what this will show, even if you have never looked at any XAML before:

 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="100" /> <RowDefinition Height="100" /> <RowDefinition Height="100" /> <RowDefinition Height="100" /> </Grid.RowDefinitions> <Border Grid.Column="0" Grid.Row="0" Background="Black" /> <Border Grid.Column="2" Grid.Row="0" Background="Black" /> <Border Grid.Column="1" Grid.Row="1" Background="Black" /> <Border Grid.Column="3" Grid.Row="1" Background="Black" /> </Grid> 

Answer 4

I agree with all the examples posted here, but I think you are a bit confused due to a completely different “Data” template model in WPF versus the purely closely related WinForms UI + data model.

The transition from WinForm to WPF is a small learning curve, it took me two years to start coding in WPF myself, because I was always more convenient in codebehind files.

My best guess is that first you need to take a look at the WPF concepts with a logical tree and a “Visual tree”, where you will understand how easily WPF UI elements and UI elements (data objects) are connected only in XAML without writing any C #.

And the most important concepts, such as “Triggers”.

All you need to create is the “Data” objects, which will be your chess (King, Horse), etc., obtained from the same base class that implements the IPropertyChanged interface, and they will implement properties such as “CanBeKilled”, "IsPossibleTarget", which may simply be limited to an ItemTemplate ListBox, where your ListBox will contain the current selection.

The ListBox list item panel template can be one of the examples above, and on MouseOver you can select a color or border according to the above properties. And all you have to do is update each element of the boolean properties in the ListBox when the selection changes.

I just read your editing part, and I believe that Code Behind should be different and simple in WPF, because when compared to WinForms, a beautifully designed WPF will have 90% less code compared to WinForm.

Answer 5

No, I don’t think you have anything missing. This is a good start.

Create a grid, then add columns and rows. Then place the rectangle in alternating cells (or image). I would create a style for the fill color of the rectangle and the stroke. This allows you to change the background color in one place (style definition), and not for every cell that needs to be changed.

Here is a very simple board using a grid. Note. I did not encode the size of the rows and columns. Tis retains all proportionality and allows the board to scale.

  <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Name="A1" /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Rectangle Name="rectangle1" Stroke="Black" Fill="Aquamarine" /> </Grid>