How to draw a grid in WPF

Question

I'm trying to create a user control in WPF to represent a Go board , which is essentially just a grid of black lines with dots on some of the intersections.

At the moment I'm using a Grid control to handle placement of the stones, but one of the difficulties is that the stones are placed on the intersections of the gridlines rather than between them, so if I want to draw the lines, they need to go through the centres of the grid cells.

I'm still quite new to WPF so I'm not really sure how I should be approaching this; should I be manually painting the lines every time the control renders (if so, how?), or is there a better way?

Answer 1

You could approach to this in multiple ways.

For example. One way is to use DrawingBrush to fill Panel's background. Here are some DrawingBrush examples:

_{(source: microsoft.com )}

Most likely you don't have to use Grid. For random positioning Canvas suits better. If you don't like brushes, you can use Geometries or Shapes to draw lines or other figures. I'm not referring you to DrawingVisuals because they may be slightly harder in understanding from start.

Updated : found this article on CodeProject: Draw a Boardgame in WPF . Maybe you'll find it useful.

Hope this helps,

Cheers, Anvaka.

Answer 2

A while ago I created the board of checkmate, I create an ItemsControl each Element of which is ItemsControl too with Small rectangle templates. here is my code

<UserControl x:Class="Checker.Controls.Board"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:models="clr-namespace:Checker.Models"
    xmlns:usercontrols="clr-namespace:Checker.Controls"
    xmlns:converters="clr-namespace:Checker.Converters">
    <UserControl.Resources>
        <models:BoardModel x:Key="boardModel"/>
        <converters:BoolToBorderColorConverter x:Key="boolToBorderColorConverter"/>
        <DataTemplate DataType="{x:Type models:Figure}">
            <usercontrols:FigureControl/>
        </DataTemplate>
    </UserControl.Resources>
    <Border>
        <ItemsControl ItemsSource="{Binding Source={StaticResource boardModel}, Path=BoardItems}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{Binding}" MouseDown="ItemsControl_MouseDown">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Background="{Binding Path='IsFirstColor', Converter={StaticResource boolToBorderColorConverter}}" BorderBrush="Black" BorderThickness="1" Width="50" Height="50" MouseDown="ItemsControl_MouseDown">
                                    <ContentPresenter Content="{Binding FigureOnBoard}">

                                    </ContentPresenter>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>
</UserControl>

Hope this helps

Answer 3

Random thoughts that might help:

1. Use a grid - its there and it should work nicely for positioning things
2. Grid "cell" content is basically a three state thing, the grid lines with nothing on, the grid lines with a white stone on top, the grid lines with a black stone on top - this should be a reusable piece of WPF markup - possibly a user control, possibly something else (I'm still too new to WPF too). I'd be tempted to bind this to your data.
3. You can attach behaviour to the cell content for when its clicked and for other things

Not really a detailed how to - but that's how I'd approach the problem

Answer 4

I just added this post in my blog:

EDIT: Moved the file to my Google drive

I think it'll help you, this is the result you'll get. You can download the projet in there too.