WPF: Gitter mit Spalten- / Zeilenrand / Auffüllung?

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?

Sie können Ihre eigene GridWithMarginKlasse schreiben , von der geerbt wird Grid, und die ArrangeOverrideMethode zum Anwenden der Ränder überschreiben

RowDefinitionund ColumnDefinitionsind vom Typ ContentElementund Marginsind ausschließlich eine FrameworkElementEigenschaft. 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 GridElement selbst oder für alles festlegen, was in ein Element passt. Dies Gridist Ihre derzeit beste Problemumgehung.

Verwenden Sie ein BorderSteuerelement außerhalb des Zellensteuerelements und definieren Sie die Auffüllung dafür:

    <Grid>
        <Grid.Resources >
            <Style TargetType="Border" >
                <Setter Property="Padding" Value="5,5,5,5" />
            </Style>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Grid.Column="0">
            <YourGridControls/>
        </Border>
        <Border Grid.Row="1" Grid.Column="0">
            <YourGridControls/>
        </Border>

    </Grid>

Quelle:

• Originalquelle
• und von Way Back Machine

Sie könnten so etwas verwenden:

<Style TargetType="{x:Type DataGridCell}">
  <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>

Oder wenn Sie die TemplateBindings nicht benötigen:

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

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:

<Style TargetType="{x:Type TextBlock}">
    <Setter Property="Margin" Value="10"/>
</Style>

Welches ist wie das Äquivalent von "Cell Padding".

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

public static class PanelExt
{
    public static Thickness? GetChildMargin(Panel obj)
    {
        return (Thickness?)obj.GetValue(ChildMarginProperty);
    }

    public static void SetChildMargin(Panel obj, Thickness? value)
    {
        obj.SetValue(ChildMarginProperty, value);
    }

    /// <summary>
    /// Apply a fixed margin to all direct children of the Panel, overriding all other margins.
    /// Panel descendants include Grid, StackPanel, WrapPanel, and UniformGrid
    /// </summary>
    public static readonly DependencyProperty ChildMarginProperty =
        DependencyProperty.RegisterAttached("ChildMargin", typeof(Thickness?), typeof(PanelExt),
            new PropertyMetadata(null, ChildMargin_PropertyChanged));

    private static void ChildMargin_PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var target = d as Panel;

        target.Loaded += (s, e2) => ApplyChildMargin(target, (Thickness?)e.NewValue);

        ApplyChildMargin(target, (Thickness?)e.NewValue);
    }

    public static void ApplyChildMargin(Panel panel, Thickness? margin)
    {
        int count = VisualTreeHelper.GetChildrenCount(panel);

        object value = margin.HasValue ? margin.Value : DependencyProperty.UnsetValue;

        for (var i = 0; i < count; ++i)
        {
            var child = VisualTreeHelper.GetChild(panel, i) as FrameworkElement;

            if (child != null)
            {
                child.SetValue(FrameworkElement.MarginProperty, value);
            }
        }
    }
}

Demo:

MainWindow.xaml

<Grid
    local:PanelExt.ChildMargin="2"
    x:Name="MainGrid"
    >
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Rectangle Width="100" Height="40" Fill="Red" Grid.Row="0" Grid.Column="0" />
    <Rectangle Width="100" Height="40" Fill="Green" Grid.Row="1" Grid.Column="0" />
    <Rectangle Width="100" Height="40" Fill="Blue" Grid.Row="1" Grid.Column="1" />

    <Button Grid.Row="2" Grid.Column="0" Click="NoMarginClick">No Margin</Button>
    <Button Grid.Row="2" Grid.Column="1" Click="BigMarginClick">Big Margin</Button>
    <ComboBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" />
</Grid>

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void NoMarginClick(object sender, RoutedEventArgs e)
    {
        //  In real life, if we wanted to change PanelExt.ChildMargin at runtime, we 
        //  would prefer to bind it to something, probably a dependency property of 
        //  the view. But this will do for a demonstration. 
        PanelExt.SetChildMargin(MainGrid, null);
    }
    private void BigMarginClick(object sender, RoutedEventArgs e)
    {
        PanelExt.SetChildMargin(MainGrid, new Thickness(20));
    }
}

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.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
  </Grid.RowDefinitions>

  <custom:MyRowObject Style="YourStyleHereOrGeneralSetter" Grid.Row="0" />
  <custom:MyRowObject Style="YourStyleHere" Grid.Row="1" />
