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<Note>" 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:

<Path d:LayoutOverrides="None" 
      d:LastTangent="0,0" Stroke="Blue" Fill="Red" 
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
      Margin="0" Width="100" Height="100" x:Name="Path" 
  Stretch="Fill" 
      Data="M8.660254,0 L17.320508,5 17.320508,15 8.660254,20 0,15 0,5 8.660254,0 z"/>

Answer 1

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.