How do I space out the child elements of a StackPanel? How do I space out the child elements of a StackPanel? wpf wpf

How do I space out the child elements of a StackPanel?


Use Margin or Padding, applied to the scope within the container:

<StackPanel>    <StackPanel.Resources>        <Style TargetType="{x:Type TextBox}">            <Setter Property="Margin" Value="0,10,0,0"/>        </Style>    </StackPanel.Resources>     <TextBox Text="Apple"/>    <TextBox Text="Banana"/>    <TextBox Text="Cherry"/></StackPanel>

EDIT: In case you would want to re-use the margin between two containers, you can convert the margin value to a resource in an outer scope, f.e.

<Window.Resources>    <Thickness x:Key="tbMargin">0,10,0,0</Thickness></Window.Resources>

and then refer to this value in the inner scope

<StackPanel.Resources>    <Style TargetType="{x:Type TextBox}">        <Setter Property="Margin" Value="{StaticResource tbMargin}"/>    </Style></StackPanel.Resources>


Another nice approach can be seen here:http://blogs.microsoft.co.il/blogs/eladkatz/archive/2011/05/29/what-is-the-easiest-way-to-set-spacing-between-items-in-stackpanel.aspxLink is broken -> this is webarchive of this link.

It shows how to create an attached behavior, so that syntax like this would work:

<StackPanel local:MarginSetter.Margin="5">   <TextBox Text="hello" />   <Button Content="hello" />   <Button Content="hello" /></StackPanel>

This is the easiest & fastest way to set Margin to several children of a panel, even if they are not of the same type. (I.e. Buttons, TextBoxes, ComboBoxes, etc.)


I improved on Elad Katz' answer.

  • Add LastItemMargin property to MarginSetter to specially handle the last item
  • Add Spacing attached property with Vertical and Horizontal properties that adds spacing between items in vertical and horizontal lists and eliminates any trailing margin at the end of the list

Source code in gist.

Example:

<StackPanel Orientation="Horizontal" foo:Spacing.Horizontal="5">  <Button>Button 1</Button>  <Button>Button 2</Button></StackPanel><StackPanel Orientation="Vertical" foo:Spacing.Vertical="5">  <Button>Button 1</Button>  <Button>Button 2</Button></StackPanel><!-- Same as vertical example above --><StackPanel Orientation="Vertical" foo:MarginSetter.Margin="0 0 0 5" foo:MarginSetter.LastItemMargin="0">  <Button>Button 1</Button>  <Button>Button 2</Button></StackPanel>