</Grid>

oder

<StackPanel>
  <custom:MyRowObject Style="YourStyleHere" Grid.Row="0" />
  <custom:MyRowObject Style="YourStyleHere" Grid.Row="1" />
</StackPanel>

Ihre benutzerdefinierten Steuerelemente erben auch den DataContext, wenn Sie Datenbindung verwenden ... mein persönlicher Lieblingsvorteil dieses Ansatzes.

in uwp (Windows10FallCreatorsUpdate-Version und höher)

<Grid RowSpacing="3" ColumnSpacing="3">

Bearbeitet:

Um einem Steuerelement einen Spielraum zu geben, können Sie das Steuerelement mit einem solchen Rahmen umschließen

<!--...-->
    <Border Padding="10">
            <AnyControl>
<!--...-->

Ich habe es gerade mit einem meiner Gitter gemacht.

• Wenden Sie zunächst auf jedes Element im Raster den gleichen Rand an. Sie können dies manuell tun, indem Sie Stile verwenden oder was auch immer Sie möchten. Nehmen wir an, Sie möchten einen horizontalen Abstand von 6 Pixel und einen vertikalen Abstand von 2 Pixel. Dann fügen Sie jedem untergeordneten Element des Rasters Ränder von "3px 1px" hinzu.
• Entfernen Sie dann die Ränder, die um das Raster erstellt wurden (wenn Sie die Ränder der Steuerelemente innerhalb des Rasters an derselben Position des Rasters ausrichten möchten). Stellen Sie dazu einen Rand von "-3px -1px" für das Raster ein. Auf diese Weise werden andere Steuerelemente außerhalb des Rasters an den äußersten Steuerelementen innerhalb des Rasters ausgerichtet.

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.

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.

<Grid.Resources>
    <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource OurLabelStyle}">
        <Style.Triggers>
            <Trigger Property="Grid.Column" Value="1">
                <Setter Property="Margin" Value="20,0" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Grid.Resources>

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.

Wie bereits erwähnt, erstellen Sie eine GridWithMargins-Klasse. Hier ist mein Arbeitscodebeispiel

public class GridWithMargins : Grid
{
    public Thickness RowMargin { get; set; } = new Thickness(10, 10, 10, 10);
    protected override Size ArrangeOverride(Size arrangeSize)
    {
        var basesize = base.ArrangeOverride(arrangeSize);

        foreach (UIElement child in InternalChildren)
        {
            var pos = GetPosition(child);
            pos.X += RowMargin.Left;
            pos.Y += RowMargin.Top;

            var actual = child.RenderSize;
            actual.Width -= (RowMargin.Left + RowMargin.Right);
            actual.Height -= (RowMargin.Top + RowMargin.Bottom);
            var rec = new Rect(pos, actual);
            child.Arrange(rec);
        }
        return arrangeSize;
    }

    private Point GetPosition(Visual element)
    {
        var posTransForm = element.TransformToAncestor(this);
        var areaTransForm = posTransForm.Transform(new Point(0, 0));
        return areaTransForm;
    }
}

Verwendung:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <local:GridWithMargins ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
            <Rectangle Fill="Green" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
            <Rectangle Fill="Blue" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        </local:GridWithMargins>
    </Grid>
</Window>

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

    <StackPanel>
        <Grid>
            <Grid.Resources>
                <Style TargetType="{x:Type Grid}">
                    <Setter Property="Margin" Value="-5 0"/>
                </Style>
            </Grid.Resources>

            <Grid>
                <Grid.Resources>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Margin" Value="10 0"/>
                    </Style>
                </Grid.Resources>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Button Grid.Column="0" Content="Btn 1" />
                <Button Grid.Column="1" Content="Btn 2" />
                <Button Grid.Column="2" Content="Btn 3" />
            </Grid>

        </Grid>

        <TextBlock FontWeight="Bold" Margin="0 10">
            Test
        </TextBlock>
    </StackPanel>

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.