Creazione griglia di esagoni

Question

devo fare una "griglia" in questo modo:

Harmonic table

Sto cercando di creare un ListView con ItemsSource="List<Note>" dove ogni nota dispari della lista viene spostato sulla bottom ...

Il ListView è il controllo giusto?

Come è possibile disegnare un esagono esatto con i volti vicini all'oggetto successivo?

EDIT: disegno esagonale è risolto ... questo è il codice 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 un ItemsControl o un ListBox se è necessario selezionare gli elementi. Quindi dai ai tuoi articoli un modello usando ListBox.ItemTemplate dove includi il tuo disegno esagonale. Hai un bel tutorial su Custom ListBox layout.

A questo punto, i tuoi esagoni vengono visualizzati uno sotto l'altro come un ListBox di default. Per ottenere il layout speciale, è necessario modificare il ListBox.ItemPanel. Ecco due possibilità:

• o si utilizza il pannello Canvas che supporta il posizionamento assoluto. In questo caso i tuoi articoli devono avere le proprietà X e Y che utilizzerai per posizionarli.
• o si crea un Panel personalizzato, probabilmente basato su Canvas, che è in grado di convertire il proprio sistema di coordinate personalizzato (ad esempio nome nota + numero di ottava) in X e Y. Un po 'più difficile ma molto più riutilizzabile. Un esempio di Custom Panel on CodeProject.

Answer 2

HexGrid: CodeProject article

HexGrid: GitHub repository

Il componente chiave di una possibile soluzione è un pannello che può organizzare WPF elementi esagonali (pannelli standard funzionano con elementi figlio rettangolari). Dai un'occhiata al mio progetto HexGrid (troppo grande per postare qui). La parte centrale di questo è un HexGrid (WPF Panel che organizza elementi figlio in uno schema a nido d'ape). Gli elementi secondari sono rappresentati da HexItem s (ContentControls a forma di esagono). C'è anche HexList (selector ItemsControl che visualizza gli elementi nel contenitore HexItem su un pannello HexGrid) che fornisce il supporto per la selezione esadecimale out-of-box.

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>