What is the easy way to set spacing between items in StackPanel?

Question

Is there an easy way to set default space between items inside StackPanel so I'll don't have to set Margin property on each item?

Solution 1

if all the controls are the same then do as IanR suggested and implement a Style that catches that control. if it's not then you can't create a default style to a base class because it just won't work.

the best way for situations like these is to use a very neat trick - attached properties (aka Behaviors in WPF4)

you can create a class that has an attached property, like so:

public class MarginSetter
{
    public static Thickness GetMargin(DependencyObject obj)
    {
        return (Thickness)obj.GetValue(MarginProperty);
    }

    public static void SetMargin(DependencyObject obj, Thickness value)
    {
        obj.SetValue(MarginProperty, value);
    }

    // Using a DependencyProperty as the backing store for Margin.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MarginProperty =
        DependencyProperty.RegisterAttached("Margin", typeof(Thickness), typeof(MarginSetter), new UIPropertyMetadata(new Thickness(), CreateThicknesForChildren));

    public static void CreateThicknesForChildren(object sender, DependencyPropertyChangedEventArgs e)
    {
        var panel = sender as Panel;

        if (panel == null) return;

        foreach (var child in panel.Children)
        {
            var fe = child as FrameworkElement;

            if (fe == null) continue;

            fe.Margin = MarginSetter.GetMargin(panel);
        }
    }


}

now, to use it, all you need to do is to attach this attached property to any panel you want, like so:

<StackPanel local:MarginSetter.Margin="10">
    <Button Content="hello " />
    <Button Content="hello " />
    <Button Content="hello " />
    <Button Content="hello " />
</StackPanel>

Completely reusable of course.

Solution 2

I use a transparent separator, which works well:

<Separator Opacity="0" Height="20"/>

You can of course use margins but then if you want to change the margins you have to update all of the elements.

The separator can even be styled in a static resource.

An attached property could do it too but I think it's overkill.

Comments

[Mario Vernari]

The only problem is that it works statically: if you were adding/removing children once the panel has been instantiated, that won't work.

[Jens]

Your attached behavior could maybe subscribe to LayoutUpdated, and set the correct margin for new items as needed.

[Nate]

+1 for a great solution. I think I'll be able to use that tomorrow!

[Elad Katz]

@Mario - you're right, but i basically gave the general direction. Jens's idea would be a good way to continue - it's easy to solve the general case.

[Poma]

At runtime CreateThicknesForChildren event is invoked befora any children are added. How to fix this code so it'll work not only on designer?

[Elad Katz]

register to one of the events of the panel that would happen after the children has already been added. i'm guessing Loaded might do the trick.

[Mike de Klerk]

How conveniently cumbersome is WPF in comparison to HTML and CSS (LESS, SASS) when it comes to markup.

[Admin]

This is not going to work (any longer) and - for the children of the panel to be loaded - I have to subscribe the following event private void StackPanel_Loaded(object sender, RoutedEventArgs e) { MarginSetter.CreateThicknesForChildren(sender, new DependencyPropertyChangedEventArgs()); } otherwise at the attached property initialization the panel.Children has zero count and the foreach of CreateThicknesForChildren is skipped

[15ee8f99-57ff-4f92-890c-b56153]

You could just omit the stackpanel and get the same effect. The Grid will stretch to its parent by default, by the way. Giving it a fixed width is unnecessary, and so a bad idea, as the parent may be resized later. WPF layouts use a lot of auto-sizing and stretching to parents.

[visc]

@Microsoft, too bad this is not supported on UWP... :'(

[Dan Stevens]

How do I use this? Do I have to manual add a Seperator element after each child element? I don't see how this is better than setting the Margin property directly each child item. Am I missing something?

[Mark]

Leaving some English code would be much appreciated, that way people can follow the code much more easily. This is an international community, not a Spanish one.