Comprendiendo las diferencias entre Margin & Padding y las propiedades de Translations
¡¡Hola!! ¡Feliz Navidad a todos! 🌲 Esta vez aprenderemos sobre dos cosas de las cuales he recibido algunas preguntas, pueden ser fácilmente confundidas ya que ambas propiedades manejan los mismos valores y se comportan de manera similar, estoy hablando de las propiedades de Padding y Margin, en muchas ocasiones tendemos a usarlas como propiedades “equivalentes” pero es importante comprender cuál es la diferencia y el resultado de aplicar una propiedad u otra.
¡Empecemos!
En primer lugar recordemos el significado de los valores que reciben las propiedades Margin y Padding.
La propiedad Margin representa la distancia entre un elemento y sus elementos adyacentes, se usa para controlar la posición de representación del elemento y de sus vecinos, mientras que la propiedad Padding representa la distancia entre un elemento y sus elementos secundarios y se utiliza para separar un control desde su propio contenido.
Pensando de forma gráfica, ¿cuál es la diferencia entre las propiedades Margin y Padding? 🤔
Por ejemplo, agreguemos cuatro botones, veremos dos pantallas las cuales tendrán las propiedades de Padding y Margin respectivamente con los vales “0,300,0,0”.
Ahora aprendamos sobre las propiedades Translations 😍
Hay dos propiedades que nos permiten trasladar nuestros controles sobre los ejes Y y X (TranslationY y TranslationX) independientemente de los elementos que lo rodean. Esta propiedad recibe un valor entero (Integer). Lo que más me gusta de esta propiedad es que es muy útil hacer interfaces de usuario más interesantes, diferentes y divertidas ya que me permite superponer mis controles dentro de la página. 😎
¡Practiquemos!
En el primer escenario agregamos el primer botón la propiedad TranslationY con un valor de “300” y el segundo la propiedad TranslationX con un valor de “80”.
¡Eso todo! ¡Espero que este artículo te haya sido útil!
Gracias por leerlo 💚 !!!
Artículo en inglés: https://askxammy.com/understanding-the-differences-between-margin-padding-and-translation-properties/
Referencias: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding
