WPF: ¿Cuadrícula con margen de columna / fila / relleno?

¿Es fácilmente posible especificar un margen y / o relleno para filas o columnas en una cuadrícula WPF?

Por supuesto, podría agregar columnas adicionales para espaciar las cosas, pero esto parece un trabajo para rellenar / márgenes (dará XAML mucho más simple). ¿Alguien ha derivado de la cuadrícula estándar para agregar esta funcionalidad?

Puede escribir su propia GridWithMarginclase, heredada Gridy anular el ArrangeOverridemétodo para aplicar los márgenes.

RowDefinitiony ColumnDefinitionson de tipo ContentElement, y Margines estrictamente una FrameworkElementpropiedad. Entonces a su pregunta, "¿es fácilmente posible" la respuesta es un no definitivo. Y no, no he visto ningún panel de diseño que demuestre este tipo de funcionalidad.

Puede agregar filas o columnas adicionales como sugirió. Pero también puede establecer márgenes en un Gridelemento en sí mismo, o cualquier cosa que vaya dentro de un Grid, así que esa es su mejor solución por ahora.

Use un Bordercontrol fuera del control de celda y defina el relleno para eso:

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

Fuente:

• Fuente original
• y de Way Back Machine

Podrías usar algo como esto:

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

O si no necesita los TemplateBindings:

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

Pensé que agregaría mi propia solución porque aún nadie mencionó esto. En lugar de diseñar un UserControl basado en Grid, puede apuntar a controles contenidos en grid con una declaración de estilo. Se encarga de agregar relleno / margen a todos los elementos sin tener que definir para cada uno, lo cual es engorroso y requiere mucho trabajo. Por ejemplo, si su Grid no contiene más que TextBlocks, puede hacer esto:

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

Que es como el equivalente de "relleno de celda".

Esto no es terriblemente difícil. No puedo decir lo difícil que fue en 2009 cuando se hizo la pregunta, pero eso fue entonces.

Tenga en cuenta que si establece explícitamente un margen directamente en un elemento secundario de la cuadrícula cuando usa esta solución, ese margen aparecerá en el diseñador pero no en el tiempo de ejecución.

Esta propiedad se puede aplicar a Grid, StackPanel, WrapPanel, UniformGrid o cualquier otro descendiente del Panel. Afecta a los niños inmediatos. Se presume que los niños querrán administrar el diseño de sus propios contenidos.

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);
            }
        }
    }
}

Manifestación:

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));
    }
}

Me encontré con este problema mientras desarrollaba algún software recientemente y se me ocurrió preguntar ¿POR QUÉ? ¿Por qué han hecho esto? La respuesta estaba justo frente a mí. Una fila de datos es un objeto, por lo que si mantenemos la orientación del objeto, entonces el diseño de una fila en particular debe separarse (supongamos que necesita reutilizar la visualización de la fila más adelante en el futuro). Entonces comencé a usar paneles de pila de datos y controles personalizados para la mayoría de las pantallas de datos. Las listas han aparecido ocasionalmente, pero la cuadrícula se ha utilizado principalmente para la organización de la página principal (encabezado, área de menú, área de contenido, otras áreas). Sus objetos personalizados pueden administrar fácilmente cualquier requisito de espacio para cada fila dentro del panel de pila o la cuadrícula (una sola celda de cuadrícula puede contener todo el objeto de la fila. Esto también tiene el beneficio adicional de reaccionar adecuadamente a los cambios de orientación,

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

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

o

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

Sus controles personalizados también heredarán el DataContext si está utilizando el enlace de datos ... mi beneficio favorito personal de este enfoque.

en uwp (Windows10FallCreatorsUpdate versión y superior)

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

Editado:

Para dar margen a cualquier control, puede ajustar el control con un borde como este

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

Lo hice ahora con una de mis cuadrículas.

• Primero aplique el mismo margen a cada elemento dentro de la cuadrícula. Puedes hacer esto manualmente, usando estilos, o lo que quieras. Digamos que desea un espacio horizontal de 6px y un espacio vertical de 2px. Luego agrega márgenes de "3px 1px" a cada hijo de la cuadrícula.
• Luego, elimine los márgenes creados alrededor de la cuadrícula (si desea alinear los bordes de los controles dentro de la cuadrícula en la misma posición de la cuadrícula). Haga esto configurando un margen de "-3px -1px" a la cuadrícula. De esa manera, otros controles fuera de la cuadrícula se alinearán con los controles externos dentro de la cuadrícula.

Una posibilidad sería agregar filas y columnas de ancho fijo para que actúen como el relleno / margen que está buscando.

También puede considerar que está limitado por el tamaño de su contenedor y que una cuadrícula será tan grande como el elemento contenedor o su ancho y alto especificados. Simplemente puede usar columnas y filas sin ancho o alto establecido. De esa manera, se separan por defecto para dividir el espacio total dentro de la cuadrícula. Entonces sería una cuestión de centrar sus elementos vertical y horizontalmente dentro de su cuadrícula.

Otro método podría ser envolver todos los elementos de la cuadrícula en una cuadrícula fija con una sola fila y columna que tenga un tamaño y margen fijos. Que su cuadrícula contiene cuadros de ancho / alto fijos que contienen sus elementos reales.

Recientemente tuve un problema similar en la cuadrícula de dos columnas, necesitaba un margen en los elementos de la columna derecha solamente. Todos los elementos en ambas columnas eran del tipo 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>

Aunque no puede agregar margen o relleno a una Cuadrícula, puede usar algo como un Marco (o contenedor similar), al que puede aplicarlo.

De esa manera (si muestra u oculta el control en un botón, haga clic en decir), no necesitará agregar margen en cada control que pueda interactuar con él.

Piense en ello como aislando los grupos de controles en unidades, luego aplicando estilo a esas unidades.

Como se indicó antes, cree una clase GridWithMargins. Aquí está mi ejemplo de código de trabajo

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

Uso:

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

Me sorprende no haber visto esta solución publicada todavía.

Viniendo de la web, los marcos como bootstrap usarán un margen negativo para retirar filas / columnas.

Puede ser un poco detallado (aunque no es tan malo), funciona y los elementos están espaciados y dimensionados de manera uniforme.

En el siguiente ejemplo, uso un StackPanel raíz para demostrar cómo los 3 botones están espaciados uniformemente usando márgenes. Podrías usar otros elementos, solo cambia el x: Type interno del botón a tu elemento.

La idea es simple: use una cuadrícula en el exterior para sacar los márgenes de los elementos de sus límites a la mitad de la cantidad de la cuadrícula interna (usando márgenes negativos), use la cuadrícula interna para espaciar uniformemente los elementos con la cantidad que desee.

Actualización: Algunos comentarios de un usuario dicen que no funciona, aquí hay un video rápido que demuestra: 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>

A veces el método simple es el mejor. Simplemente rellena tus cuerdas con espacios. Si solo se trata de unos pocos cuadros de texto, etc., este es, con mucho, el método más simple.

También puede simplemente insertar columnas / filas en blanco con un tamaño fijo. Extremadamente simple y puedes cambiarlo fácilmente.