blocks|key|3094266|text|RowDefinition和ColumnDefinition属于ContentElement类型，而Margin严格意义上是一个FrameworkElement属性。所以对于你的问题，“这很容易吗？”答案是非常明确的不可能。不，我还没有看到任何展示这种功能的布局面板。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3094267|您可以根据建议添加额外的行或列。但是，您也可以在Grid元素本身或Grid中的任何内容上设置边距，所以这是目前最好的变通办法。|3094268|entityMap^0|0|D|E|G|W|E|1E|6|1S|G|0|O|4|X|4|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|I|$]]

<p><code>RowDefinition</code> and <code>ColumnDefinition</code> are of type <code>ContentElement</code>, and <code>Margin</code> is strictly a <code>FrameworkElement</code> property. So to your question, <em>"is it easily possible"</em> the answer is a most definite no. And no, I have not seen any layout panels that demonstrate this kind of functionality.</p>

<p>You can add extra rows or columns as you suggested. But you can also set margins on a <code>Grid</code> element itself, or anything that would go inside a <code>Grid</code>, so that's your best workaround for now.</p>


blocks|key|3306951|text|您可以编写自己的GridWithMargin类(继承自Grid+)，并覆盖ArrangeOverride方法以应用页边距|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3306952|entityMap^0|8|E|R|4|11|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>You could write your own <code>GridWithMargin</code> class, inherited from <code>Grid</code>, and override the <code>ArrangeOverride</code> method to apply the margins</p>


blocks|key|3306968|text|一种可能是添加固定宽度的行和列来充当您正在寻找的填充/边距。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3306969|您还可以考虑到，您受到容器大小的约束，并且网格将变得与包含元素或其指定的宽度和高度一样大。您可以简单地使用没有设置宽度或高度的列和行。这样，它们默认均匀地分解网格内的总空间。然后它将只是一个问题，在你的网格中垂直和水平居中你的元素。|3306970|另一种方法可能是将所有网格元素包装在具有固定大小和边距的单个行&列网格中。您的网格包含包含实际元素的固定宽度/高度框。|3306971|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>One possibility would be to add fixed width rows and columns to act as the padding / margin you are looking for. </p>

<p>You might also consider that you are constrained by the size of your container, and that a grid will become as large as the containing element or its specified width and height. You could simply use columns and rows with no width or height set. That way they default to evenly breaking up the total space within the grid. Then it would just be a mater of centering your elements vertically and horizontally within you grid.</p>

<p>Another method might be to wrap all grid elements in a fixed with single row &amp; column grid that has a fixed size and margin. That your grid contains fixed width / height boxes which contain your actual elements.</p>


blocks|key|333486|text|你可以使用类似这样的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|333487|<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>|code-block|syntax|javascript|333488|​|333489|或者，如果您不需要TemplateBindings：|333490|<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>|333491|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You could use something like this:</p>

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

<p></p>

<p>Or if you don't need the TemplateBindings:</p>

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


blocks|key|3307008|text|我现在就用我的一个网格做了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3307009|3307010|首先对网格内的每个元素应用相同的边距。您可以手动执行此操作，使用样式或您喜欢的任何方式。假设您希望水平间距为6px，垂直间距为2px。然后将"3px+1px“的边距添加到网格的每个子级。|unordered-list-item|3307011|然后删除在网格周围创建的边距(如果您想要将网格内控件的边框与网格的相同位置对齐)。这样设置网格的边距为"-3px+-1px“。这样，网格外部的其他控件将与网格内最外层的控件对齐。|3307012|3307013|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|L|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|M|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|N|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|J|$]]

<p>I did it right now with one of my grids. </p>

<ul>
<li>First apply the same margin to every element inside the grid. You can do this mannualy, using styles, or whatever you like. Lets say you want an horizontal spacing of 6px and a vertical spacing of 2px. Then you add margins of "3px 1px" to every child of the grid.</li>
<li>Then remove the margins created around the grid (if you want to align the borders of the controls inside the grid to the same position of the grid). Do this setting a margin of "-3px -1px" to the grid. That way, other controls outside the grid will be aligned with the outtermost controls inside the grid.</li>
</ul>


blocks|key|3094387|text|在单元格控件外部使用Border控件，并为其定义填充：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3094388|++++<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>|code-block|syntax|javascript|3094389|来源：|3094390|3094391|Original+Source|unordered-list-item|3094392|and+from+Way+Back+Machine|3094393|3094394|entityMap|0|LINK|mutability|MUTABLE|url|http://blogs.alankabootint.com/Posts.aspx?PostID=14#Comment14|1|https://web.archive.org/web/20150626195237/http://blogs.alankabootint.com/Posts.aspx?PostID=14^0|A|6|0|0|0|0|0|F|0|0|0|P|1|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|18|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|Q|3|R|5|P|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|S|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|12]]]]

