[WPF] Hexagonal tiles

[NickThissen]

Hi,

In my application I need a 'map' of hexagonal tiles, arranged into a 'square' (as much as that is possible) of arbitrary size. The hexagons need to be 'clickable' by the user so they'll need to be some kind of element that supports click events.

This is what I'm looking for:


The number of tiles should be variable, sometimes I'll need 5x5, sometimes 25x25, etc. The square should then resize according to the size of the window (so more tiles doesn't mean larger size square, just smaller tiles).

I have no clue how to even start this. Since I come from windows forms I'm inclined to just create a new control that inherits Canvas and draw the whole thing manually, including click-position detection. That would probably work (in about 3 years time...) but I have a feeling this is much easier in WPF. Maybe some kind of ListBox with a funky ItemTemplate? I have made custom item templates before and I can probably get the items hexagonal, but I have no clue how I'm going to get them to line up in a square instead of just in a list as the ListBox usually does...

Any idea's?

[Lightning]

First thought: Create a hexagonal button, can be done easily in Expression Blend (30-day trail is free, you could alse download the free Phone 7 tools that include a version of Expression Blend). Put a bunch of those in a wrappanel. I don't know if the warppanel works 100% for these buttons

[NickThissen]

The hexagonal shape is not a problem, I can create that with a Path element, or even simply an Image on a transparent (square) control. The problem is the layout of the hexagonal tiles.

I actually got it to work by simply positioning the tiles absolutely on a Canvas. Every other row of tiles gets an offset equal to half its width. This works pretty well, but the problem is that it's not very flexible at all. I cannot resize the grid of hexagonal tiles, and if I want to change the size of the tiles now I have to change the (hardcoded) sizes and offsets. It would be much better if this all happened automatically, but I don't think there's any way to do that..

[Evil_Giraffe]

1) The "fitting it to window" can be done with a Viewbox control - so don't worry about that with regards laying out the hexagons - just lay them out as if you had as much space as you needed, and then place that inside a Viewbox. If you want to maintain aspect ratio then set the Viewbox stretch to Uniform, otherwise you'd want to set it to Fill.

2) The ListBox could be styled with a Canvas as its ItemsPanelTemplate. If each object underlying the hexagon knows its coordinates (in whatever system you choose to define them as) then you could write a value converter that will go from hex coordinates to offset within the canvas. This gets wired up in the ItemTemplate of the ListBox. This is one approach off the top of my head, there might be others that make more sense depending on what you're actually doing and why you need the hexagons.