English 中文(简体)
Chessboard in WPF
原标题:
  • 时间:2009-12-27 16:01:51
  •  标签:
  • wpf
  • chess

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.

最佳回答

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.

问题回答

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

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>

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>

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.





相关问题
WPF convert 2d mouse click into 3d space

I have several geometry meshes in my Viewport3D, these have bounds of (w:1800, h:500, d:25). When a user clicks in the middle of the mesh, I want the Point3D of (900, 500, 25)... How can I achieve ...

Editing a xaml icons or images

Is it possible to edit a xaml icons or images in the expression design or using other tools? Is it possible to import a xaml images (that e.g you have exported) in the expression designer for editing?...

WPF: writing smoke tests using ViewModels

I am considering to write smoke tests for our WPF application. The question that I am faced is: should we use UI automation( or some other technology that creates a UI script), or is it good enough to ...

WPF - MVVM - NHibernate Validation

Im facing a bit of an issue when trying to validate a decimal property on domain object which is bound to a textbox on the view through the viewmodel. I am using NHibernate to decorate my property on ...

How do WPF Markup Extensions raise compile errors?

Certain markup extensions raise compile errors. For example StaticExtension (x:Static) raises a compile error if the referenced class cannot be found. Anyone know the mechanism for this? Is it baked ...

WPF design-time context menu

I am trying to create a custom wpf control, I m wondering how I can add some design-time features. I ve googled and can t seem to get to my goal. So here s my simple question, how can I add an entry ...

How to combine DataTrigger and EventTrigger?

NOTE I have asked the related question (with an accepted answer): How to combine DataTrigger and Trigger? I think I need to combine an EventTrigger and a DataTrigger to achieve what I m after: when ...

热门标签