WPF "hex grid" component

Question

Jumping into the world of WPF custom controls, and was wondering what the best way to design a HexGrid control would be? Think your favorite table-top war game; or, equally likely, your favorite video game that steals the design from a proud history of table-top war games.

The underlying model exposes one significant method, as a part of a Map class:

Hex GetHex(int x, int y, int z)*;

Hex contains all relevant data (at the moment, a Terrain enumeration that maps 1:1 to a background color; starting small...).

Possibly relevant constrains:
Map doesn't change in size & Hex data changes at very predictable times (always in direct response to user action).

Ideally the component will expand to fill its container cleanly, and be declarable directly in XAML.

What I'm looking for is a sketchy outline of what I need to do to build this, not a ready made component.

*I though I was being pretty clever with this addressing scheme, but apparently I'm late to the party.

Answer 1

In my opinion in WPF it is more reasonable to design a HexGrid as a Panel and not as UserControl. Panels don't have visual representation and only have to arrange child elements properly (in case of HexGrid - in a honeycomb pattern). Those child elements in turn should have hexagonal shape.

A proof of a concept: my HexGrid project (too large to post here)

CodeProject article

GitHub repository

HexList: selector ItemsControl which displays items in HexItem container on a HexGrid panel

HexGrid: Panel which arranges child elements in a honeycomb pattern

HexItem: hexagon-shaped ContentControl

example of declarative usage:

<hx:HexList Name="HexColors" Orientation="Vertical"
            Grid.Row="1"
            Padding="10"
            SelectedIndex="0"
            Background="{Binding Path=SelectedItem.Background, RelativeSource={RelativeSource Self}}"
            RowCount="5" ColumnCount="5">
    <hx:HexItem Grid.Row="0" Grid.Column="1" Background="#006699"/>
    <hx:HexItem Grid.Row="0" Grid.Column="2" Background="#0033CC"/>
    <hx:HexItem Grid.Row="0" Grid.Column="3" Background="#3333FF"/>
    <!--...-->
    <hx:HexItem Grid.Row="4" Grid.Column="1" Background="#CC9900"/>
    <hx:HexItem Grid.Row="4" Grid.Column="2" Background="#FF3300"/>
    <hx:HexItem Grid.Row="4" Grid.Column="3" Background="#CC0000"/>
</hx:HexList>

I understand that the question is an oldie but share my solution just in case