Erstellen von Raster von Hexagone

Question

Ich habe ein „Gitter“, wie dies zu tun:

Harmonic Tabelle

Ich versuche, einen ListView mit ItemsSource="List<Note>" zu schaffen, wo jede ungeradeen Notiz in der Liste auf dem Boden bewegt wird ...

Ist das ListView die richtige Kontrolle?

Wie kann ich eine genaue Sechseck mit Gesichtern zeichnen, die in der Nähe nächstes Objekt ist?

EDIT: Sechseck Zeichnung gelöst ist ... das ist die 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

Der Behälter für Ihre Notizen wäre ein ItemsControl oder ein ListBox, wenn Sie Elemente auswählen müssen. Dann geben Sie Ihre Artikel eine Vorlage ListBox.ItemTemplate mit dem Sie Ihre Sechseck Zeichnung enthalten. Sie haben ein nettes Tutorial auf Benutzerdefinierte List-Box Layout .

An diesem Punkt sind Ihre Hexagone untereinander angezeigt, wie ein List-Box standardmäßig der Fall ist. Um Ihr spezielles Layout zu erhalten, müssen Sie die ListBox.ItemPanel ändern. Hier haben Sie zwei Möglichkeiten:

• Sie entweder verwenden, um die Canvas Panel, das absolute Positionierung unterstützt. In diesem Fall müssen Sie Ihre Artikel X- und Y-Eigenschaften haben, dass Sie sie auf Position verwenden werden.
• oder Sie eine benutzerdefinierte Panel erstellen, wahrscheinlich auf Canvas, dass in der Lage, Ihre benutzerdefiniertes Koordinatensystem zu konvertieren (zB Notennamen + Oktave) in X und Y ein bisschen schwieriger, aber viel mehr wiederverwendbar. Ein Beispiel für benutzerdefinierte Bedienfelder auf Codeproject .

Answer 2

Hexgrid: Codeproject Artikel

Hexgrid: GitHub-Repository

Die Schlüsselkomponente einer möglichen Lösung ist ein WPF-Panel, die hexagonalen Elemente (Standard Panels arbeitet mit rechteckigen Kind-Elementen) anordnen kann. Schauen Sie meine Hexgrid Projekt (zu groß, um hier zu schreiben). Der cental Teil davon ist ein HexGrid (WPF Panel die Kind-Elemente in einem Wabenmuster anordnet). Child-Elemente werden durch HexItems (Sechseck-förmigen ContentControls) dargestellt. Es gibt auch HexList (Selektor Itemscontrol, welche Elemente in HexItem Container auf einem Hexgrid TFTs), die out-of-Box-Hex-Auswahl Unterstützung gibt.

Beispiel für die Verwendung:

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