Creazione della griglia di esagoni

Question

Devo fare un " grid " in questo modo:

Tavolo armonico

Sto cercando di creare un ListView con ItemsSource="List<Note>" in cui ogni nota dispari nell'elenco viene spostata in fondo ...

<=> è il controllo giusto?

Come posso disegnare un esagono esatto con facce vicino all'oggetto successivo?

EDIT: il disegno esagonale è risolto ... questo è il 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

Il contenitore per le note sarebbe ItemsControl o ListBox se è necessario selezionare elementi. Quindi dai ai tuoi oggetti un modello usando ListBox.ItemTemplate dove includi il tuo disegno esagonale. Hai un bel tutorial su Layout ListBox personalizzato .

A questo punto, i tuoi esagoni sono visualizzati uno sotto l'altro come fa un ListBox di default. Per ottenere il tuo layout speciale, devi modificare ListBox.ItemPanel. Qui hai due possibilità:

• o usi il pannello Canvas che supporta il posizionamento assoluto. In questo caso i tuoi articoli devono avere proprietà X e Y che utilizzerai per posizionarli.
• oppure crei un Panel personalizzato, probabilmente basato su <=>, in grado di convertire il tuo sistema di coordinate personalizzato (ad esempio nome della nota + numero di ottava) in X e Y. Un po 'più difficile ma molto più riutilizzabile . Un esempio di Pannello personalizzato su CodeProject .

Answer 2

HexGrid: articolo CodeProject

HexGrid: repository GitHub

Il componente chiave di una possibile soluzione è un pannello WPF che può disporre elementi esagonali (i pannelli standard funzionano con elementi figlio rettangolari). Dai un'occhiata al mio progetto HexGrid (troppo grande per postare qui). La parte centrale di esso è un HexGrid (WPF Panel che dispone gli elementi figlio in un modello a nido d'ape). Gli elementi figlio sono rappresentati da HexItem s (ContentControls a forma esagonale). Esiste anche HexList (selettore ItemsControl che visualizza gli elementi nel contenitore HexItem su un pannello HexGrid) che fornisce un supporto alla selezione esadecimale pronto all'uso.

esempio di utilizzo:

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