Tworzenie siatki sześciokątów

Question

muszę zrobić „siatkę” tak:

Harmonic table

Próbuję utworzyć ListView z ItemsSource="List<Note>" gdzie każdy nieparzysty uwaga na liście zostanie przeniesiony na dół ...

Czy ListView jest właściwym sterowaniem?

Jak mogę narysować dokładny sześciokąt z twarzami znajdującymi się w pobliżu następnego obiektu?

EDIT: sześciokąt rysunek został rozwiązany ... to jest 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

Pojemnik do notatek byłoby ItemsControl lub ListBox jeśli trzeba wybrać przedmioty. Następnie nadajesz swoim przedmiotom szablon za pomocą ListBox.ItemTemplate, w którym umieszczasz swój rysunek sześciokątny. Masz niezły tutorial na temat Custom ListBox layout.

W tym momencie Twoje sześciokąty są wyświetlane jeden pod drugim, tak jak domyślnie ListBox. Aby uzyskać specjalny układ, musisz zmienić ListBox.ItemPanel. Tutaj masz dwie możliwości:

• używasz panelu Canvas, który obsługuje pozycjonowanie bezwzględne. W takim przypadku Twoje produkty muszą mieć właściwości X i Y, których użyjesz do ich umieszczenia.
• lub utworzyć niestandardową Panel, prawdopodobnie opartą na Canvas, która jest w stanie przekształcić niestandardowy układ współrzędnych (na przykład nazwę nutową + numer oktawy) w X i Y. Trochę trudniejsze, ale o wiele bardziej wielokrotnego użytku. Przykład Custom Panel on CodeProject.

Answer 2

HexGrid: CodeProject article

HexGrid: GitHub repository

Kluczowym elementem możliwym rozwiązaniem jest WPF panel, który można rozmieścić elementy sześciokątne (standard panele działają z prostokątnych elementów podrzędnych). Zobacz mój projekt HexGrid (zbyt duży, aby opublikować tutaj). Jego częścią centalną jest HexGrid (WPF Panel, który układa elementy potomne w strukturze plastra miodu). Elementy potomne są reprezentowane przez HexItem s (w kształcie sześciokąta ContentControls). Istnieje również HexList (selektor ItemsControl, który wyświetla elementy w kontenerze HexItem na panelu HexGrid), co zapewnia obsługę wyboru heksadecymizmu po wyjęciu z pudełka.

Przykład zastosowania:

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