WPF “hex grid” component

问题:

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.

回答1:

EDIT:Here's a link to Pete's project page which has a hex grid sample. http://blois.us/Projects.html There is a pathfinding sample that shows a project called pathfinding which has a Hex Grid, and probably uses the same basic code that minesweeper does. I haven't looked at it yet. It is Silverlight 3 so may need to be upgraded. Minesweeper was pretty elegant.

Ralph

ORIGINAL: There was a sample for silverlight 2 by peter blois of a hexagonal version of minesweeper.

It included source code. He had a very elegant method of doing it by overriding the measureoverride and arrangeoverride on the grid. Mouseovers, etc. worked fine. There was remarkably little code.

I can't find the project on the web any more, although google has a stale link to it by searching for hexagon minesweeper silverlight source code blois

Peter Blois has a current blog at the below address, so you might try contacting him here... http://blois.us/Projects.html

Good luck and tell me how it goes, I'm going to be dong something similar.

回答2:

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