Gibt es eine Möglichkeit, Elemente mit unterschiedlicher Breite in wpf wrappanel anzuzeigen
Ich probiere etwas wie eine Windows 8-Kacheln und möchte Kacheln unterschiedlicher Breite und / oder Höhe anzeigen. WrapPanel bewirkt, dass jede Spalte die gleiche Breite und Höhe aufweist, wobei Leerräume um die kleineren Elemente herum verbleiben. Gibt es einen Weg oder ein Panel, um Artikel ähnlich einem StackPanel anzuzeigen, wobei jedes Element individuelle Dimensionen haben kann und wie ein WrapPanel umgebrochen werden kann?
Bearbeiten:
Das ist mein ItemsControl . Ich habe die Tile DataTemplate durch eine einfache Border und TextBlock ersetzt. Die Breite ist auto und Tiles sieht gut aus, außer WrapPanel erstellt Zellen gleicher Größe.
Sie können aus dem Bild sehen, dass der width jeder Spalte die Breite des breitesten Elements ist.
Wenn ich die Breite explizit auf die Grenze einstelle, werden die Dinge hässlicher.
1 Antwort
Das Verhalten, nach dem Sie suchen, ist das Standardverhalten von WrapPanel , wie aus dem folgenden Beispiel hervorgeht.
Was zu folgendem Ergebnis führt:
Wie Sie sehen können, wird die Breite jedes Elements berücksichtigt.
Ihr Problem wird dadurch verursacht, dass Sie die Ausrichtung von WrapPanel auf Vertical in Ihrer Vorlage festlegen. Dadurch werden die Elemente von oben nach unten und nicht von links nach rechts angeordnet, was bedeutet, dass die Eigenschaft Height eingestellt werden muss (oder Sie können wie in meinem Beispiel zum horizontalen Layout zurückkehren).
Vergleichen Sie Ihre Ausgabe mit meinem Screenshot, wo das Panel auf horizontale Ausrichtung eingestellt ist; Jede Zeile ist die Größe der höchsten Rectangle . Glaub mir nicht? Versuchen Sie, eine der Rectangle's Height -Eigenschaft auf einen größeren Wert festzulegen, und Sie werden feststellen, dass die Zeilengröße zunimmt und die Rectangles nicht mehr vertikal ausgerichtet wird.
Lesen Sie Ihre Kommentare Ich denke, der beste Weg, um zu beginnen, ist Folgendes zu tun:
- Ein
WrapPanel, das seinen Inhalt horizontal darstellt. - Elemente sollten einheitliche
Heighthaben. - Beschränken Sie
HeightvonWrapPanelauf eine bestimmte Größe, damit Sie keine vertikalen Bildlaufleisten erhalten.
Die Höhe von WrapPanel sollte mit der folgenden Formel berechnet werden:
((Höhe des Artikels + Oberer Rand + Unterer Rand) x Anzahl der Zeilen))
Die Breite jedes Gegenstandes erfordert auch ein wenig Nachdenken, damit das Paneel die Gegenstände wie die U-Bahn-Schnittstelle horizontal ausbreitet (aufgereiht statt gestaffelt).
Es gibt zwei Kachelgrößen; der kleine ist 80px breit und der große ist 166px breit. Die Breite der großen Kachel wird folgendermaßen berechnet:
(Gegenstandsbreite * 2) + (linker Rand + rechter Rand)
Dies stellt sicher, dass die Kacheln korrekt ausgerichtet sind.
Nun sieht mein XAML ungefähr so aus:
%Vor%Was zu folgendem Ergebnis führt:
Dies sollte Ihnen genug Informationen geben, um zu beginnen, dies in eine vollständige Kontrolle zu re-Faktor. Wenn Sie dies tun, beachten Sie Folgendes:
- Die Layout-Eigenschaften (kleine Artikelgröße, große Artikelgröße, Lücken usw.) sollten eher berechnet als hart codiert werden, damit, wenn Sie beispielsweise die Ränder ändern wollen, das Layout immer noch korrekt funktioniert (IE die Kacheln) Line-Up).
- Ich würde die Anzahl der "Kacheln" begrenzen, die angezeigt werden können (im aktuellen Beispiel, wenn die Kacheln nicht in das Layout passen, werden sie einfach versteckt, was wahrscheinlich nicht das ist, was Sie wollen).