Margen y relleno

Las propiedades Margin y Padding controlan el comportamiento del 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 propiedad Xamarin_Forms _View_Margin" data-linktype="absolute-path">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 Margin vecinos. Margin Los valores se pueden especificar en las Margin diseño y vista.
• La propiedad Xamarin_Forms _Layout_Padding" data-linktype="absolute-path">representa la distancia entre un elemento y sus elementos secundarios, y se usa para separar el control de su propio Padding contenido. Padding Los valores se pueden especificar en las Padding diseño.

En el diagrama siguiente se muestran los dos conceptos:

Tenga en cuenta que Xamarin_Forms _View_Margin" data-linktype="absolute-path">Margin 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, ya que la distancia entre un elemento y cualquier contenido será el margen más el relleno.

Especificar un grosor

Las propiedades Xamarin_Forms _View_Margin" data-linktype="absolute-path">Margin y Xamarin_Forms Margin _Layout_Padding" data-linktype="absolute-path">PaddingThickness son de tipo . 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, y el valor vertical se aplica simétricamente a los lados superior e inferior del elemento.
• Cree una estructura definida por cuatro valores distintos que se aplican a los lados Thickness izquierdo, superior, derecho e inferior del elemento.

En el siguiente ejemplo de código XAML 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) }
  }
};

Resumen

En este artículo se ha mostrado la diferencia entre las propiedades _View_Margin Xamarin_Forms data-linktype="absolute-path">y Margin Xamarin_Forms Margin _Layout_Padding" data-linktype="absolute-path">" de Xamarin_Forms _Layout_Padding" data-linktype="absolute-path">y cómo Padding establecerlas. Las propiedades controlan el comportamiento del diseño cuando se representa un elemento en la interfaz de usuario.

Vínculos relacionados

• Xamarin_Forms _View_Margin" data-linktype="absolute-path">Margin
• Xamarin_Forms _Layout_Padding" data-linktype="absolute-path">Padding
• Thickness