إنشاء شبكة من السداسي

Question

يجب أن "الشبكة" مثل هذا:

متناسق الجدول

أحاول خلق ListView مع ItemsSource="List<Note>" حيث كل غريب ملاحظة في قائمة نقل على القاع...

هو ListView حق السيطرة ؟

كيف يمكنني رسم دقيق مسدس مع الوجوه التي هي بالقرب من كائن ؟

تحرير: مسدس الرسم حلها...هذا هو 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 لا افتراضيا.الحصول على الخاص بك تخطيط لديك لتغيير ListBox.ItemPanel.هنا لديك احتمالين:

• إما استخدام Canvas الفريق الذي يدعم المواقع المطلق.في هذه الحالة البنود الخاصة بك يجب أن يكون X و Y الخصائص التي سوف تستخدم الموقف منها.
• أو يمكنك إنشاء مخصص Panel, ربما على أساس Canvas, التي هي قادرة على تحويل مخصص تنسيق النظام (على سبيل المثال ملاحظة اسم + رقم اوكتاف) في X و Y.قليلا أكثر صعوبة ولكن أكثر من ذلك بكثير لإعادة الاستخدام.مثال لوحة مخصصة على CodeProject.

Answer 2

HexGrid:CodeProject المادة

HexGrid:GitHub

المكون الرئيسي من حل ممكن هو WPF الفريق الذي يمكن أن ترتيب عناصر سداسية (لوحات قياسية تعمل مع مستطيلة عناصر الطفل).نلقي نظرة على بلدي HexGrid المشروع (كبيرة جدا للنشر هنا).فإن المركزى جزء منه هو HexGrid (WPF Panel الذي يرتب الطفل العناصر في نمط العسل).الطفل العناصر الممثلة HexItems (على شكل مسدس ContentControls).هناك أيضا HexList (محدد ItemsControl الذي يعرض البنود في HexItem الحاوية على HexGrid الفريق) الذي يعطي عرافة مجموعة الدعم الخروج من مربع.

مثال على الاستخدام:

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