tags:

views:

363

answers:

5
+2  Q: 

Chessboard in WPF

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.

A: 

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>
Scott
+1  A: 

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>
serialhobbyist
"This is probably not how I would do it but..." Well, then how would you do it?
Scott
Well, first, I'd think about it a bit more than I have... :-) Well, first there's how fussy you are about how it looks - is this a learning exercise or an end in itself - how pretty does it have to be? Then there's the approach you're taking to the game and the board: is each square going to maintain its state or are you going to have a set of pieces that maintain their location. Do you want fancy transitions as the pieces move? And so on.
serialhobbyist
The good thing about WPF is you can separate the UI design from the coding, hand a copy of Blend and a link to your solution to a designer and let them to that whilst you get on with the code. Clearly, a lot of communication is required between you but they do filigrees and other twiddly bits and you tune the engine. Or, something.
serialhobbyist
+7  A: 

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.

Alastair Pitts
+1 Didn't think of that. Usually my grids are NEVER uniform :)
Scott
Yep, me too. Read about it when I started. Promptly forgot about it.
serialhobbyist
+2  A: 

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

Scott Weinstein
If I want to use a Grid instead of a UniformGrid -- how can I bind the Grid.Column and Grid.Row properties to the x and y coordinates of the squares?
CaptainProton
The question doesn't make much sense. If you want to use a x/y coordinate system, you can use the Canvas panel. The syntax for databinding is simple, but not very usefull. The WPF way to to let the panel have responsibility for layout. Check out this example for just how powerfull the normal panels can be - http://www.beacosta.com/blog/?p=40
Scott Weinstein
With “coordinates” I didn’t mean the actual coordinates on the screen but the coordinates of the chessboard (from 0 to 7). So I tried “<ContentControl Grid.Column="{Binding CoordinateX}"…” but it doesn’t work. Maybe I should better start another question for this.
CaptainProton
I have the same question as CaptainProton - does anyone know how to bind the coordinates to a Grid (or similar control)?
Pat
+1  A: 

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.

Akash Kava