<p>Use a <code>Border</code> control outside the cell control and define the padding for that:</p>

<pre><code>    &lt;Grid&gt;
        &lt;Grid.Resources &gt;
            &lt;Style TargetType="Border" &gt;
                &lt;Setter Property="Padding" Value="5,5,5,5" /&gt;
            &lt;/Style&gt;
        &lt;/Grid.Resources&gt;

        &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition/&gt;
            &lt;RowDefinition/&gt;
        &lt;/Grid.RowDefinitions&gt;

        &lt;Border Grid.Row="0" Grid.Column="0"&gt;
            &lt;YourGridControls/&gt;
        &lt;/Border&gt;
        &lt;Border Grid.Row="1" Grid.Column="0"&gt;
            &lt;YourGridControls/&gt;
        &lt;/Border&gt;

    &lt;/Grid&gt;
</code></pre>

<p><br/>
Source:</p>

<ul>
<li><a href="http://blogs.alankabootint.com/Posts.aspx?PostID=14#Comment14" rel="noreferrer">Original Source</a></li>
<li><a href="https://web.archive.org/web/20150626195237/http://blogs.alankabootint.com/Posts.aspx?PostID=14" rel="noreferrer">and from Way Back Machine</a></li>
</ul>


blocks|key|3094413|text|我最近在开发一些软件时遇到了这个问题，我突然问道:为什么？他们为什么要这样做，this...the的答案就在我面前。一行数据是一个对象，所以如果我们保持面向对象，那么特定行的设计应该是分开的(假设您以后需要重用行显示)。因此，我开始为大多数数据显示使用数据绑定堆栈面板和自定义控件。列表偶尔会出现，但大多数情况下，网格仅用于主要页面组织(页眉、菜单区、内容区、其他区域)。您的自定义对象可以轻松地管理堆栈面板或网格中每行的任何间距要求(单个网格单元格可以包含整个行对象。这还有一个额外的好处，那就是对方向的变化、展开/折叠等做出正确的反应。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3094414|<Grid>
++<Grid.RowDefinitions>
++++<RowDefinition+/>
++++<RowDefinition+/>
++</Grid.RowDefinitions>

++<custom:MyRowObject+Style="YourStyleHereOrGeneralSetter"+Grid.Row="0"+/>
++<custom:MyRowObject+Style="YourStyleHere"+Grid.Row="1"+/>
</Grid>|code-block|syntax|javascript|3094415|或|3094416|<StackPanel>
++<custom:MyRowObject+Style="YourStyleHere"+Grid.Row="0"+/>
++<custom:MyRowObject+Style="YourStyleHere"+Grid.Row="1"+/>
</StackPanel>|3094417|如果您使用的是data+binding...my，则您的自定义控件也将继承DataContext。|3094418|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I ran into this problem while developing some software recently and it occured to me to ask WHY? Why have they done this...the answer was right there in front of me.  A row of data is an object, so if we maintain object orientation, then the design for a particular row should be seperated (suppose you need to re-use the row display later on in the future).  So I started using databound stack panels and custom controls for most data displays.  Lists have made the occasional appearance but mostly the grid has been used only for primary page organization (Header, Menu Area, Content Area, Other Areas).  Your custom objects can easily manage any spacing requirements for each row within the stack panel or grid (a single grid cell can contain the entire row object.  This also has the added benefit of reacting properly to changes in orientation, expand/collapses, etc.</p>

<pre><code>&lt;Grid&gt;
  &lt;Grid.RowDefinitions&gt;
    &lt;RowDefinition /&gt;
    &lt;RowDefinition /&gt;
  &lt;/Grid.RowDefinitions&gt;

  &lt;custom:MyRowObject Style="YourStyleHereOrGeneralSetter" Grid.Row="0" /&gt;
  &lt;custom:MyRowObject Style="YourStyleHere" Grid.Row="1" /&gt;
&lt;/Grid&gt;
</code></pre>

<p>or</p>

<pre><code>&lt;StackPanel&gt;
  &lt;custom:MyRowObject Style="YourStyleHere" Grid.Row="0" /&gt;
  &lt;custom:MyRowObject Style="YourStyleHere" Grid.Row="1" /&gt;
&lt;/StackPanel&gt;
</code></pre>

<p>Your Custom controls will also inherit the DataContext if your using data binding...my personal favorite benefit of this approach.</p>


blocks|key|3307082|text|虽然您不能添加边距或填充到网格，但您可以使用类似框架(或类似的容器)的东西，您可以将其应用于。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3307083|通过这种方式(如果您在单击按钮时显示或隐藏控件)，您将不需要在可能与其交互的每个控件上添加边距。|3307084|可以将其视为将控件组隔离为单元，然后将样式应用于这些单元。|3307085|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>Though you can't add margin or padding to a Grid, you could use something like a Frame (or similar container), that you can apply it to.</p>

<p>That way (if you show or hide the control on a button click say), you won't need to add margin on every control that may interact with it.</p>

<p>Think of it as isolating the groups of controls into units, then applying style to those units.</p>


blocks|key|3307100|text|我想添加我自己的解决方案，因为还没有人提到这一点。您可以使用样式声明来定位包含在网格中的控件，而不是设计基于网格的UserControl。负责将填充/边距添加到所有元素，而不必为每个元素定义填充/边距，这是繁琐和劳动密集型的。例如，如果您的网格只包含TextBlocks，您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3307101|<Style+TargetType="{x:Type+TextBlock}">
++++<Setter+Property="Margin"+Value="10"/>
</Style>|code-block|syntax|javascript|3307102|这就相当于“单元格填充”。|3307103|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>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:</p>

<pre><code>&lt;Style TargetType="{x:Type TextBlock}"&gt;
    &lt;Setter Property="Margin" Value="10"/&gt;
&lt;/Style&gt;
</code></pre>

<p>Which is like the equivalent of "cell padding".</p>


blocks|key|330755|text|有时简单的方法是最好的。只需在字符串中填充空格即可。如果只有几个文本框等等，这是目前为止最简单的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330756|您还可以简单地插入具有固定大小的空白列/行。非常简单，你可以很容易地改变它。|330757|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Sometimes the simple method is the best. Just pad your strings with spaces. If it is only a few textboxes etc this is by far the simplest method.</p>

<p>You can also simply insert blank columns/rows with a fixed size. Extremely simple and you can easily change it.</p>


blocks|key|333573|text|如前所述，创建一个GridWithMargins类。下面是我的工作代码示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|333574|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+%2B=+RowMargin.Left;
++++++++++++pos.Y+%2B=+RowMargin.Top;

++++++++++++var+actual+=+child.RenderSize;
++++++++++++actual.Width+-=+(RowMargin.Left+%2B+RowMargin.Right);
++++++++++++actual.Height+-=+(RowMargin.Top+%2B+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;
++++}
}|code-block|syntax|javascript|333575|用法：|333576|<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>|333577|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>As was stated before create a GridWithMargins class.
Here is my working code example</p>

<pre><code>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;
    }
}
</code></pre>

