Orden de propiedades en margen

218

Si tengo esa cadena en XAML:

Storyboard.TargetProperty="Margin" From="1,2,3,4" To="0,0,0,0"

¿Qué es arriba abajo abajo derecha e izquierda? 1- derecha 2- superior 3- izquierda 4 - inferior

¿Está bien?

Papa John
fuente
1
Segundo resultado al buscar el orden de margen de WPF, stackoverflow.com/questions/520422/… . izquierda arriba derecha abajo
Lukazoid
@PapaJohn Para ser más específico al enlace @amit jhaprovisto, mire la sección titulada XAML Valuespara el margen en ese enlace.
nam

Respuestas:

403
Margin="1,2,3,4"
  1. Izquierda,
  2. Parte superior,
  3. Correcto,
  4. Fondo

También es posible especificar solo dos tamaños como este:

Margin="1,2"
  1. Izquierda y derecha
  2. Arriba y abajo

Finalmente puede especificar un tamaño único:

Margin="1"
  1. utilizado para todos los lados

El orden es el mismo que en WinForms.

Erno
fuente
55
LTRB es la notación corta para recordar fácilmente.
Sai
44
Nota: este es un orden diferente al orden css de html, que es Superior, Derecha, Inferior, Izquierda.
Ruskin
77
¿Alguien tiene alguna idea de por qué decidieron optar por algo diferente de CSS?
Charles Clayton
55
@crclayton - Como escribí; El orden es el mismo que en WinForms. WinForms es el predecesor natural de WPF, por lo que el software (desarrolladores) actualizaría de WinForms a WPF.
Erno
30
Qué tal si. WPF comienza en el oeste. ¿Netscape comienza en el norte? Y obviamente en sentido horario para ambos.
Martin Capodici
33

Hay tres situaciones únicas:

  • 4 números , por ej Margin="a,b,c,d".
  • 2 números , por ej Margin="a,b".
  • 1 número , por ej Margin="a".

4 números

Si hay 4 números , entonces su left, top, right, bottom(un círculo en sentido horario comenzando desde el margen izquierdo medio). El primer número es siempre el "Oeste" como "WPF":

<object Margin="left,top,right,bottom"/>

Ejemplo: si lo usamos Margin="10,20,30,40"genera:

ingrese la descripción de la imagen aquí

2 números

Si hay 2 números , entonces el primero es el grosor del margen izquierdo y derecho, el segundo es el grosor del margen superior e inferior. El primer número es siempre el "Oeste" como "WPF":

<object Margin="a,b"/> // Equivalent to Margin="a,b,a,b".

Ejemplo: si usamos Margin="10,30", el margen izquierdo y derecho son ambos 10, y el superior y el inferior son ambos 30.

ingrese la descripción de la imagen aquí

1 número

Si hay 1 número , entonces el número se repite (es esencialmente un grosor de borde).

<object Margin="a"/> // Equivalent to Margin="a,a,a,a".

Ejemplo: si lo usamos Margin="20"genera:

ingrese la descripción de la imagen aquí

Actualización 2020-05-27

He estado trabajando en una aplicación WPF a gran escala durante los últimos 5 años con más de 100 pantallas. Parte de un equipo de 5 desarrolladores de WPF / C # / Java. Finalmente decidimos usar 1 número (para el grosor del borde) o 4 números. Nunca usamos 2. Es consistente, y parece ser una buena manera de reducir la carga cognitiva cuando se desarrolla.


La regla:

Todos los números de ancho comienzan a la izquierda (el "Oeste" como "WPF") y van en el sentido de las agujas del reloj (si hay dos números, solo van en el sentido de las agujas del reloj dos veces, luego reflejan el resto).

Aplazamiento de pago
fuente
1
"Si hay 2 números, entonces el primero es el grosor del margen izquierdo y derecho" Pero en el ejemplo, el primer número es 30, y termina siendo el margen superior e inferior.
Peter Bruins
21

Solo porque el comentario de @MartinCapodici es impresionante, escribo aquí como respuesta para dar visibilidad.

Todo en sentido horario:

  • W PF start W est (izquierda-> arriba-> derecha-> abajo)
  • norte etscape (es decir, CSS) inicio N orth (arriba-> derecha-> abajo-> izquierda)
Askolein
fuente