WPF "hex grid"组件

Question

进入 WPF 自定义控件的世界，想知道设计 HexGrid 控件的最佳方式是什么？想想你最喜欢的桌面 war 游戏；或者，同样有可能是您最喜欢的视频游戏，它从桌面 war 游戏引以为豪的历史中窃取了设计。

底层模型公开了一个重要的方法，作为 Map 类的一部分:

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

十六进制包含所有相关数据(目前，一个将 1:1 映射到背景颜色的地形枚举；从小处开始......)。

可能相关的约束:
map 大小不变，十六进制数据在非常可预测的时间发生变化(始终直接响应用户操作)。

理想情况下，组件将展开以干净地填充其容器，并且可以直接在 XAML 中声明。

我正在寻找的是我需要做些什么来构建它的粗略轮廓，而不是一个现成的组件。

*虽然我对这个寻址方案很聪明，但显然我是late to the party .

Answer 1

在我看来，在 WPF 中，将 HexGrid 设计为 Panel 而不是 UserControl 更为合理。面板没有视觉表示，只需要正确排列子元素(在 HexGrid 的情况下 - 以蜂窝模式)。这些子元素又应该具有六角形。

概念证明:我的 HexGrid 项目(太大，无法在此处发布)

CodeProject article

GitHub repository

HexList:在 HexGrid 面板上显示 HexItem 容器中的项目的选择器 ItemsControl

HexGrid:将子元素排列成蜂窝状的面板

HexItem:六边形的ContentControl

声明性用法示例:

<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>

我知道这个问题是老问题，但请分享我的解决方案以防万一