<p>Usage:</p>

<pre><code>&lt;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"&gt;
    &lt;Grid&gt;
        &lt;local:GridWithMargins ShowGridLines="True"&gt;
            &lt;Grid.RowDefinitions&gt;
                &lt;RowDefinition /&gt;
                &lt;RowDefinition /&gt;
                &lt;RowDefinition /&gt;
                &lt;RowDefinition /&gt;
                &lt;RowDefinition /&gt;
            &lt;/Grid.RowDefinitions&gt;
            &lt;Grid.ColumnDefinitions&gt;
                &lt;ColumnDefinition /&gt;
                &lt;ColumnDefinition /&gt;
                &lt;ColumnDefinition /&gt;
            &lt;/Grid.ColumnDefinitions&gt;
            &lt;Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /&gt;
            &lt;Rectangle Fill="Green" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /&gt;
            &lt;Rectangle Fill="Blue" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /&gt;
        &lt;/local:GridWithMargins&gt;
    &lt;/Grid&gt;
&lt;/Window&gt;
</code></pre>


blocks|key|3307194|text|在uwp中(Windows10FallCreatorsUpdate及以上版本)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3307195|<Grid+RowSpacing="3"+ColumnSpacing="3">|code-block|syntax|javascript|3307196|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>in uwp (Windows10FallCreatorsUpdate version and above)</p>

<pre><code>&lt;Grid RowSpacing="3" ColumnSpacing="3"&gt;
</code></pre>


