六角形のグリッドを作成する

Question

<！> quot; grid <！> quot;このように：

ハーモニックテーブル

ListViewをItemsSource="List<Note>"で作成しようとしていますが、リスト内の奇妙な音符はすべて下に移動されます...

<=>は正しいコントロールですか？

次のオブジェクトの近くにある面で正確な六角形を描画するにはどうすればよいですか？

編集：六角形の描画が解決されました...これは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

アイテムを選択する必要がある場合、メモのコンテナはItemsControlまたはListBoxになります。次に、六角形の描画を含むListBox.ItemTemplateを使用して、アイテムにテンプレートを与えます。 カスタムリストボックスレイアウトに関する素晴らしいチュートリアルがあります。

この時点で、リストボックスがデフォルトで表示されるように、六角形は上下に表示されます。特別なレイアウトを取得するには、ListBox.ItemPanelを変更する必要があります。ここには2つの可能性があります：

• 絶対配置をサポートするCanvasパネルを使用します。この場合、アイテムには、配置に使用するXプロパティとYプロパティが必要です。
• またはおそらくPanelに基づいたカスタム<=>を作成し、カスタム座標系（たとえば、音名+オクターブ番号）をXとYに変換できます。もう少し難しいが、はるかに再利用可能。 CodeProjectのカスタムパネルの例。

Answer 2

HexGrid：CodeProjectの記事

HexGrid：GitHubリポジトリ

可能なソリューションの重要なコンポーネントは、六角形の要素を配置できるWPFパネルです（標準パネルは長方形の子要素で動作します）。 HexGridプロジェクトを見てください（大きすぎてここに投稿できません）。その中央部分はHexGrid（子要素をハニカムパターンに配置するWPF Panel）です。子要素はHexItem s（六角形のContentControls）で表されます。すぐに使用可能な16進選択サポートを提供するHexList（HexGridパネルのHexItemコンテナーに項目を表示するセレクターItemsControl）もあります。

使用例：

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