Chessboard in WPF

Question

For years I've developed with Winforms, now I want to switch to WPF and make a chessboard. Unfortunately I have no idea where to start. Using WPF makes me very unsure, I'm feeling like a noob again. Can someone outline a basic design? I guess I would start with a 8x8 Grid and use rectangles for the squares, images for pieces. And then? Am I missing something?

Edit: It's just about the user interface; what goes on behind the scenes is no problem.

Answer 1

An alternative to the standard grid, is the use of a UniformGrid (msdn link).

It's probably more suited to this (in my opinion) as it will ALWAYS give you the same size cells.

used ala:

<UniformgGrid Columns="8" Rows="8">
    <Control1/>
    <Control2/>
    <Control3/>
</UniformGrid>

any of these answers will give you the results you desire.

Answer 2

Chess seems like a good fit for WPF's MVVM code pattern.

The Model will be the logic for the game of chess, sounds like you have that under control. The View will the the WPF look of the game, and the ViewModel will the representation of the game, in which the View can databind to.

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

Here's a start (unchecked)

<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 will need to have a ObservableCollection<ChessGridItem> and ChessGridItem should be a DependencyObject exposing DependencyProperties for SquareColor, PieceColor and PieceShape

Answer 3

You could do your UI in XAML or in code with the same results. I've recently started using WPF and I recommend the XAML approach. It's a bit intimidating to start with but it rapidly becomes familiar. To me, it feels like a well-conceived approach to UI design and now WinForms looks like they just slapped .NET over whatever came before.

You can start with the drag and drop approach but if you're like me you'll be working in XAML quite quickly and using the design surface for a visual check.

This is probably not how I would do it but if you've looked at any XML or HTML you can probably guess what this will show, even if you've 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

No, I don't think you're missing anything at all. That is a good start.

Create a grid then add the columns and rows. Then drop a rectangle into alternating cells (or an image). I would create a style for the rectangle's fill color and stroke. This allows you to change the background color in one location (the style definition) rather than for each cell you need to change.

Here is a very basic board using grid. Note I did not hardcode the size of the rows and columns. Tis will keep everything proportionate and allow 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>

Answer 5

I agree with all samples posted here but I think you are little confused because of completely different "Template" model of "Data" in WPF against pure closely bound UI + Data model of WinForms.

Coming from WinForm to WPF is little big learning curve, I myself took two years to start coding in WPF because I was always more comfertable in codebehind files.

My best guess is first you have to look into "Logical Tree" and "Visual Tree" concepts of WPF, where you will understand that how easlily WPF UI Elements and non UI Elements (Data objects) connects just in XAML without writing any C#.

And another most important concepts like "Triggers".

All you need to create is "Data" objects which will be your chess items (King,Horse) etc, derived from one common base class implementing IPropertyChanged interface and they will implement properties like "CanBeKilled", "IsPossibleTarget" which can be simply bounded in ItemTemplate of ListBox where your ListBox will hold current selection.

ListBox's item panel template can be one of the above examples and on MouseOver, you can highlight color or border according to above properties. And all you have to do is, update Every item's boolean properties in ListBox when the selection changes.

I just read your Edit part and I believe the Code Behind must be different and simple in WPF because comparing with WinForms, nicely designed WPF will have 90% less code behind compared to WinForm.