CODEWITHSUNDEEP
c#.netwpfdrawing
Will Vousden
Will Vousden

Reputation: 33358

How to draw a grid in WPF

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?

Upvotes: 5

Views: 11217

Answers (4)

Anvaka
Anvaka

Reputation: 15823

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:

alt text
(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.

Upvotes: 6

Carlo
Carlo

Reputation: 25959

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.

Upvotes: 0

Arsen Mkrtchyan
Arsen Mkrtchyan

Reputation: 50712

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

Upvotes: 2

Murph
Murph

Reputation: 10190

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

Upvotes: 1

Related Questions