How to set a top margin only in XAML?

I can set margins individually in code but how do I do it in XAML, e.g. how do I do this:

PSEUDO-CODE:

<StackPanel Margin.Top="{Binding TopMargin}">

Isn't this what you're looking for?

<StackPanel Margin="0,10,0,0" />

The first value is Left margin, then Top, then Right, and last but not least Bottom.

I'm not sure if you want to bind it to something, but if not, that'll work.


The key is to realize that setting it in code like this:

sp2.Margin = new System.Windows.Thickness{ Left = 5 };

is equivalent to:

sp2.Margin = new System.Windows.Thickness{ Left = 5, Top = 0, Right = 0, Bottom = 0 };

You can't set just a single value in a Thickness instance through either code or XAML. If you don't set some of the values, they will be implicitly zero. Therefore, you can just do this to convert the accepted code sample in your other question to a XAML equivalent:

<StackPanel Margin="{Binding TopMargin, Converter={StaticResource MyConverter}}"/>

where MyConverter just returns a Thickness that sets only the Top and leaves all other values as zero.

Of course, you could write your own control that does expose these individual values as dependency properties to make your code a little cleaner:

<CustomBorder TopMargin="{Binding TopMargin}">
</CustomBorder>

A better option than a custom control would be to write an attached property and change the Thickness using the code above in the dependency property setter. The below code would be usable across ALL controls which have a Margin.

public static readonly DependencyProperty TopMarginProperty =
    DependencyProperty.RegisterAttached("TopMargin", typeof(int), typeof(FrameworkElement),
                                        new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender));
public static void SetTopMargin(FrameworkElement element, int value)
{
    // set top margin in element.Margin
}
public static int GetTopMargin(FrameworkElement element)
{
    // get top margin from element.Margin
}

If you couple this with a Behavior, you can get notification changes on the TopMargin property.


This belongs to the WPF/XAML commandments:

  1. I am WPF/XAML, thy UI framework, and you will use me when coding apps for Windows - eventually.
  2. Thou shalt have no other technologies - I will not be cross-platform but I'll try to with Silverlight UWP, because Hololens is going to be huge some day. "Xamarin.Forms"? Never heard of it!
  3. Thou shalt inevitably take the name of the Lord in vain, repeatedly, when using WPF/XAML.
  4. Remember the sabbath day: every 7 days... or hours or minutes of coding I will make you take a break to go to StackOverflow and 2000things.
  5. Honor thy father and mother: Windows Forms.
  6. Should thou shalt adopt MVVM, thou shalt also implement INPC and INCC, but rejoice! Thou hast a choice: you can use it or you can use it with anger.
  7. Thou shalt not commit adultery interop with other apps and frameworks.
  8. Thou shalt not covet thy neighbour's UI framework.
  9. Thou shalt not be able to set a position of an element dynamically using binding of an either attached property or margin without writing few lines of code-behind.
  10. Thou shalt never have a simple bool Visibility property in XAML. I am WPF/XAML.

Your sin is listed at #9.


Just wrote some attached properties that should make it easy to set an individual Margin value from a binding or static resource:

public class Margin
{
    public static readonly DependencyProperty LeftProperty = DependencyProperty.RegisterAttached(
        "Left",
        typeof(double),
        typeof(Margin),
        new PropertyMetadata(0.0));

    public static void SetLeft(UIElement element, double value)
    {
        var frameworkElement = element as FrameworkElement;
        if (frameworkElement != null)
        {
            Thickness currentMargin = frameworkElement.Margin;

            frameworkElement.Margin = new Thickness(value, currentMargin.Top, currentMargin.Right, currentMargin.Bottom);
        }
    }

    public static double GetLeft(UIElement element)
    {
        return 0;
    }

    public static readonly DependencyProperty TopProperty = DependencyProperty.RegisterAttached(
        "Top",
        typeof(double),
        typeof(Margin),
        new PropertyMetadata(0.0));

    public static void SetTop(UIElement element, double value)
    {
        var frameworkElement = element as FrameworkElement;
        if (frameworkElement != null)
        {
            Thickness currentMargin = frameworkElement.Margin;

            frameworkElement.Margin = new Thickness(currentMargin.Left, value, currentMargin.Right, currentMargin.Bottom);
        }
    }

    public static double GetTop(UIElement element)
    {
        return 0;
    }

    public static readonly DependencyProperty RightProperty = DependencyProperty.RegisterAttached(
        "Right",
        typeof(double),
        typeof(Margin),
        new PropertyMetadata(0.0));

    public static void SetRight(UIElement element, double value)
    {
        var frameworkElement = element as FrameworkElement;
        if (frameworkElement != null)
        {
            Thickness currentMargin = frameworkElement.Margin;

            frameworkElement.Margin = new Thickness(currentMargin.Left, currentMargin.Top, value, currentMargin.Bottom);
        }
    }

    public static double GetRight(UIElement element)
    {
        return 0;
    }

    public static readonly DependencyProperty BottomProperty = DependencyProperty.RegisterAttached(
        "Bottom",
        typeof(double),
        typeof(Margin),
        new PropertyMetadata(0.0));

    public static void SetBottom(UIElement element, double value)
    {
        var frameworkElement = element as FrameworkElement;
        if (frameworkElement != null)
        {
            Thickness currentMargin = frameworkElement.Margin;

            frameworkElement.Margin = new Thickness(currentMargin.Left, currentMargin.Top, currentMargin.Right, value);
        }
    }

    public static double GetBottom(UIElement element)
    {
        return 0;
    }
}

Usage:

<TextBlock Text="Test"
    app:Margin.Top="{Binding MyValue}"
    app:Margin.Right="{StaticResource MyResource}"
    app:Margin.Bottom="20" />

Tested in UWP but this should work for any XAML-based framework. The nice thing is they won't override the other values on the Margin, so you can combine them as well.