Создание сетки шестиугольников

Мне нужно сделать "сетку" следующим образом:

Я пытаюсь создать 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"/>

Ответ 1

Контейнер для заметок будет ItemsControl или ListBox, если вам нужно выбрать элементы. Затем вы даете своим элементам шаблон, используя ListBox.ItemTemplate, где вы включаете рисунок с шестиугольником. У вас есть хороший учебник по Пользовательский макет ListBox.

В этот момент ваши шестиугольники отображаются один под другим, поскольку ListBox по умолчанию. Чтобы получить свой специальный макет, вы должны изменить ListBox.ItemPanel. Здесь у вас есть две возможности:

либо вы используете панель Canvas, которая поддерживает абсолютное позиционирование. В этом случае ваши объекты должны иметь свойства X и Y, которые вы будете использовать для их размещения.
или вы создаете пользовательский Panel, возможно, на основе Canvas, который может преобразовать вашу пользовательскую систему координат (например, название примечания + октавное число) в X и Y. Немного сложнее, но гораздо более многократно, Пример Пользовательская панель в CodeProject.

Ответ 2

HexGrid: статья CodeProject

HexGrid: репозиторий GitHub

Ключевым компонентом возможного решения является панель WPF, которая может размещать гексагональные элементы (стандартные панели работают с прямоугольными дочерними элементами). Взгляните на мой проект HexGrid (слишком большой, чтобы публиковать здесь). Его центральная часть - это HexGrid (WPF Panel, которая упорядочивает дочерние элементы в сотовом шаблоне). Детальные элементы представлены HexItem (шестиугольные ContentControls). Существует также HexList (селектор ItemsControl, который отображает элементы в контейнере HexItem на панели HexGrid), который дает поддержку hex-выбора вне коробки.

пример использования:

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