Margen y relleno

  • Artículo

Las propiedades Margin y Padding controlan el comportamiento de diseño cuando se representa un elemento en la interfaz de usuario. En este artículo se muestra la diferencia entre las dos propiedades y cómo establecerlas.

Información general

El margen y el relleno son conceptos de diseño relacionados:

  • La Margin propiedad representa la distancia entre un elemento y sus elementos adyacentes, y se usa para controlar la posición de representación del elemento y la posición de representación de sus vecinos. Margin los valores se pueden especificar en las clases de diseño y vista .
  • La Padding propiedad representa la distancia entre un elemento y sus elementos secundarios, y se usa para separar el control de su propio contenido. Padding los valores se pueden especificar en las clases de diseño .

En el diagrama siguiente se muestran los dos conceptos:

y conceptos de relleno

Tenga en cuenta que Margin los valores son aditivos. Por lo tanto, si dos elementos adyacentes especifican un margen de 20 píxeles, la distancia entre los elementos será de 40 píxeles. Además, el margen y el relleno son aditivos cuando se aplican ambos, en que la distancia entre un elemento y cualquier contenido será el margen más relleno.

Especificar un grosor

Las Margin propiedades y Padding son de tipo Thickness. Hay tres posibilidades al crear una Thickness estructura:

  • Cree una Thickness estructura definida por un único valor uniforme. El valor único se aplica a los lados izquierdo, superior, derecho e inferior del elemento.
  • Cree una Thickness estructura definida por valores horizontales y verticales. El valor horizontal se aplica simétricamente a los lados izquierdo y derecho del elemento, con el valor vertical que se aplica simétricamente a los lados superior e inferior del elemento.
  • Cree una Thickness estructura definida por cuatro valores distintos que se aplican a los lados izquierdo, superior, derecho e inferior del elemento.

En el ejemplo de código XAML siguiente se muestran las tres posibilidades:

<StackLayout Padding="0,20,0,0">
  <Label Text="Xamarin.Forms" Margin="20" />
  <Label Text="Xamarin.iOS" Margin="10, 15" />
  <Label Text="Xamarin.Android" Margin="0, 20, 15, 5" />
</StackLayout>

El código de C# equivalente se muestra en el ejemplo de código siguiente:

var stackLayout = new StackLayout {
  Padding = new Thickness(0,20,0,0),
  Children = {
    new Label { Text = "Xamarin.Forms", Margin = new Thickness (20) },
    new Label { Text = "Xamarin.iOS", Margin = new Thickness (10, 25) },
    new Label { Text = "Xamarin.Android", Margin = new Thickness (0, 20, 15, 5) }
  }
};

Nota

Thickness los valores pueden ser negativos, lo que suele ser clips o sobresibuja el contenido.

Resumen

En este artículo se ha mostrado la diferencia entre las Margin propiedades y Padding y cómo establecerlas. El comportamiento del diseño del control de propiedades cuando se representa un elemento en la interfaz de usuario.