[Solved] WPF: Grid with column/row margin/padding? (2023)

wpf grid padding margin

201,102

Solution 4

You could use something like this:

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

Or if you don't need the 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>

Solution 5

Thought I'd add my own solution because nobody yet mentioned this. Instead of designing a UserControl based on Grid, you can target controls contained in grid with a style declaration. Takes care of adding padding/margin to all elements without having to define for each, which is cumbersome and labor-intensive.For instance, if your Grid contains nothing but TextBlocks, you can do this:

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

Which is like the equivalent of "cell padding".

View more solutions

Comments

• 

  Larsi almost 2 years

  Is it easily possible to specify a margin and/or padding for rows or columns in a WPF Grid?

  I could of course add extra columns to space things out, but this seems like a job for padding/margins (it will give much simplier XAML). Has someone derived from the standard Grid to add this functionality?

  • 

    peter70 over 8 years

    One useful example you can find here: codeproject.com/Articles/107468/WPF-Padded-Grid

  • 

    uceumern about 4 years

    Kinda puzzled that this is not part of the Grid's baseline features...

  • 

    mins over 3 years

    As of today, demonstrated by 10 years of answers, the truth is it's not possible easily, and the best to be done (to avoid additional error prone work each time a cell is used) is to derive Grid (as suggested earlier by @peter70) to add the appropriate cell padding dependency property which will control the Margin property of the cell child. This is not a long task, and then you have got a reusable control. Side comment... Grid is really a poorly designed control.

• 

  Larsi over 11 years

  Thanks JayGee, however this solution is for the DataGrid - not the standard Grid control.

• 

  Larsi over 11 years

  Thanks Adam, however adding the extra columns/rows is exactly what I was attempting to avoid. I simply want to reduce my markup and being able to specify a margin or padding would help with this.

• 

  Adam Lenda over 11 years

  You only have to define the extra columns and rows, not add the mark up for them. For example, if you want to add N width between columns for 3 columns, you would have 5 column definitions. The first would be auto width, and the next fixed, then auto, then fixed, then auto. Then only assign columns 1, 3 and 5 to actual content elements. I see your point about the extra column markup, but unless you've got hundreds of elements, that seems trivial to me. your call though. Also, have you tried using a stack panel of stack panels with the margins set?

• 

  Envil about 7 years

  Apply the same margin to every element inside the grid seems to be the easiest way.

• 

  Nicolas Fall almost 6 years

  does this trickle down? for instance if you have a stackpanel in a grid row, does the stackpanel's textblock children inherit this property?

• 

  Admin almost 6 years

  Not sure if it trickles past immediate children, but you can find out with a simple test.

• 

  CJBS over 5 years

  @RichardEverett Check the Way Back Machine: link updated in answer.

• 

  Jamie Mellway over 5 years

  Throws System.ArgumentException: 'Width must be non-negative.' actual.Width -= Math.Min(actual.Width, RowMargin.Left + RowMargin.Right); actual.Height -= Math.Min(actual.Height, RowMargin.Top + RowMargin.Bottom);

• 

  Glenn Slayden about 5 years

  What you’ve attempted to do here is create a crude version of the WPF ListView control in GridView mode, but with no provision for making all the “RowObjects” share the same column width. In reality, it no longer has much to do with a Grid.

• 

  Glenn Slayden about 5 years

  @Maslow The answer is absolutely ‘Yes,’ but your wording a little misleading. There’s no “inheriting” of the Margin property going on, it’s that any Style in a ResourceDictionary will apply to every element of its TargetType everywhere within the entire scope of that dictionary’s owner element. So it’s the Style that trickles, not the property.

• 

  jchristof almost 5 years

  For my case adding a "splitter/margin" column was by far the cleanest and easiest. Thanks!

• 

  Admin over 4 years

  This also applies with Xamarin.Forms.

• 

  Mark over 4 years

  Probably because it's not a very good method. Using spaces might be the "easy way out", but it's more of a hack actually. It's not precise, it might (and probably will) render differently and unreliably on monitors with a different scaling and you have no control over the exact amount of space you create. Inserting blank columns/rows will make a mess of your grid...

• 

  15ee8f99-57ff-4f92-890c-b56153 about 4 years

  With Jamie's fix, it runs, but still doesn't do what it ought to. With row height and column width set to Auto, it does the wrong thing in a different way.

• 

  15ee8f99-57ff-4f92-890c-b56153 about 4 years

  OP is not attempting to set a margin on RowDefinition or ColumnDefinition. He is attempting to set a margin on the visual children of the grid, which derive from FrameworkElement.

• 

  15ee8f99-57ff-4f92-890c-b56153 about 4 years

  My mistake -- I didn't notice the implicit Button style. I was distracted by the bit about negative margins.

• 

  Tobias over 3 years

  I like this answer best. It provides a solution to the original question and it's straight forward. Thanks!

• 

  mins over 3 years

  The OP problem is not to have a margin around the grid, but a margin around grid cells (or as actually asked around rows and columns, later contradicted by "adding the extra columns/rows is exactly what I was attempting to avoid" comment).

• 

  Eric Ouellet over 3 years

  I don't understand why peoples give you thumbs up because it is far from being as easy as you think/describe here. Just try to do it 30 minutes and you will quickly see that your answer is unapplicable. Also think about row and column spanning

• 

  aggsol over 3 years

  This is easy and practical

• 

  jor about 3 years

  Clicking on the padding space doesn't select the row anymore.

• 

  Richard Moore about 2 years

  UWP != WPF... Why do comments need to be 15 characters long (rhetorical question).

• 

  ELIAS YOUSSEF almost 2 years

  When I first added this nothing changed but after running the app it updated and it works perfectly.

• 

  Jogge over 1 year

  ​14 chars here.

Recents