WPF: Grid mit Spalte/Zeilenabstand/Rand?

Question

Ist es einfach möglich, in einem WPF-Raster einen Rand und/oder Abstand für Zeilen oder Spalten anzugeben?

Ich könnte natürlich zusätzliche Spalten hinzufügen, um Dinge zu trennen, aber das scheint eine Aufgabe für Padding/Margins zu sein (es wird das XAML viel einfacher machen). Hat jemand vom Standard-Raster abgeleitet, um diese Funktionalität hinzuzufügen?

Answer 1

RowDefinition und ColumnDefinition sind vom Typ ContentElement, und Margin ist streng genommen eine Eigenschaft von FrameworkElement. Also auf deine Frage, "ist es einfach möglich", ist die Antwort ein klares Nein. Und nein, ich habe keine Layout-Panels gesehen, die diese Art von Funktionalität demonstrieren.

Sie können zusätzliche Zeilen oder Spalten hinzufügen, wie Sie vorgeschlagen haben. Sie können jedoch auch Margins auf einem Grid-Element selbst setzen oder auf alles, was innerhalb eines Grid stehen würde, das ist also der beste Workaround im Moment.

Answer 2

Verwenden Sie eine Border-Steuerung außerhalb der Zellensteuerung und definieren Sie die Polsterung dafür:

                <Setter Property="Padding" Value="5,5,5,5" />

Quelle:

• Ursprüngliche Quelle
• und aus der Way Back Machine

Answer 3

Sie könnten etwas wie das verwenden:

  <Setter Property="Padding" Value="4" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type DataGridCell}">
        <Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
          <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</code></pre>

<p></p>

<p>Oder wenn Sie die TemplateBindings nicht benötigen:</p>

<pre><code><Style TargetType="{x:Type DataGridCell}">
   <Setter Property="Template">
      <Setter.Value>
          <ControlTemplate TargetType="{x:Type DataGridCell}">
              <Border Padding="4">
                  <ContentPresenter />
              </Border>
          </ControlTemplate>
      </Setter.Value>
  </Setter>

Answer 4

Ich dachte, ich würde meine eigene Lösung hinzufügen, weil noch niemand dies erwähnt hat. Anstatt ein UserControl basierend auf Grid zu entwerfen, können Sie Steuerelemente, die in einem Raster enthalten sind, mit einer Style-Deklaration ansprechen. Es kümmert sich darum, Padding/Margin zu allen Elementen hinzuzufügen, ohne sie für jedes einzelne definieren zu müssen, was umständlich und arbeitsintensiv ist. Wenn Ihr Raster beispielsweise nur TextBlocks enthält, können Sie Folgendes tun:

    <Setter Property="Margin" Value="10"/>

Was dem Äquivalent von "Zellenpadding" entspricht.

Answer 5

Ich bin überrascht, dass ich diese Lösung noch nicht gepostet gesehen habe.

Aus dem Web kommend, verwenden Frameworks wie Bootstrap einen negativen Rand, um Zeilen/Spalten zurückzuziehen.

Es mag etwas ausführlich sein (wenn auch nicht so schlimm), aber es funktioniert und die Elemente sind gleichmäßig platziert und dimensioniert.

Im folgenden Beispiel verwende ich eine StackPanel root, um zu demonstrieren, wie die 3 Schaltflächen gleichmäßig platziert sind, indem ich Ränder verwende. Sie könnten auch andere Elemente verwenden, ändern Sie einfach den inneren x:Type von Button zu Ihrem Element.

Die Idee ist einfach: Verwenden Sie ein Raster nach außen, um die Ränder der Elemente um die Hälfte der inneren Menge des Rasters hinauszuziehen (unter Verwendung negativer Ränder), und verwenden Sie das innere Raster, um die Elemente gleichmäßig mit der gewünschten Menge zu platzieren.

Update: Ein Benutzerkommentar besagt, dass es nicht funktioniert, hier ist ein kurzes Video zur Demonstration: https://youtu.be/rPx2OdtSOYI

                    <Setter Property="Margin" Value="-5 0"/>

                        <Setter Property="Margin" Value="10 0"/>