Opciones de diseño en Xamarin.Forms

Descarga del ejemplo

Cada Xamarin.Forms vista tiene propiedades HorizontalOptions y VerticalOptions, de tipo LayoutOptions. En este artículo se explica el efecto que tiene cada valor LayoutOptions en la alineación y expansión de una vista.

Información general

La LayoutOptions estructura encapsula dos preferencias de diseño:

• Alineación: la alineación preferida de la vista, que determina su posición y tamaño dentro de su diseño primario.
• Expansión: solo la usa un e indica si la vista debe usar espacio adicional, si está disponible.

Estas preferencias de diseño se pueden aplicar a , en relación con su elemento primario, estableciendo la propiedad View _View_HorizontalOptions Xamarin_Forms View data-linktype="absolute-path">o HorizontalOptions Xamarin_Forms _View_VerticalOptions" data-linktype="absolute-path">VerticalOptionsViewLayoutOptions de en uno de los campos públicos de la estructura. Los campos públicos son los siguientes:

• Start
• Center
• End
• Fill
• StartAndExpand
• CenterAndExpand
• EndAndExpand
• FillAndExpand

Los Start campos , , y se usan para definir la CenterEndFill alineación de la vista dentro del diseño primario:

• Para la alineación horizontal, coloca en el lado izquierdo del diseño primario y, para la alineación vertical, coloca en la parte superior StartView del diseño View primario.
• Para la alineación horizontal y vertical, Center centra horizontal o verticalmente View .
• Para la alineación horizontal, coloca en el lado derecho del diseño primario y, para la alineación vertical, coloca en la parte inferior EndView del diseño View primario.
• Para la alineación horizontal, garantiza que rellena el ancho del diseño primario y, en el caso de la alineación vertical, se asegura de que rellena el alto FillView del diseño View primario.

Los valores , , y se usan para definir la preferencia de alineación y si la vista ocupará más espacio si StartAndExpand está disponible dentro del elemento CenterAndExpandEndAndExpandFillAndExpandStackLayout primario.

Alineación

La alineación controla cómo se coloca una vista dentro de su diseño primario cuando el diseño primario contiene espacio sin usar (es decir, el diseño primario es mayor que el tamaño combinado de todos sus elementos secundarios).

Solo respeta los campos , , y de las vistas secundarias que se StackLayout encuentran en la dirección opuesta a la StartCenterEndFillLayoutOptionsStackLayout orientación. Por lo tanto, las vistas secundarias de un objeto orientado verticalmente pueden establecer sus propiedades StackLayout Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptionsStartCenterEnd en Fill uno de los campos , , o . De forma similar, las vistas secundarias dentro de un objeto orientado horizontalmente pueden establecer sus propiedades StackLayout Xamarin_Forms StackLayout _View_VerticalOptions" data-linktype="absolute-path">VerticalOptionsStartCenterEnd en Fill uno de los campos , , o .

No respeta los campos , , y de las vistas secundarias que StackLayout se encuentran en la misma dirección que la StartCenterEndFillLayoutOptionsStackLayout orientación. Por lo tanto, un objeto orientado verticalmente omite los campos , , o si se establecen en las propiedades de Xamarin_Forms StackLayoutStartCenterEndFillStackLayout _View_VerticalOptions" data-linktype="absolute-path">VerticalOptions de vistas secundarias. De forma similar, un objeto orientado horizontalmente omite los campos , , o si se establecen en las propiedades de Xamarin_Forms StackLayoutStartCenterEndFillStackLayout _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptions de vistas secundarias.

En el ejemplo de código XAML siguiente se muestra una propiedad orientada verticalmente en la que cada elemento secundario establece su propiedad StackLayoutLabelStackLayout data-linktype="absolute-path">de Xamarin_Forms _View_HorizontalOptions" HorizontalOptions en uno de los cuatro campos de alineación de la LayoutOptions estructura :

