Ist es leicht möglich, einen Rand und / oder eine Auffüllung für Zeilen oder Spalten in einem WPF-Raster anzugeben?
Ich könnte natürlich zusätzliche Spalten hinzufügen, um Dinge auszuräumen , aber dies scheint ein Job für Auffüllen / Ränder zu sein (es wird viel einfacheres XAML geben). Hat jemand aus dem Standard-Grid abgeleitet, um diese Funktionalität hinzuzufügen?
Antworten:
Sie können Ihre eigene
GridWithMargin
Klasse schreiben , von der geerbt wirdGrid
, und dieArrangeOverride
Methode zum Anwenden der Ränder überschreibenquelle
RowDefinition
undColumnDefinition
sind vom TypContentElement
undMargin
sind ausschließlich eineFrameworkElement
Eigenschaft. Auf Ihre Frage "Ist es leicht möglich?" Lautet die Antwort mit einem eindeutigen Nein. Und nein, ich habe keine Layout-Panels gesehen, die diese Art von Funktionalität demonstrieren.Sie können wie vorgeschlagen zusätzliche Zeilen oder Spalten hinzufügen. Sie können aber auch Ränder für ein
Grid
Element selbst oder für alles festlegen, was in ein Element passt. DiesGrid
ist Ihre derzeit beste Problemumgehung.quelle
Verwenden Sie ein
Border
Steuerelement außerhalb des Zellensteuerelements und definieren Sie die Auffüllung dafür:Quelle:
quelle
Sie könnten so etwas verwenden:
Oder wenn Sie die TemplateBindings nicht benötigen:
quelle
Ich dachte, ich würde meine eigene Lösung hinzufügen, weil dies noch niemand erwähnt hat. Anstatt ein UserControl basierend auf Grid zu entwerfen, können Sie Steuerelemente, die in Grid enthalten sind, mit einer Stildeklaration als Ziel festlegen. Kümmert sich um das Hinzufügen von Auffüllungen / Rändern zu allen Elementen, ohne dass für jedes Element eine Definition erforderlich ist. Dies ist umständlich und arbeitsintensiv. Wenn Ihr Raster beispielsweise nur TextBlocks enthält, können Sie Folgendes tun:
Welches ist wie das Äquivalent von "Cell Padding".
quelle
Margin
Eigenschaft, es ist so, dass jedesStyle
in einemResourceDictionary
Testament für jedes Element vonTargetType
überall im gesamten Bereich des Eigentümerelements dieses Wörterbuchs gilt. Es ist also dasStyle
, was rieselt, nicht das Eigentum.Das ist nicht besonders schwierig. Ich kann nicht sagen, wie schwierig es 2009 war, als die Frage gestellt wurde, aber das war es dann.
Beachten Sie, dass, wenn Sie bei Verwendung dieser Lösung explizit einen Rand direkt für ein untergeordnetes Element des Rasters festlegen, dieser Rand im Designer angezeigt wird, jedoch nicht zur Laufzeit.
Diese Eigenschaft kann auf Grid, StackPanel, WrapPanel, UniformGrid oder jeden anderen Nachkommen von Panel angewendet werden. Es betrifft unmittelbare Kinder. Es wird davon ausgegangen, dass Kinder das Layout ihrer eigenen Inhalte verwalten möchten.
PanelExt.cs
Demo:
MainWindow.xaml
MainWindow.xaml.cs
quelle
build
oderrun
bevor die Live-Vorschau angezeigt werden kann? Gut und einfach. 1 auf.Ich bin kürzlich bei der Entwicklung von Software auf dieses Problem gestoßen und habe gefragt, warum? Warum haben sie das getan ... die Antwort war genau dort vor mir. Eine Datenzeile ist ein Objekt. Wenn wir also die Objektorientierung beibehalten, sollte das Design für eine bestimmte Zeile getrennt sein (vorausgesetzt, Sie müssen die Zeilenanzeige später in der Zukunft wiederverwenden). Daher habe ich begonnen, datengebundene Stapelfenster und benutzerdefinierte Steuerelemente für die meisten Datenanzeigen zu verwenden. Gelegentlich werden Listen angezeigt, aber meistens wurde das Raster nur für die primäre Seitenorganisation verwendet (Kopfzeile, Menübereich, Inhaltsbereich, Andere Bereiche). Ihre benutzerdefinierten Objekte können problemlos alle Abstandsanforderungen für jede Zeile innerhalb des Stapelbedienfelds oder Rasters verwalten (eine einzelne Rasterzelle kann das gesamte Zeilenobjekt enthalten. Dies hat auch den zusätzlichen Vorteil, dass Sie ordnungsgemäß auf Änderungen der Ausrichtung reagieren können.
oder
Ihre benutzerdefinierten Steuerelemente erben auch den DataContext, wenn Sie Datenbindung verwenden ... mein persönlicher Lieblingsvorteil dieses Ansatzes.
quelle
ListView
Steuerelements imGridView
Modus zu erstellen , ohne jedoch vorzusehen, dass alle „RowObjects“ dieselbe Spaltenbreite haben. In Wirklichkeit hat es nicht mehr viel mit einem Grid zu tun.in uwp (Windows10FallCreatorsUpdate-Version und höher)
quelle
Xamarin.Forms
.Bearbeitet:
Um einem Steuerelement einen Spielraum zu geben, können Sie das Steuerelement mit einem solchen Rahmen umschließen
quelle
Ich habe es gerade mit einem meiner Gitter gemacht.
quelle
Eine Möglichkeit wäre, Zeilen und Spalten mit fester Breite hinzuzufügen, um als Auffüllung / Rand zu fungieren, den Sie suchen.
Sie können auch berücksichtigen, dass Sie durch die Größe Ihres Containers eingeschränkt sind und dass ein Raster so groß wird wie das enthaltende Element oder die angegebene Breite und Höhe. Sie können einfach Spalten und Zeilen ohne festgelegte Breite oder Höhe verwenden. Auf diese Weise wird standardmäßig der gesamte Raum innerhalb des Rasters gleichmäßig aufgeteilt. Dann wäre es nur eine Sache, Ihre Elemente vertikal und horizontal innerhalb Ihres Gitters zu zentrieren.
Eine andere Methode könnte darin bestehen, alle Gitterelemente in ein festes Gitter mit einer einzelnen Zeile und Spalte zu verpacken, das eine feste Größe und einen festen Rand hat. Dass Ihr Raster Felder mit fester Breite / Höhe enthält, die Ihre tatsächlichen Elemente enthalten.
quelle
Ich hatte kürzlich ein ähnliches Problem in einem zweispaltigen Raster. Ich brauchte nur einen Rand für Elemente in der rechten Spalte. Alle Elemente in beiden Spalten waren vom Typ TextBlock.
quelle
Obwohl Sie einem Raster keinen Rand oder Abstand hinzufügen können, können Sie einen Rahmen (oder einen ähnlichen Container) verwenden, auf den Sie ihn anwenden können.
Auf diese Weise (wenn Sie das Steuerelement auf einem Schaltflächenklick ein- oder ausblenden) müssen Sie nicht für jedes Steuerelement, das mit ihm interagieren kann, einen Rand hinzufügen.
Stellen Sie sich vor, Sie isolieren die Gruppen von Steuerelementen in Einheiten und wenden dann Stil auf diese Einheiten an.
quelle
Wie bereits erwähnt, erstellen Sie eine GridWithMargins-Klasse. Hier ist mein Arbeitscodebeispiel
Verwendung:
quelle
Ich bin überrascht, dass ich diese Lösung noch nicht veröffentlicht habe.
Frameworks wie Bootstrap kommen aus dem Web und verwenden einen negativen Rand, um Zeilen / Spalten zurückzuziehen.
Es könnte ein wenig ausführlich sein (wenn auch nicht so schlimm), es funktioniert und die Elemente sind gleichmäßig verteilt und bemessen.
Im folgenden Beispiel verwende ich eine
StackPanel
Wurzel, um zu demonstrieren, wie die 3 Schaltflächen mithilfe von Rändern gleichmäßig verteilt sind. Sie können auch andere Elemente verwenden. Ändern Sie einfach den inneren x: Typ von der Schaltfläche in Ihr Element.Die Idee ist einfach: Verwenden Sie ein Raster an der Außenseite, um die Ränder von Elementen um die Hälfte des inneren Rasters (unter Verwendung negativer Ränder) aus ihren Grenzen herauszuziehen. Verwenden Sie das innere Raster, um die Elemente gleichmäßig mit dem gewünschten Betrag zu platzieren.
Update: Einige Kommentare eines Benutzers sagten, dass es nicht funktioniert. Hier ist ein kurzes Video, das zeigt: https://youtu.be/rPx2OdtSOYI
quelle
Manchmal ist die einfache Methode die beste. Füllen Sie einfach Ihre Saiten mit Leerzeichen. Wenn es sich nur um wenige Textfelder usw. handelt, ist dies bei weitem die einfachste Methode.
Sie können auch einfach leere Spalten / Zeilen mit einer festen Größe einfügen. Sehr einfach und Sie können es leicht ändern.
quelle