Creating grid of hexagons

Question

I have to do a "grid" like this: Harmonic table I'm trying to create a `ListView` with `ItemsSource="List"` where every odd note in the list is moved on the bottom... Is the `ListView` the right control? How can I draw an exact hexagon with faces that is near next object? EDIT: hexagon drawing is solved... this is the xaml: ``` ```

Accepted Answer

The container for your notes would be an `ItemsControl` or a `ListBox` if you need to select items. Then you give your items a template using `ListBox.ItemTemplate` where you include your hexagon drawing. You have a nice tutorial on Custom ListBox layout.

At this point, your hexagons are displayed one below the other as a ListBox does by default. To get your special layout, you have to change the `ListBox.ItemPanel`. Here you have two possibilities:

- either you use the `Canvas` panel that supports absolute positioning. In this case your items must have X and Y properties that you will use to position them.

- or you create a custom `Panel`, probably based on `Canvas`, that is able to convert your custom coordinate system (for example note name + octave number) into X and Y. A bit more difficult but much more reusable. An example of Custom Panel on CodeProject.

Creating grid of hexagons

Solution

Problem