Vadim's Weblog

Never stop learning.

WPF Margin Property

Posted by Vadim on October 5, 2008

I finally decided to spend some time to learn WPF.  One of the thing I learned today is Margin property.

<Button Margin="10 0 10 5" />

Every control that derives from FrameworkElement class has this WPF_Margin property.

I’m not going to describe this property here. However, I want to share with you how I memorized the sequence of margin.  It goes like this: Left, Top, Right, Bottom.

The easiest way for me to remember is to start from Left and then go clock wise: Top, Right, Bottom.

There are two main reasons why I blog and both of them selfish.

First reason is because writing helps me remember and understand better new things I learn.

The second reason is that people who read my blog comment and correct any mistakes I make and that helps me to learn too.

I have a question for WPF gurus.  I understand that if all margins are the same (for example left, top, right, and bottom are equal to 5), it’s possible to assign margin like this:

<Button Margin="5" />

The both assignments with one number and four numbers make sense because Margin is of type Thickness  and this struct has two constructors:

public Thickness(double uniformLength)
public Thickness(double left, double top, double right, double bottom)

Here comes my question: I discovered that it’s possible to assign Margin declaratively with two numbers.

<Button Margin="10 5" />

How is it possible if Thickness doesn’t have a constructor with two parameters?
kick it on DotNetKicks.com

About these ads

15 Responses to “WPF Margin Property”

  1. Hi there,

    I am by no means a WPF guru, but I am learning as well.

    Just like with LINQ, the compiler does a LOT of magic behind the scenes when churning XAML into something binary. The XAML you create can be quite different from the actual object structure the compiler builds for you. So my guess would be that something tells the compiler that “x y” must be the same as “x y x y”..

    Rune

  2. ilovetocode said

    Hi,

    Rune has it right. Some properties of WPF objects have implicit converters attached to them (based on type). This allows the input string to take several different forms without having to specify a converter in XAML for each use.

    The converter at work here is a ThicknessConverter which parses the input string and attempts to map the values given in the string to one of the Thickness object constructor overloads.

    For more information take a look at http://msdn.microsoft.com/en-us/library/ms752059.aspx#typeconverterenabled

    Sam.

  3. Vadim said

    Rune & Sam,

    Thanks a lot for you help. You’re absolutely right ThnicknessConverter does the job.
    It has internal method FromString that include the code bellow:

    switch (index)
    {
    case 1:
    return new Thickness(numArray[0]);

    case 2:
    return new Thickness(numArray[0], numArray[1], numArray[0], numArray[1]);

    case 4:
    return new Thickness(numArray[0], numArray[1], numArray[2], numArray[3]);
    }

  4. [...] Margin demystified. In my previous post I asked a question about this line of [...]

  5. Jason said

    My question is: why didn’t the WPF programmers use the well known HTML order for this: Top, Right, Bottom, Left?

    • Brett Peirce said

      Well, why does any company do anything differently? Usually, you can boil it down to money:

      – save money by doing something a different, cheaper way,
      -or-
      – do something a different, better way and you might profit off of it later.

      Not sure how either might apply to this, but Microsoft probably thought it was better (makes enough sense to me: left to right and top to bottom, like many languages, including English), they sought to generate a bit of steam behind setting a new standard, and they didn’t think programmers would think was a buig hurdle to get over to use this new technology.

      Microsoft easily has the market share to take that chance.

      • Doron said

        I think it’s more about complete disregard for standards/conventions that is typical of Microsoft’s “everyone will soon convert to our way of doing things” mentality. I.e., ego trip.

      • Paul said

        Actually the Windows standards predate css, and are more consistent with mathematics. The css folks blew it.

      • imma said

        but doesn’t maths conventionally start on the right(x-axis) and go anti-clockwise? … Right, Top, Left, Bottom
        eg: see http://en.wikipedia.org/wiki/Sign_(mathematics)#Sign_of_an_angle

        Typographically, however, I think(imho) the most important margin is the top one – major movement being down the page, then the left for insetting, the others just give the area bounds … Top, Left, Bottom, Right

        either way, clockwise feels wrong starting from the top & starting with the left margin also seems a strange choice

      • Attila said

        Hello all i think the explanation is more simple.

        When you define areas you think of rectangles between points (X1, Y1) (X2, Y2)

        I question myself in this order because in this order I define the components of the points

        How far do i want my point1 to be on the X axis -> left margin
        How far do i want my point1 to be on the Y axis -> top margin

        How far do i want my point2 to be on the X axis -> right margin
        How far do i want my point2 to be on the Y axis -> bottom margin

        I think this is more closer how you work with math (rectangles, lines, polygons, shapes etc …)

      • imma said

        good point, that makes a lot of sense :-)

  6. PS said

    Vadim,

    Just came across this page while looking for an explanation of WPF margins – love the little diagram, it was exactly what I needed to see in order to quickly understand.

    Thanks!

  7. Putrajaya Property…

    [...]WPF Margin Property « Vadim's Weblog[...]…

  8. Deanna said

    Very helpful thanks!!!

  9. jokecamp said

    Simple answer to my question. Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: