How do I space out the child elements of a StackPanel

Question

Given a StackPanel    lt StackPanel gt     lt TextBox Height  30  gt Apple lt  TextBox gt     lt TextBox Height  80  gt Banana lt  TextBox gt     lt TextBox Height  120  gt Cherry lt  TextBox gt   lt  StackPanel gt    What s the best way to space out the child elements so that there are equally-sized gaps between them  even though the child elements themselves are of different sizes  Can it be done without setting properties on each of the individual children

User · Answer

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    lt StackPanel Orientation  Horizontal  foo Spacing Horizontal  5  gt     lt Button gt Button 1 lt  Button gt     lt Button gt Button 2 lt  Button gt   lt  StackPanel gt    lt StackPanel Orientation  Vertical  foo Spacing Vertical  5  gt     lt Button gt Button 1 lt  Button gt     lt Button gt Button 2 lt  Button gt   lt  StackPanel gt    lt  -- Same as vertical example above -- gt   lt StackPanel Orientation  Vertical  foo MarginSetter Margin  0 0 0 5  foo MarginSetter LastItemMargin  0  gt     lt Button gt Button 1 lt  Button gt     lt Button gt Button 2 lt  Button gt   lt  StackPanel gt

User · Answer

1 for Sergey s answer  And if you want to apply that to all your StackPanels you can do this    lt Style TargetType   x Type StackPanel   gt       lt Style Resources gt           lt Style TargetType   x Type TextBox   gt               lt Setter Property  Margin  Value   StaticResource tbMargin    gt           lt  Style gt       lt  Style Resources gt   lt  Style gt    But beware  if you define a style like this in your App xaml  or another dictionary that is merged into the Application Resources  it can override the default style of the control  For mostly lookless controls like the stackpanel it isn t a problem  but for textboxes etc you may stumble upon this problem  which luckily has some workarounds

User · Answer

Usually  I use Grid instead of StackPanel like this   horizontal case   lt Grid gt    lt Grid ColumnDefinitions gt       lt ColumnDefinition Width  quot auto quot   gt       lt ColumnDefinition Width  quot   quot   gt       lt ColumnDefinition  Width  quot auto quot   gt       lt ColumnDefinition Width  quot   quot   gt       lt ColumnDefinition  Width  quot auto quot   gt    lt  Grid ColumnDefinitions gt    lt TextBox Height  quot 30 quot  Grid Column  quot 0 quot  gt Apple lt  TextBox gt    lt TextBox Height  quot 80 quot  Grid Column  quot 2 quot  gt Banana lt  TextBox gt    lt TextBox Height  quot 120 quot  Grid Column  quot 4 quot  gt Cherry lt  TextBox gt   lt  Grid gt    vertical case   lt Grid gt        lt Grid ColumnDefinitions gt           lt RowDefinition Width  quot auto quot   gt           lt RowDefinition Width  quot   quot   gt           lt RowDefinition  Width  quot auto quot   gt           lt RowDefinition Width  quot   quot   gt           lt RowDefinition  Width  quot auto quot   gt        lt  Grid ColumnDefinitions gt        lt TextBox Height  quot 30 quot  Grid Row  quot 0 quot  gt Apple lt  TextBox gt        lt TextBox Height  quot 80 quot  Grid Row  quot 2 quot  gt Banana lt  TextBox gt        lt TextBox Height  quot 120 quot  Grid Row  quot 4 quot  gt Cherry lt  TextBox gt   lt  Grid gt

User · Answer

The thing you really want to do is wrap all child elements  In this case you should use an items control and not resort to horrible attached properties which you will end up having a million of for every property you wish to style    lt ItemsControl gt        lt  -- target the wrapper parent of the child with a style -- gt       lt ItemsControl ItemContainerStyle gt           lt Style TargetType  Control  gt               lt Setter Property  Margin  Value  0 0 5 0  gt  lt  Setter gt           lt  Style gt       lt  ItemsControl ItemContainerStyle gt        lt  -- use a stack panel as the main container -- gt       lt ItemsControl ItemsPanel gt           lt ItemsPanelTemplate gt               lt StackPanel Orientation  Horizontal   gt           lt  ItemsPanelTemplate gt       lt  ItemsControl ItemsPanel gt        lt  -- put in your children -- gt       lt ItemsControl Items gt           lt Label gt Auto Zoom Reset  lt  Label gt           lt CheckBox x Name  AutoResetZoom   gt           lt Button x Name  ProceedButton  Click  ProceedButton OnClick  gt Next lt  Button gt           lt ComboBox SelectedItem   Binding LogLevel    ItemsSource   Binding LogLevels     gt       lt  ItemsControl Items gt   lt  ItemsControl gt