<StackLayout Margin="0,20,0,0">
  ...
  <Label Text="Start" BackgroundColor="Gray" HorizontalOptions="Start" />
  <Label Text="Center" BackgroundColor="Gray" HorizontalOptions="Center" />
  <Label Text="End" BackgroundColor="Gray" HorizontalOptions="End" />
  <Label Text="Fill" BackgroundColor="Gray" HorizontalOptions="Fill" />
</StackLayout>

El código de C# equivalente se muestra a continuación:

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },
    new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },
    new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },
    new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }
  }
};

El código da como resultado el diseño que se muestra en las capturas de pantalla siguientes:

Expansión

La expansión controla si una vista ocupará más espacio, si está disponible, dentro de StackLayout un . Si contiene espacio sin usar (es decir, es mayor que el tamaño combinado de todos sus elementos secundarios), todas las vistas secundarias que solicitan la expansión comparten el espacio sin usar estableciendo sus propiedades StackLayoutStackLayout Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptions o Xamarin_Forms StackLayout _View_VerticalOptions" data-linktype="absolute-path">VerticalOptionsLayoutOptionsAndExpand en un campo que usa el sufijo . Tenga en cuenta que cuando se usa todo el StackLayout espacio de , las opciones de expansión no tienen ningún efecto.

Un elemento StackLayout solo puede expandir las vistas secundarias en la dirección de su orientación. Por lo tanto, un orientado verticalmente puede expandir las vistas secundarias que establecen sus propiedades StackLayoutStackLayout data-linktype="absolute-path">de Xamarin_Forms _View_VerticalOptions" en uno de los campos VerticalOptions , , o , StartAndExpandCenterAndExpandEndAndExpandFillAndExpand si contiene StackLayout espacio no utilizado. De forma similar, un objeto orientado horizontalmente puede expandir las vistas secundarias que establecen sus propiedades StackLayoutStackLayout data-linktype="absolute-path">de Xamarin_Forms _View_HorizontalOptions" en uno de los campos HorizontalOptions , , o , StartAndExpandCenterAndExpandEndAndExpandFillAndExpand si contiene StackLayout espacio no utilizado.

Un StackLayout no puede expandir las vistas secundarias en la dirección opuesta a su orientación. Por lo tanto, en una vista orientada verticalmente, establecer la propiedad StackLayout Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptionsStartAndExpand en Start una vista secundaria tiene el mismo efecto que establecer la propiedad en .

En el ejemplo de código XAML siguiente se muestra una propiedad orientada verticalmente en la que cada elemento secundario establece su propiedad StackLayoutLabelStackLayout data-linktype="absolute-path">de Xamarin_Forms _View_VerticalOptions" VerticalOptions en uno de los cuatro campos de expansión de la LayoutOptions estructura :

<StackLayout Margin="0,20,0,0">
  ...
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Start" BackgroundColor="Gray" VerticalOptions="StartAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Center" BackgroundColor="Gray" VerticalOptions="CenterAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="End" BackgroundColor="Gray" VerticalOptions="EndAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Fill" BackgroundColor="Gray" VerticalOptions="FillAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
</StackLayout>

El código de C# equivalente se muestra a continuación:

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }
  }
};

El código da como resultado el diseño que se muestra en las capturas de pantalla siguientes:

Cada Label uno ocupa la misma cantidad de espacio dentro de StackLayout . Sin embargo, solo la propiedad final , que establece su Xamarin_Forms LabelLabel _View_VerticalOptions" data-linktype="absolute-path">VerticalOptions en tiene un tamaño FillAndExpand diferente. Además, cada uno está separado por un pequeño rojo , que permite ver fácilmente el espacio que LabelBoxViewLabel ocupa.

Resumen

En este artículo se explica el efecto que tiene cada valor LayoutOptions de estructura en la alineación y expansión de una vista, en relación con su elemento primario. Los campos , , y se usan para definir la alineación de la vista dentro del diseño primario, y los campos , , y se usan para definir la preferencia de alineación y para determinar si la vista ocupará más espacio, si está StartCenterEndFillStartAndExpandCenterAndExpandEndAndExpandFillAndExpand disponible, StackLayout dentro de un .

Vínculos relacionados

• LayoutOptions (ejemplo)
• LayoutOptions