The Xamarin.Forms FlexLayout
Descarga del ejemploUse FlexLayout para apilar o ajustar una colección de vistas secundarias.
es Xamarin.FormsFlexLayout una novedad de la Xamarin.Forms versión 3.0. Se basa en el módulo de diseño de cuadro flexiblede CSS, conocido normalmente como diseño flexible o flex-box,denominado así porque incluye muchas opciones flexibles para organizar los elementos secundarios dentro del diseño.
FlexLayoutes similar a en que puede organizar sus elementos secundarios Xamarin.FormsStackLayout horizontal y verticalmente en una pila. Sin embargo, también es capaz de ajustar sus elementos secundarios si hay demasiados para caber en una sola fila o columna, y también tiene muchas opciones de orientación, alineación y adaptación a varios tamaños de FlexLayout pantalla.
FlexLayoutderiva de y hereda una propiedad Layout<View> Xamarin_Forms FlexLayout _Layout_1_Children" data-linktype="absolute-path">Children propiedad de tipo IList<View> .
FlexLayout define seis propiedades enlazables públicas y cinco propiedades enlazables adjuntas que afectan al tamaño, la orientación y la alineación de sus elementos secundarios. (Si no está familiarizado con las propiedades enlazables adjuntas, consulte el artículo Propiedades adjuntas). Estas propiedades se describen en detalle en las secciones siguientes de Las propiedades enlazables en detalle y Las propiedades enlazables adjuntas en detalle. Sin embargo, este artículo comienza con una sección sobre algunos escenarios de uso comunes de que describe muchas de estas propiedades de forma más informal. Hacia el final del artículo, verá cómo combinar con hojas FlexLayoutFlexLayout.
Escenarios de uso comunes
El programa de ejemplo FlexLayoutDemos contiene varias páginas que muestran algunos usos comunes de y le permite experimentar con sus propiedades.
Uso de FlexLayout para una pila simple
En la página Pila simple se muestra cómo sustituir por un pero con un marcado más StackLayout sencillo. Todo en este ejemplo se define en la página XAML. contiene FlexLayout cuatro elementos secundarios:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.SimpleStackPage"
Title="Simple Stack">
<FlexLayout Direction="Column"
AlignItems="Center"
JustifyContent="SpaceEvenly">
<Label Text="FlexLayout in Action"
FontSize="Large" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
<Button Text="Do-Nothing Button" />
<Label Text="Another Label" />
</FlexLayout>
</ContentPage>
Esta es la página que se ejecuta en iOS, Android y Universal Windows Platform:
En el archivo FlexLayoutFlexLayout se muestran tres propiedades de :
La Xamarin_Forms _FlexLayout_Direction" data-linktype="absolute-path">propiedad se establece en
Directionun valor de laFlexDirectionenumeración . El valor predeterminado esRow. Establecer la propiedad enColumnhace que los elementos secundarios de seFlexLayoutordene en una sola columna de elementos.Cuando los elementos de un se organizan en una columna, se dice que tiene un eje
FlexLayoutprincipal vertical y unFlexLayoutFlexLayoutcruzado horizontal.FlexLayoutLa propiedad Xamarin_Forms _FlexLayout_AlignItems" data-linktype="absolute-path">es de tipo y especifica cómo se alinean los elementos en el
AlignItemsFlexAlignItemseje cruzado. LaCenteropción hace que cada elemento se centre horizontalmente.Si usara un en lugar de para esta tarea, centraría todos los elementos asignando la propiedad
StackLayoutde cada elemento aFlexLayoutHorizontalOptionsCenter. LaHorizontalOptionspropiedad no funciona para los secundarios de , pero la propiedad única logra el mismoFlexLayoutAlignItemsobjetivo. Si es necesario, puede usar la propiedadAlignSelfenlazable adjunta para invalidar laAlignItemspropiedad para elementos individuales:<Label Text="FlexLayout in Action" FontSize="Large" FlexLayout.AlignSelf="Start" />Con ese cambio, este se coloca en el borde izquierdo de cuando el orden de lectura es de izquierda
LabelFlexLayouta derecha.La propiedad Xamarin_Forms _FlexLayout_JustifyContent" data-linktype="absolute-path">es de tipo y especifica cómo se organizan los elementos en el
JustifyContentFlexJustifyeje principal. La opción asigna todo el espacio vertical que queda igual entre todos los elementos y por encima del primer elemento, y porSpaceEvenlydebajo del último elemento.Si usara , tendría que asignar la propiedad de cada elemento
StackLayouta para lograr un efectoVerticalOptionsCenterAndExpandsimilar. Pero la opción asignaría el doble de espacio entre cada elemento que antesCenterAndExpanddel primer elemento y después del último elemento. Puede imitar laCenterAndExpandopción deVerticalOptionsestableciendo la propiedad de enJustifyContentFlexLayoutSpaceAround.
Estas FlexLayout propiedades se de abordan con más detalle en la sección Propiedades FlexLayout
Uso de FlexLayout para ajustar elementos
En la página Photo Wrapping (Ajuste de fotos) del ejemplo FlexLayoutDemos se muestra cómo puede encapsular sus elementos secundarios en filas o columnas adicionales. El archivo XAML crea una instancia de FlexLayout y le asigna dos propiedades:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.PhotoWrappingPage"
Title="Photo Wrapping">
<Grid>
<ScrollView>
<FlexLayout x:Name="flexLayout"
Wrap="Wrap"
JustifyContent="SpaceAround" />
</ScrollView>
<ActivityIndicator x:Name="activityIndicator"
IsRunning="True"
VerticalOptions="Center" />
</Grid>
</ContentPage>
La propiedad de este no se establece, por lo que tiene el valor predeterminado de , lo que significa que los secundarios están organizados en filas y el DirectionFlexLayout eje principal es Row horizontal.
La Xamarin_Forms _FlexLayout_Wrap" data-linktype="absolute-path">propiedad es Wrap de un tipo de enumeración FlexWrap . Si hay demasiados elementos para caber en una fila, esta configuración de propiedad hace que los elementos se ajusten a la fila siguiente.
Observe que FlexLayout es un elemento secundario de ScrollView . Si hay demasiadas filas para caber en la página, tiene una propiedad predeterminada de ScrollView y permite el desplazamiento OrientationVertical vertical.
La propiedad asigna espacio restante en el eje principal (el eje horizontal) para que cada elemento esté rodeado por la JustifyContent misma cantidad de espacio en blanco.
El archivo de código subyacente accede a una colección de fotos de ejemplo y las agrega a la Children colección de FlexLayout :
public partial class PhotoWrappingPage : ContentPage
{
// Class for deserializing JSON list of sample bitmaps
[DataContract]
class ImageList
{
[DataMember(Name = "photos")]
public List<string> Photos = null;
}
public PhotoWrappingPage ()
{
InitializeComponent ();
LoadBitmapCollection();
}
async void LoadBitmapCollection()
{
using (WebClient webClient = new WebClient())
{
try
{
// Download the list of stock photos
Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json");
byte[] data = await webClient.DownloadDataTaskAsync(uri);
// Convert to a Stream object
using (Stream stream = new MemoryStream(data))
{
// Deserialize the JSON into an ImageList object
var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream);
// Create an Image object for each bitmap
foreach (string filepath in imageList.Photos)
{
Image image = new Image
{
Source = ImageSource.FromUri(new Uri(filepath))
};
flexLayout.Children.Add(image);
}
}
}
catch
{
flexLayout.Children.Add(new Label
{
Text = "Cannot access list of bitmap files"
});
}
}
activityIndicator.IsRunning = false;
activityIndicator.IsVisible = false;
}
}
Este es el programa en ejecución, que se desplaza progresivamente de arriba abajo:
la página de ajuste deDiseño de página con FlexLayout
Hay un diseño estándar en el diseño web denominado "gracias" porque es un formato de diseño que es muy deseable, pero a menudo difícil de lograr con esfuerzo. El diseño consta de un encabezado en la parte superior de la página y un pie de página en la parte inferior, que se extienden al ancho completo de la página. Ocupar el centro de la página es el contenido principal, pero a menudo con un menú en columnas a la izquierda del contenido e información complementaria (a veces denominada área de reserva) a la derecha. En la sección 5.4.1 de la especificación css Flexible Box Layout se describe cómo se puede realizar el diseño del grial de la sintaxis con una caja flexible.
En la página Diseño de grial del ejemplo FlexLayoutDemos se muestra una implementación sencilla de este diseño mediante una anidada en otra. Dado que esta página está diseñada para un teléfono en modo vertical, las áreas a la izquierda y derecha del área de contenido tienen solo 50 píxeles de ancho:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.HolyGrailLayoutPage"
Title="Holy Grail Layout">
<FlexLayout Direction="Column">
<!-- Header -->
<Label Text="HEADER"
FontSize="Large"
BackgroundColor="Aqua"
HorizontalTextAlignment="Center" />
<!-- Body -->
<FlexLayout FlexLayout.Grow="1">
<!-- Content -->
<Label Text="CONTENT"
FontSize="Large"
BackgroundColor="Gray"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FlexLayout.Grow="1" />
<!-- Navigation items-->
<BoxView FlexLayout.Basis="50"
FlexLayout.Order="-1"
Color="Blue" />
<!-- Aside items -->
<BoxView FlexLayout.Basis="50"
Color="Green" />
</FlexLayout>
<!-- Footer -->
<Label Text="FOOTER"
FontSize="Large"
BackgroundColor="Pink"
HorizontalTextAlignment="Center" />
</FlexLayout>
</ContentPage>
Aquí se está ejecutando:
Las áreas de navegación y de reserva se representan con un control a BoxView la izquierda y a la derecha.
El primero FlexLayout del archivo XAML tiene un eje principal vertical y contiene tres elementos secundarios organizados en una columna. Estos son el encabezado, el cuerpo de la página y el pie de página. El anidado FlexLayout tiene un eje principal horizontal con tres elementos secundarios organizados en una fila.
En este programa se muestran tres propiedades enlazables adjuntas:
La
Orderpropiedad enlazable adjunta se establece en el primerBoxView. Esta propiedad es un entero con un valor predeterminado de 0. Puede usar esta propiedad para cambiar el orden de diseño. Por lo general, los desarrolladores prefieren que el contenido de la página aparezca en el marcado antes de los elementos de navegación y los elementos de reserva. Si se establece la propiedad del primero en un valor menor que los demás elementos del mismo nivel, aparecerá como elOrderprimer elemento de laBoxViewfila. Del mismo modo, puede asegurarse de que un elemento aparece en último lugar estableciendo laOrderpropiedad en un valor mayor que sus elementos del mismo nivel.La
Basispropiedad enlazable adjunta se establece en los dosBoxViewelementos para darles un ancho de 50 píxeles. Esta propiedad es de tipoFlexBasis, una estructura que define una propiedad estática de tipo denominada , que es el valorFlexBasisAutopredeterminado. Puede usar para especificar un tamaño de píxel o un porcentaje que indique cuánto espacio ocupa elBasiselemento en el eje principal. Se llama base porque especifica un tamaño de elemento que es la base de todo el diseño posterior.La
Growpropiedad se establece en el elemento anidado y en el elemento secundario que representa elLayoutLabelcontenido. Esta propiedad es de tipofloaty tiene un valor predeterminado de 0. Cuando se establece en un valor positivo, todo el espacio restante a lo largo del eje principal se asigna a ese elemento y a elementos del mismo nivel con valores positivos deGrow. El espacio se asigna proporcionalmente a los valores, algo parecido a la especificación de estrella enGridun .La primera propiedad adjunta se establece en el anidado , lo que indica que ocupará todo el espacio vertical no
GrowFlexLayoututilizado dentro delFlexLayoutFlexLayoutexterior. La segunda propiedad adjunta se establece en que representa el contenido, lo que indica que este contenido va a ocupar todo el espacio horizontal no utilizadoGrowLabeldentro delFlexLayoutinterior.También hay una propiedad enlazable adjunta similar que se puede usar cuando el tamaño de los secundarios supera el tamaño de , pero no se desea
ShrinkFlexLayoutajustar.
Elementos de catálogo con FlexLayout
La página Elementos de catálogo del ejemplo FlexLayoutDemos es similar al ejemplo 1 de la sección 1.1 de la especificación css Flex Layout Box, salvo que muestra una serie de imágenes y descripciones desplazables horizontalmente de tres monos:
la página Elementos deCada uno de los tres monos es un contenido en un que tiene una altura y un ancho explícitos, y que también es un elemento secundario FlexLayoutFrame de un FlexLayout mayor. En este archivo XAML, la mayoría de las propiedades de los elementos secundarios se especifican en estilos, todos menos uno de los cuales FlexLayout es un estilo implícito:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.CatalogItemsPage"
Title="Catalog Items">
<ContentPage.Resources>
<Style TargetType="Frame">
<Setter Property="BackgroundColor" Value="LightYellow" />
<Setter Property="BorderColor" Value="Blue" />
<Setter Property="Margin" Value="10" />
<Setter Property="CornerRadius" Value="15" />
</Style>
<Style TargetType="Label">
<Setter Property="Margin" Value="0, 4" />
</Style>
<Style x:Key="headerLabel" TargetType="Label">
<Setter Property="Margin" Value="0, 8" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="Blue" />
</Style>
<Style TargetType="Image">
<Setter Property="FlexLayout.Order" Value="-1" />
<Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>
<Style TargetType="Button">
<Setter Property="Text" Value="LEARN MORE" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="White" />
<Setter Property="BackgroundColor" Value="Green" />
<Setter Property="BorderRadius" Value="20" />
</Style>
</ContentPage.Resources>
<ScrollView Orientation="Both">
<FlexLayout>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Seated Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
<Label Text=" • Doesn't make a lot of noise" />
<Label Text=" • Often smiles mysteriously" />
<Label Text=" • Sleeps sitting up" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}"
WidthRequest="180"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Banana Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="Watch this monkey eat a giant banana." />
<Label Text=" • More fun than a barrel of monkeys" />
<Label Text=" • Banana not included" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}"
WidthRequest="240"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Face-Palm Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
<Label Text=" • Cynical but not unfriendly" />
<Label Text=" • Seven varieties of grimaces" />
<Label Text=" • Doesn't laugh at your jokes" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}"
WidthRequest="180"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
</FlexLayout>
</ScrollView>
</ContentPage>
El estilo implícito de Image incluye la configuración de dos propiedades enlazables adjuntas de Flexlayout :
<Style TargetType="Image">
<Setter Property="FlexLayout.Order" Value="-1" />
<Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>
El valor de –1 hace que el elemento se muestre primero en cada una de las vistas anidadas, independientemente de su Order posición dentro de la colección de elementos ImageFlexLayout secundarios. La AlignSelf propiedad de hace que se centre dentro de CenterImageFlexLayout . Esto invalida el valor de la propiedad , que tiene un valor predeterminado de , lo que significa que los secundarios y se extienden hasta el ancho AlignItemsStretch completo de LabelButtonFlexLayout .
Dentro de cada una de FlexLayout las tres vistas, un espacio Label en blanco precede a , pero tiene un valor de ButtonGrow 1. Esto significa que todo el espacio vertical adicional se asigna a este espacio en blanco, que inserta eficazmente LabelButton en la parte inferior.
Propiedades enlazables en detalle
Ahora que ha visto algunas aplicaciones comunes de , las propiedades de FlexLayout se pueden explorar con más FlexLayout detalle.
FlexLayout define seis propiedades enlazables que se establecen en el propio , ya sea en código o XAML, para FlexLayout controlar la orientación y la alineación. (Una de estas propiedades, Xamarin_Forms _FlexLayout_Position" data-linktype="absolute-path">, no Position se trata en este artículo).
Puede experimentar con las cinco propiedades enlazables restantes mediante la página Experimento del ejemplo FlexLayoutDemos. Esta página permite agregar o quitar elementos secundarios de y para establecer combinaciones FlexLayout de las cinco propiedades enlazables. Todos los elementos secundarios de son vistas de varios colores y tamaños, con la propiedad establecida en un número correspondiente FlexLayout a su posición en la LabelTextChildren colección.
Cuando se inicia el programa, cinco Picker vistas muestran los valores predeterminados de estas cinco FlexLayout propiedades. Hacia FlexLayout la parte inferior de la pantalla contiene tres elementos secundarios:
Cada una de las vistas tiene un fondo gris que muestra el espacio asignado a Label ese dentro Label de FlexLayout . El fondo del FlexLayout propio es Alice Blue. Ocupa todo el área inferior de la página, excepto un pequeño margen a la izquierda y a la derecha.
La propiedad Direction
La Xamarin_Forms _FlexLayout_Direction" data-linktype="absolute-path">propiedad es de tipo , una enumeración Direction con cuatro FlexDirection miembros:
ColumnColumnReverse(o "column-reverse" en XAML)Row, la opción predeterminadaRowReverse(o "row-reverse" en XAML)
En XAML, puede especificar el valor de esta propiedad mediante los nombres de miembro de enumeración en minúsculas, mayúsculas o minúsculas, o bien puede usar dos cadenas adicionales que se muestran entre paréntesis que son iguales que los indicadores CSS. (Las cadenas "column-reverse" y "row-reverse" se definen en la clase usada por FlexDirectionTypeConverter el analizador XAML).
Esta es la página Experimento que muestra (de izquierda a derecha), la Column dirección, la dirección y la ColumnReverse dirección:
Observe que, Reverse para las opciones, los elementos comienzan en la parte derecha o inferior.
La propiedad Wrap
La Xamarin_Forms _FlexLayout_Wrap" data-linktype="absolute-path">propiedad es de tipo , una enumeración Wrap con tres FlexWrap miembros:
NoWrap, la opción predeterminadaWrapReverse(o "wrap-reverse" en XAML)
De izquierda a derecha, estas pantallas muestran NoWrap las opciones y para WrapReverse 12 secundarios:
Cuando la propiedad se establece en y el eje principal está restringido (como en este programa) y el eje principal no es lo suficientemente ancho o alto como para ajustarse a todos los elementos secundarios, los intentos de hacer que los elementos se hagan más pequeños, como se muestra en la captura de pantalla de WrapNoWrapFlexLayout iOS. Puede controlar la reducción de los elementos con la Shrink propiedad enlazable adjunta.
La propiedad JustifyContent
La Xamarin_Forms _FlexLayout_JustifyContent" data-linktype="absolute-path">propiedad es de tipo , una enumeración JustifyContent con seis FlexJustify miembros:
Start(o "flex-start" en XAML), el valor predeterminadoCenterEnd(o "flex-end" en XAML)SpaceBetween(o "espacio entre" en XAML)SpaceAround(o "espacio alrededor" en XAML)SpaceEvenly
Esta propiedad especifica cómo se separan los elementos en el eje principal, que es el eje horizontal de este ejemplo:
En las tres capturas de pantalla, Wrap la propiedad se establece en Wrap . El Start valor predeterminado se muestra en la captura de pantalla anterior de Android. La captura de pantalla de iOS aquí muestra Center la opción: todos los elementos se mueven al centro. Las otras tres opciones que comienzan por la palabra Space asignan el espacio adicional no ocupado por los elementos. SpaceBetween asigna el espacio igualmente entre los elementos; coloca el mismo espacio alrededor de cada elemento, mientras que coloca el mismo espacio entre cada elemento y antes del primer elemento y después del SpaceAround último elemento de la SpaceEvenly fila.
La propiedad AlignItems
La Xamarin_Forms _FlexLayout_AlignItems" data-linktype="absolute-path">propiedad es de tipo , una enumeración AlignItems con cuatro FlexAlignItems miembros:
Stretch, la opción predeterminadaCenterStart(o "flex-start" en XAML)End(o "flex-end" en XAML)
Se trata de una de las dos propiedades (la otra es ) que indica cómo se alinean los elementos secundarios AlignContent en el eje cruzado. Dentro de cada fila, los elementos secundarios se extienden (como se muestra en la captura de pantalla anterior) o se alinean en el inicio, el centro o el final de cada elemento, como se muestra en las tres capturas de pantalla siguientes:
páginaEn la captura de pantalla de iOS, se alinean las parte superiores de todos los secundarios. En las capturas de pantalla de Android, los elementos se centra verticalmente en función del elemento secundario más alto. En la captura de pantalla de UWP, se alinean las parte inferiores de todos los elementos.
Para cualquier elemento individual, la AlignItems configuración se puede invalidar con la propiedad AlignSelf enlazable adjunta.
La propiedad AlignContent
La Xamarin_Forms _FlexLayout_AlignContent" data-linktype="absolute-path">propiedad es de tipo , una enumeración AlignContent con siete FlexAlignContent miembros:
Stretch, la opción predeterminadaCenterStart(o "flex-start" en XAML)End(o "flex-end" en XAML)SpaceBetween(o "espacio entre" en XAML)SpaceAround(o "espacio alrededor" en XAML)SpaceEvenly
Al AlignItems igual que , la propiedad también alinea los elementos secundarios en el eje AlignContent cruzado, pero afecta a filas o columnas completas:
En la captura de pantalla de iOS, ambas filas están en la parte superior; en la captura de pantalla de Android están en el centro; y en la captura de pantalla de UWP están en la parte inferior. Las filas también se pueden espaciado de varias maneras:
no AlignContent tiene ningún efecto cuando solo hay una fila o columna.
Propiedades enlazables adjuntas en detalle
FlexLayout define cinco propiedades enlazables adjuntas. Estas propiedades se establecen en los elementos secundarios de FlexLayout y pertenecen solo a ese elemento secundario determinado.
La propiedad AlignSelf
La AlignSelf propiedad enlazable adjunta es de tipo FlexAlignSelf , una enumeración con cinco miembros:
Auto, la opción predeterminadaStretchCenterStart(o "flex-start" en XAML)End(o "flex-end" en XAML)
Para cualquier elemento secundario individual de FlexLayout , esta configuración de propiedad invalida el conjunto de propiedades en el propio AlignItemsFlexLayout . El valor predeterminado de Auto medias para usar la AlignItems configuración.
Para un Label elemento denominado label (o ejemplo), puede establecer la AlignSelf propiedad en código de la siguiente forma:
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);
Observe que no hay ninguna referencia al FlexLayout elemento primario de Label . En XAML, establece la propiedad de la siguiente forma:
<Label ... FlexLayout.AlignSelf="Center" ... />
La propiedad Order
La propiedad Order es de tipo int. El valor predeterminado es 0.
La Order propiedad permite cambiar el orden en que se organizan los secundarios de FlexLayout . Normalmente, los elementos secundarios de FlexLayout se organizan en el mismo orden en que aparecen en la Children colección. Puede invalidar este orden estableciendo la propiedad enlazable adjunta en un valor entero distinto de Order cero en uno o varios secundarios. A continuación, organiza sus elementos secundarios en función del valor de la propiedad en cada elemento secundario, pero los elementos secundarios con la misma configuración se organizan en el orden en que aparecen FlexLayoutOrder en la OrderChildren colección.
La propiedad Basis
La propiedad enlazable adjunta indica la cantidad de espacio que se asigna a un Basis elemento secundario de en el eje FlexLayout principal. El tamaño especificado por la propiedad es el tamaño a lo largo Basis del eje principal del elemento FlexLayout primario. Por lo tanto, indica el ancho de un elemento secundario cuando los elementos secundarios se organizan en filas o el alto cuando los elementos secundarios Basis se organizan en columnas.
La Basis propiedad es de tipo , una estructura FlexBasis . El tamaño se puede especificar en unidades independientes del dispositivo o como un porcentaje del tamaño de FlexLayout . El valor predeterminado de la propiedad es la propiedad estática , lo que significa que se usa el ancho o alto BasisFlexBasis.Auto solicitados del elemento secundario.
En el código, puede establecer la propiedad de un denominado Basis en Labellabel 40 unidades independientes del dispositivo como esta:
FlexLayout.SetBasis(label, new FlexBasis(40, false));
El segundo argumento para el constructor se denomina e indica si el FlexBasis tamaño es relativo ( ) o absoluto ( isRelativetruefalse ). El argumento tiene un valor predeterminado de false , por lo que también puede usar el código siguiente:
FlexLayout.SetBasis(label, new FlexBasis(40));
Se define una float conversión implícita de a , por lo que puede FlexBasis simplificarla aún más:
FlexLayout.SetBasis(label, 40);
Puede establecer el tamaño en el 25 % del FlexLayout elemento primario de la siguiente forma:
FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));
Este valor fraccionrio debe estar en el intervalo de 0 a 1.
En XAML, puedes usar un número para un tamaño en unidades independientes del dispositivo:
<Label ... FlexLayout.Basis="40" ... />
O bien, puede especificar un porcentaje en el intervalo de 0 % a 100 %:
<Label ... FlexLayout.Basis="25%" ... />
La página Experimento base del ejemplo FlexLayoutDemos permite experimentar con la propiedad . La página muestra una columna ajustada de cinco elementos Label con colores de fondo y primer plano alterno. Dos Slider elementos permiten especificar valores para el segundo y cuarto BasisLabel :
página Del experimentoLa captura de pantalla de iOS de la izquierda muestra los dos elementos a los que se les Label da una altura en unidades independientes del dispositivo. La pantalla de Android muestra que se les han dado alturas que son una fracción de la altura total de FlexLayout . Si se establece en el 100 %, el elemento secundario es el alto de y se ajustará a la columna siguiente y ocupará toda la altura de esa columna, como se muestra en la captura de pantalla de UWP: Parece que los cinco elementos secundarios están organizados en una fila, pero en realidad están BasisFlexLayout organizados en cinco columnas.
La propiedad Grow
La Grow propiedad enlazable adjunta es de tipo int . El valor predeterminado es 0 y el valor debe ser mayor o igual que 0.
La propiedad desempeña un papel cuando la propiedad se establece en y la fila de los secundarios tiene un ancho total menor que el ancho de , o la columna de los secundarios tiene un alto más corto que GrowWrapNoWrapFlexLayoutFlexLayout . La propiedad indica cómo se aplica el espacio que Grow queda entre los secundarios.
En la página Experimento de crecimiento, cinco elementos de colores alternos se organizan en una columna y dos elementos permiten ajustar la propiedad del segundo y cuarto SliderGrowLabel . La captura de pantalla de iOS en el extremo izquierdo muestra las Grow propiedades predeterminadas de 0:
Si a un elemento secundario se le da un valor positivo, ese elemento secundario ocupa todo el espacio restante, como se muestra en la Grow captura de pantalla de Android. Este espacio también se puede asignar entre dos o más secundarios. En la captura de pantalla de UWP, la propiedad del segundo se establece en 0,5, mientras que la propiedad del cuarto es GrowLabelGrowLabel 1,5, lo que da al cuarto tres veces más espacio que el LabelLabel segundo.
La forma en que la vista secundaria usa ese espacio depende del tipo concreto de elemento secundario. Para , Label el texto se puede colocar dentro del espacio total de utilizando las propiedades y LabelHorizontalTextAlignmentVerticalTextAlignment .
La propiedad Shrink
La Shrink propiedad enlazable adjunta es de tipo int . El valor predeterminado es 1 y el valor debe ser mayor o igual que 0.
La propiedad desempeña un papel cuando la propiedad se establece en y el ancho agregado de una fila de secundarios es mayor que el ancho de , o el alto agregado de una sola columna de secundarios es mayor que el alto de ShrinkWrapNoWrapFlexLayoutFlexLayout . Normalmente, FlexLayout mostrará estos secundarios mediante la constricción de sus tamaños. La Shrink propiedad puede indicar qué secundarios tienen prioridad al mostrarse en sus tamaños completos.
La página Reducir experimento crea un objeto con una sola fila de cinco secundarios que requieren más espacio que el LabelFlexLayout ancho. La captura de pantalla de iOS de la izquierda muestra todos los Label elementos con valores predeterminados de 1:
la página Experimento deEn la captura de pantalla de Android, el valor del segundo se establece en 0 y se Shrink muestra en su ancho LabelLabel completo. Además, al cuarto Label se le da un valor mayor que uno y se ha Shrink reducido. La captura de pantalla de UWP muestra que ambos elementos reciben un valor de 0 para permitir que se muestren en su tamaño completo, si LabelShrink es posible.
Puede establecer los valores y para dar cabida a situaciones en las que los tamaños secundarios agregados a veces pueden ser menores o a veces mayores que GrowShrink el tamaño de FlexLayout .
Estilo CSS con FlexLayout
Puede usar la característica de estilo CSS introducida con 3.0 en conexión con FlexLayout . La página Elementos del catálogo CSS del ejemplo FlexLayoutDemos duplica el diseño de la página Elementos de catálogo, pero con una hoja de estilos CSS para muchos de los estilos:
la página Elementos del catálogo
El archivo CatalogItemsPage.xaml original tiene cinco definiciones en su Resources sección con 15 Setter objetos. En el archivo CssCatalogItemsPage.xaml, que se ha reducido a dos definiciones con solo cuatro Setter objetos. Estos estilos complementan la hoja de estilos CSS para las propiedades que la característica de estilo CSS no Xamarin.Forms admite actualmente:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.CssCatalogItemsPage"
Title="CSS Catalog Items">
<ContentPage.Resources>
<StyleSheet Source="CatalogItemsStyles.css" />
<Style TargetType="Frame">
<Setter Property="BorderColor" Value="Blue" />
<Setter Property="CornerRadius" Value="15" />
</Style>
<Style TargetType="Button">
<Setter Property="Text" Value="LEARN MORE" />
<Setter Property="BorderRadius" Value="20" />
</Style>
</ContentPage.Resources>
<ScrollView Orientation="Both">
<FlexLayout>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Seated Monkey" StyleClass="header" />
<Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
<Label Text=" • Doesn't make a lot of noise" />
<Label Text=" • Often smiles mysteriously" />
<Label Text=" • Sleeps sitting up" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Banana Monkey" StyleClass="header" />
<Label Text="Watch this monkey eat a giant banana." />
<Label Text=" • More fun than a barrel of monkeys" />
<Label Text=" • Banana not included" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Face-Palm Monkey" StyleClass="header" />
<Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
<Label Text=" • Cynical but not unfriendly" />
<Label Text=" • Seven varieties of grimaces" />
<Label Text=" • Doesn't laugh at your jokes" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
</FlexLayout>
</ScrollView>
</ContentPage>
En la primera línea de la sección se hace referencia a la hoja de estilos Resources CSS:
<StyleSheet Source="CatalogItemsStyles.css" />
Observe también que dos elementos de cada uno de los tres elementos incluyen StyleClass la configuración:
<Label Text="Seated Monkey" StyleClass="header" />
···
<Label StyleClass="empty" />
Estos hacen referencia a los selectores de la hoja de estilos CatalogItemsStyles.css:
frame {
width: 300;
height: 480;
background-color: lightyellow;
margin: 10;
}
label {
margin: 4 0;
}
label.header {
margin: 8 0;
font-size: large;
color: blue;
}
label.empty {
flex-grow: 1;
}
image {
height: 180;
order: -1;
align-self: center;
}
button {
font-size: large;
color: white;
background-color: green;
}
Aquí FlexLayout se hace referencia a varias propiedades enlazables adjuntas. En el selector, verá el atributo , que tiene un estilo vacío para proporcionar label.empty algo de espacio en blanco encima de flex-growLabelButton . El selector contiene un atributo y un atributo, que corresponden a imageorder propiedades align-selfFlexLayout enlazables adjuntas.
Ha visto que puede establecer propiedades directamente en y puede establecer propiedades enlazables adjuntas FlexLayout en los secundarios de FlexLayout . O bien, puede establecer estas propiedades indirectamente mediante estilos basados en XAML tradicionales o estilos CSS. Lo importante es conocer y comprender estas propiedades. Estas propiedades son lo que hace que FlexLayout el realmente flexible.
FlexLayout con Xamarin.University
Vídeo de Flex Layout 3.0