创建六边形网格

Question

我必须像这样做一个“网格”：

Harmonic table

我正在尝试使用ItemsSource="List<Note>" 创建一个ListView，其中列表中的每个奇数音符都移到底部...

ListView 是正确的控件吗？

如何绘制一个精确的六边形，其面靠近下一个对象？

编辑： 六边形绘图已解决...这是 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

如果您需要选择项目，您的笔记容器将是 ItemsControl 或 ListBox。然后，您使用ListBox.ItemTemplate 为您的项目提供一个模板，其中包含您的六边形图。您在Custom ListBox layout 上有一个很好的教程。

此时，您的六边形显示在一个下方，就像 ListBox 默认情况下所做的那样。要获得您的特殊布局，您必须更改ListBox.ItemPanel。这里有两种可能：

• 要么使用支持绝对定位的Canvas 面板。在这种情况下，您的项目必须具有用于定位它们的 X 和 Y 属性。
• 或者您创建一个自定义Panel，可能基于Canvas，它能够将您的自定义坐标系（例如音符名称+八度数）转换为X和Y。有点困难但更可重用. Custom Panel on CodeProject 的示例。

Answer 2

HexGrid: CodeProject article

HexGrid: GitHub repository

可能的解决方案的关键组件是可以排列六边形元素的 WPF 面板（标准面板使用矩形子元素进行操作）。看看我的 HexGrid 项目（太大，无法在此处发布）。它的核心部分是HexGrid（WPF Panel 将子元素排列成蜂窝状）。子元素由HexItems（六边形ContentControls）表示。还有HexList（选择器ItemsControl，它在HexGrid面板上的HexItem容器中显示项目）提供开箱即用的十六进制选择支持。

使用示例：

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