WPF: griglia con margine colonna / riga / riempimento?

È possibile specificare facilmente un margine e / o un'imbottitura per righe o colonne in una griglia WPF?

Ovviamente potrei aggiungere colonne extra per sistemare le cose, ma questo sembra un lavoro per il riempimento / i margini (darà XAML molto più semplice). Qualcuno è derivato dalla griglia standard per aggiungere questa funzionalità?

È possibile scrivere la propria GridWithMarginclasse, ereditata da Gride sovrascrivere il ArrangeOverridemetodo per applicare i margini

RowDefinitione ColumnDefinitionsono di tipo ContentElemented Marginè rigorosamente una FrameworkElementproprietà. Quindi, alla tua domanda, "è facilmente possibile" la risposta è un no assolutamente definito. E no, non ho visto pannelli di layout che dimostrino questo tipo di funzionalità.

Puoi aggiungere righe o colonne extra come da te suggerito. Ma puoi anche impostare i margini su un Gridelemento stesso o su qualsiasi cosa possa andare all'interno di un Grid, quindi per ora è la soluzione migliore.

Utilizzare un Bordercontrollo esterno al controllo cella e definire il riempimento per quello:

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

Fonte:

• Fonte originale
• e da Way Back Machine

Puoi usare qualcosa del genere:

<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 se non hai bisogno di 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>

Ho pensato di aggiungere la mia soluzione perché nessuno lo aveva ancora menzionato. Invece di progettare un UserControl basato su Grid, puoi indirizzare i controlli contenuti nella griglia con una dichiarazione di stile. Si prende cura di aggiungere riempimento / margine a tutti gli elementi senza dover definire per ciascuno, che è ingombrante e ad alta intensità di lavoro. Ad esempio, se la tua griglia non contiene altro che TextBlocks, puoi farlo:

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

Che è come l'equivalente di "imbottitura cellulare".

Questo non è tremendamente difficile. Non posso dire quanto sia stato difficile nel 2009 quando è stata posta la domanda, ma è stato allora.

Si noti che se si imposta esplicitamente un margine direttamente su un figlio della griglia quando si utilizza questa soluzione, tale margine verrà visualizzato nella finestra di progettazione ma non in fase di esecuzione.

Questa proprietà può essere applicata a Grid, StackPanel, WrapPanel, UniformGrid o qualsiasi altro discendente di Panel. Colpisce i bambini immediati. Si presume che i bambini vorranno gestire il layout dei propri contenuti.

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

Ho riscontrato questo problema durante lo sviluppo di alcuni software di recente e mi è venuto in mente di chiedere PERCHÉ? Perché l'hanno fatto ... la risposta era proprio lì davanti a me. Una riga di dati è un oggetto, quindi se manteniamo l'orientamento dell'oggetto, allora il design per una particolare riga dovrebbe essere separato (supponiamo che tu debba riutilizzare la visualizzazione della riga in futuro). Così ho iniziato a utilizzare pannelli stack databound e controlli personalizzati per la maggior parte dei display di dati. Gli elenchi sono comparsi occasionalmente, ma principalmente la griglia è stata utilizzata solo per l'organizzazione della pagina principale (intestazione, area menu, area contenuto, altre aree). I tuoi oggetti personalizzati possono gestire facilmente qualsiasi requisito di spaziatura per ogni riga all'interno del pannello dello stack o della griglia (una singola cella della griglia può contenere l'intero oggetto riga. Ciò ha anche il vantaggio aggiuntivo di reagire correttamente ai cambiamenti di orientamento,

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

I controlli personalizzati erediteranno anche DataContext se si utilizza l'associazione dati ... il mio vantaggio personale preferito di questo approccio.

in uwp (Windows 10FallCreatorsVersione versione e successive)

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

Modificato:

Per dare margine a qualsiasi controllo puoi avvolgere il controllo con un bordo come questo

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

L'ho fatto proprio ora con una delle mie griglie.

• Prima applica lo stesso margine a ogni elemento all'interno della griglia. Puoi farlo manualmente, usando gli stili o quello che ti piace. Supponiamo che tu voglia una spaziatura orizzontale di 6px e una spaziatura verticale di 2px. Quindi aggiungi i margini di "3px 1px" a ogni figlio della griglia.
• Quindi rimuovere i margini creati intorno alla griglia (se si desidera allineare i bordi dei controlli all'interno della griglia nella stessa posizione della griglia). Effettuare questa impostazione di un margine di "-3px -1px" sulla griglia. In questo modo, altri controlli all'esterno della griglia verranno allineati con i controlli più esterni all'interno della griglia.

Una possibilità sarebbe quella di aggiungere righe e colonne a larghezza fissa che fungano da riempimento / margine che stai cercando.

Potresti anche considerare che sei vincolato dalle dimensioni del tuo contenitore e che una griglia diventerà grande quanto l'elemento contenitore o la sua larghezza e altezza specificate. Puoi semplicemente usare colonne e righe senza larghezza o altezza impostate. In questo modo, di default, suddividono uniformemente lo spazio totale all'interno della griglia. Quindi sarebbe solo una questione di centrare i tuoi elementi verticalmente e orizzontalmente all'interno della griglia.

Un altro metodo potrebbe essere quello di avvolgere tutti gli elementi della griglia in una griglia fissa con riga e colonna singola con dimensioni e margine fissi. Che la griglia contenga caselle di larghezza / altezza fisse che contengono gli elementi effettivi.

Recentemente ho avuto un problema simile nella griglia a due colonne, avevo bisogno di un margine sugli elementi solo nella colonna di destra. Tutti gli elementi in entrambe le colonne erano di 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>

Sebbene non sia possibile aggiungere margine o riempimento a una griglia, è possibile utilizzare qualcosa come una cornice (o un contenitore simile), a cui è possibile applicarla.

In questo modo (se mostri o nascondi il controllo su un pulsante fai clic, ad esempio), non dovrai aggiungere margine su ogni controllo che potrebbe interagire con esso.

Pensalo come isolare i gruppi di controlli in unità, quindi applicare lo stile a quelle unità.

Come indicato prima, creare una classe GridWithMargins. Ecco il mio esempio di codice funzionante

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>

Sono sorpreso di non aver ancora visto questa soluzione pubblicata.

Provenienti dal web, framework come bootstrap useranno un margine negativo per ritirare righe / colonne.

Potrebbe essere un po 'prolisso (anche se non così male), funziona e gli elementi sono equidistanti e dimensionati.

Nell'esempio seguente uso una StackPanelradice per dimostrare come i 3 pulsanti sono distribuiti uniformemente usando i margini. Puoi usare altri elementi, basta cambiare l'interno x: Type dal pulsante al tuo elemento.

L'idea è semplice, usa una griglia all'esterno per estrarre i margini degli elementi dai loro limiti di metà della quantità della griglia interna (usando i margini negativi), usa la griglia interna per spaziare uniformemente gli elementi con la quantità che desideri.

Aggiornamento: Alcuni commenti di un utente hanno detto che non funziona, ecco un breve video dimostrativo: 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 volte il metodo semplice è il migliore. Riempi le corde con spazi. Se sono solo poche caselle di testo ecc, questo è di gran lunga il metodo più semplice.

Puoi anche semplicemente inserire colonne / righe vuote con una dimensione fissa. Estremamente semplice e puoi cambiarlo facilmente.