User · Answer

sometimes you need to set Padding  not Margin to make space between items smaller than default

User · Answer

Use Margin or Padding  applied to the scope within the container    lt StackPanel gt       lt StackPanel Resources gt           lt Style TargetType   x Type TextBox   gt               lt Setter Property  Margin  Value  0 10 0 0   gt           lt  Style gt       lt  StackPanel Resources gt        lt TextBox Text  Apple   gt       lt TextBox Text  Banana   gt       lt TextBox Text  Cherry   gt   lt  StackPanel gt    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    lt Window Resources gt       lt Thickness x Key  tbMargin  gt 0 10 0 0 lt  Thickness gt   lt  Window Resources gt    and then refer to this value in the inner scope   lt StackPanel Resources gt       lt Style TargetType   x Type TextBox   gt           lt Setter Property  Margin  Value   StaticResource tbMargin    gt       lt  Style gt   lt  StackPanel Resources gt

User · Answer

The UniformGrid might not be available in Silverlight  but someone has ported it from WPF  http   www jeff wilcox name 2009 01 uniform-grid

User · Answer

Following up on Sergey s suggestion  you can define and reuse a whole Style  with various property setters  including Margin  instead of just a Thickness object    lt Style x Key  MyStyle  TargetType  SomeItemType  gt     lt Setter Property  Margin  Value  0 5 0 5    gt         lt  Style gt            lt StackPanel gt       lt StackPanel Resources gt         lt Style TargetType  SomeItemType  BasedOn   StaticResource MyStyle     gt       lt  StackPanel Resources gt           lt  StackPanel gt    Note that the trick here is the use of Style Inheritance for the implicit style  inheriting from the style in some outer  probably merged from external XAML file  resource dictionary   Sidenote   At first  I naively tried to use the implicit style to set the Style property of the control to that outer Style resource  say defined with the key  MyStyle      lt StackPanel gt     lt StackPanel Resources gt       lt Style TargetType  SomeItemType  gt         lt Setter Property  Style  Value  StaticResource MyStyle     gt       lt  Style gt     lt  StackPanel Resources gt   lt  StackPanel gt    which caused Visual Studio 2010 to shut down immediately with CATASTROPHIC FAILURE error  HRESULT  0x8000FFFF  E UNEXPECTED    as described at https   connect microsoft com VisualStudio feedback details 753211 xaml-editor-window-fails-with-catastrophic-failure-when-a-style-tries-to-set-style-property

User · Answer

Grid ColumnSpacing  Grid RowSpacing  StackPanel Spacing are now on UWP preview  all will allow to better acomplish what is requested here   These properties are currently only available with the Windows 10 Fall Creators Update Insider SDK  but should make it to the final bits

User · Answer

My approach inherits StackPanel   Usage    lt Controls ItemSpacer Grid Row  2  Orientation  Horizontal  Height  30  CellPadding  15 0  gt       lt Label gt Test 1 lt  Label gt       lt Label gt Test 2 lt  Label gt       lt Label gt Test 3 lt  Label gt   lt  Controls ItemSpacer gt    All that s needed is the following short class   using System Windows  using System Windows Controls  using System   namespace Controls       public class ItemSpacer   StackPanel               public static DependencyProperty CellPaddingProperty   DependencyProperty Register  CellPadding   typeof Thickness   typeof ItemSpacer   new FrameworkPropertyMetadata default Thickness   FrameworkPropertyMetadataOptions BindsTwoWayByDefault  OnCellPaddingChanged            public Thickness CellPadding                       get                               return  Thickness GetValue CellPaddingProperty                             set                               SetValue CellPaddingProperty  value                                   private static void OnCellPaddingChanged DependencyObject Object  DependencyPropertyChangedEventArgs e                          ItemSpacer Object  SetPadding                       private void SetPadding                         foreach  UIElement Element in Children                                 Element as FrameworkElement  Margin   this CellPadding                                   public ItemSpacer                         this LayoutUpdated    PART Host LayoutUpdated                     private void PART Host LayoutUpdated object sender  System EventArgs e                        this SetPadding

User · Answer

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 aspx Link is broken -  this is webarchive of this link   It shows how to create an attached behavior  so that syntax like this would work    lt StackPanel local MarginSetter Margin  5  gt      lt TextBox Text  hello    gt      lt Button Content  hello    gt      lt Button Content  hello    gt   lt  StackPanel gt    This is the easiest  amp  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

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

Examples related to wpf

Examples related to silverlight

Examples related to xaml

Examples related to stackpanel