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?

Solution 1

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.

Solution 2

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.

Solution 3

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

Solution 4

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

View more solutions

Comments

[Will Vousden]

Thanks – this turned out to be exactly what I needed!

[Vasyl Boroviak]

Анвака! :) Рад что ты тоже переехал с кывта в это чудное место. И как раз твой ответ подходит для решения моей проблемы.

[Marc]

4 years passed: Blog post not found, screencast not found. That's why a link shouldn't be an answer to a question. Put at least some hints.

[Carlo]

I'll fix that in a couple of hours. Thanks for letting me know.

[IAbstract]

Blog post still not found.

[Carlo]

@IAbstract I'm so sorry for the delay. The project is here now, hope it's not too late drive.google.com/file/d/0B2TCEp0dTZ-odXAtUEh0Ry1WVEk/…