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

Question

Мне нужно сделать «сетку», например:

Гармоническая таблица

Я пытаюсь создать 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, где вы включаете свой шестиугольный рисунок. У вас есть хороший учебник по Пользовательский макет ListBox .

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

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

Answer 2

HexGrid: статья CodeProject

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

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

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

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