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

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

Таблица гармоникТаблица гармоник

Я пытаюсь создать ListView с ItemsSource="List<Note>", где каждая нечетная заметка в списке перемещается внизу...

Является ли ListView правильным элементом управления?

Как я могу нарисовать точный шестиугольник с гранями, который находится рядом со следующим объектом?

EDIT: рисунок шестиугольника решен... это 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"/>

listview wpf xaml hexagonal-tiles
person Mauro Destro    schedule 18.09.2009    source источник

Ответы (2)


arrow_upward
7
arrow_downward

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

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

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

arrow_upward
2
arrow_downward

HexGrid: статья CodeProject

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

Ключевым компонентом возможного решения является панель WPF, которая может размещать шестиугольные элементы (стандартные панели работают с прямоугольными дочерними элементами). Взгляните на мой проект HexGrid (слишком большой, чтобы публиковать его здесь). Его центральной частью является HexGrid (WPF Panel, который упорядочивает дочерние элементы в виде сот). Дочерние элементы представлены HexItems (элементы управления контентом в форме шестиугольника). Существует также 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>

шестнадцатеричный селектор цвета

person ASh    schedule 21.07.2017
comment
Вы опубликовали это на nuget? - person ΩmegaMan; 09.06.2020
comment
@ΩmegaMan, нет, не видел. вроде не особо на него спрос - person ASh; 09.06.2020
comment
Стыдно, похоже, ты много работаешь. Я бы хотел подключить это к приложению, но не решаюсь скопировать/вставить код. Если вы передумаете, дайте нам знать. - person ΩmegaMan; 09.06.2020