创建六边形网格

发布于 2024-08-04 16:24:49 字数 769 浏览 4 评论 0原文

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

我正在尝试创建一个 ListView< /code> 与 ItemsSource="List" 列表中的每个奇怪的注释都移动到底部...

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

原文

I have to do a "grid" like this:

Harmonic table

I'm trying to create a ListView with ItemsSource="List<Note>" where every odd note in the list is moved on the bottom...

Is the ListView the right control?

How can I draw an exact hexagon with faces that is near next object?

EDIT: hexagon drawing is solved... this is the 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"/>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

对你再特殊 2024-08-11 16:24:49

如果您需要选择项目，则注释的容器将是 ItemsControl 或 ListBox。然后，您使用 ListBox.ItemTemplate 为您的项目提供一个模板，其中包含您的六边形绘图。您有一个关于自定义列表框布局的很好的教程。

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

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

回复收藏 0 原文

少钕鈤記 2024-08-11 16:24:49

HexGrid：CodeProject 文章

HexGrid：GitHub 存储库

可能解决方案的关键组件是可以排列六边形元素的 WPF 面板（标准面板使用矩形子元素进行操作）。看一下我的 HexGrid 项目（太大，无法在此处发布）。它的中心部分是一个 HexGrid（WPF Panel，它以蜂窝状图案排列子元素）。子元素由 HexItem（六边形内容控件）表示。还有 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>

HexGrid: CodeProject article

HexGrid: GitHub repository

The key component of a possible solution is a WPF Panel which can arrange hexagonal elements (Standard Panels operate with rectangular child elements). Take a look my HexGrid project (too large to post here). The cental part of it is a HexGrid (WPF Panel which arranges child elements in a honeycomb pattern). Child elements are represented by HexItems (hexagon-shaped ContentControls). There is also HexList (selector ItemsControl which displays items in HexItem container on a HexGrid panel) which gives hex selection support out-of-box.

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

回复收藏 0 原文

~没有更多了~