blocks|key|3094566|text|我很惊讶我还没有看到这个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3094567|来自web的框架，如bootstrap，将使用负边距来拉回行/列。|3094568|它可能有点冗长(尽管不是那么糟糕)，它确实可以工作，元素的间距和大小也是均匀的。|3094569|在下面的示例中，我使用StackPanel根来演示如何使用边距均匀分布这3个按钮。您可以使用其他元素，只需将内部x:Type从button更改为您的元素即可。|offset|length|style|CODE|3094570|这个想法很简单，使用外部的网格将元素的边界从边界中拉出一半(使用负边距)，使用内部网格以您想要的数量均匀地间隔元素。|3094571|更新：一个用户的一些评论说它不工作，这里有一个简短的视频演示：https://youtu.be/rPx2OdtSOYI|BOLD|3094572|​|3094573|📷|atomic|3094574|3094575|++++<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>|code-block|syntax|javascript|3094576|entityMap|0|LINK|mutability|MUTABLE|url|https://youtu.be/rPx2OdtSOYI|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1a754ead63cc94d8ce579a4e3f9b129c.png|imageAlt^0|0|0|0|B|A|0|0|0|3|V|S|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1H|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1I|8|@$H|1J|I|1K|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1L|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1M|8|@$H|1N|I|1O|J|P]]|9|@$H|1P|I|1Q|1|1R]]|A|$]]|$1|Q|3|R|5|6|7|1S|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|1T|8|@]|9|@$H|1U|I|1V|1|1W]]|A|$]]|$1|V|3|R|5|6|7|1X|8|@]|9|@]|A|$]]|$1|W|3|X|5|Y|7|1Y|8|@]|9|@]|A|$Z|10]]|$1|11|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18]]|19|$5|1A|15|1B|A|$1C|1D|1E|-4]]]]

<p>I am surprised I did not see this solution posted yet.</p>

<p>Coming from the web, frameworks like bootstrap will use a negative margin to pull back rows / columns.</p>

<p>It might be a little verbose (albeit not that bad), it does work and the elements are evenly spaced and sized.</p>

<p>In the example below I use a <code>StackPanel</code> root to demonstrate how the 3 buttons are evenly spaced using margins. You could use other elements, just change the inner x:Type from button to your element.</p>

<p>The idea is simple, use a grid on the outside to pull the margins of elements out of their bounds by half the amount of the inner grid (using negative margins), use the inner grid to evenly space the elements with the amount you want.</p>

<p><strong>Update:</strong>
Some comment from a user said it doesn't work, here's a quick video demonstrating: <a href="https://youtu.be/rPx2OdtSOYI" rel="nofollow noreferrer">https://youtu.be/rPx2OdtSOYI</a></p>

<p><a href="https://i.stack.imgur.com/xrA1o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xrA1o.png" alt="enter image description here"></a></p>

<pre><code>    &lt;StackPanel&gt;
        &lt;Grid&gt;
            &lt;Grid.Resources&gt;
                &lt;Style TargetType="{x:Type Grid}"&gt;
                    &lt;Setter Property="Margin" Value="-5 0"/&gt;
                &lt;/Style&gt;
            &lt;/Grid.Resources&gt;

            &lt;Grid&gt;
                &lt;Grid.Resources&gt;
                    &lt;Style TargetType="{x:Type Button}"&gt;
                        &lt;Setter Property="Margin" Value="10 0"/&gt;
                    &lt;/Style&gt;
                &lt;/Grid.Resources&gt;

                &lt;Grid.ColumnDefinitions&gt;
                    &lt;ColumnDefinition Width="*" /&gt;
                    &lt;ColumnDefinition Width="*" /&gt;
                    &lt;ColumnDefinition Width="*" /&gt;
                &lt;/Grid.ColumnDefinitions&gt;

                &lt;Button Grid.Column="0" Content="Btn 1" /&gt;
                &lt;Button Grid.Column="1" Content="Btn 2" /&gt;
                &lt;Button Grid.Column="2" Content="Btn 3" /&gt;
            &lt;/Grid&gt;

        &lt;/Grid&gt;

        &lt;TextBlock FontWeight="Bold" Margin="0 10"&gt;
            Test
        &lt;/TextBlock&gt;
    &lt;/StackPanel&gt;
</code></pre>


blocks|key|336002|text|编辑：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|336003|要为任何控件增加边距，可以使用如下所示的边框对控件进行包装|336004|
++++<Border+Padding="10">
++++++++++++<AnyControl>
|code-block|syntax|javascript|336005|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Edited:</p>

<p>To give margin to any control you could wrap the control with border like this</p>

<pre><code>&lt;!--...--&gt;
    &lt;Border Padding="10"&gt;
            &lt;AnyControl&gt;
&lt;!--...--&gt;
</code></pre>


blocks|key|330869|text|我最近在两列网格中遇到了类似的问题，我只需要在右列中的元素上留出边距。两列中的所有元素都是TextBlock类型。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330870|<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>|code-block|syntax|javascript|330871|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I had similar problem recently in two column grid, I needed a margin on elements in right column only. All elements in both columns were of type TextBlock.</p>

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


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

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


WPF: Grid with column/row margin/padding?

容器

在WPF网格中为行或列指定边距和/或填充是否很容易？？当然，我可以添加额外的列来分隔空间，但这似乎是一项填充/边距的工作(它将提供更简单的XAML)。是否有人从标准网格派生来添加此功能？

问WPF:有列/行边距/填充的网格？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问WPF:有列/行边距/填充的网格？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问WPF:有列/行边距/填充的网格？
EN