创建六边形网格

Question

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

Harmonic table

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

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，它以蜂巢模式排列子元素）。子元素由HexItem s（六边形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>