Hay cuatro grupos de controles que se usan para crear la interfaz de usuario de una aplicación Xamarin.Forms.
1- Pages (Paginas): Las Paginas de Xamarin.Forms representan la pantalla en las aplicaciones de multi-plataforma (cross-platform). Mas adelante profundizaremos en este tema.
2- Layouts (Capas): Las capas se puedes considerar como contenedores que se usan para componer vistas en la estructura lógica de la aplicación. Mas adelante profundizaremos en el tema.
3- Views (Vistas): Las vistas son controles mostrados en la interfaz de usuario, como etiquetas (Labels), botones (Button)) y cuadros de texto (Entry). Mas adelante profundizaremos en el tema.
4- Cells (Celdas): Las celdas son elementos especializados usados por los objetos en una lista y describen como cada objeto en la lista debe des dibujado. Mas adelante profundizaremos en el tema.
StackLayout
El StackLayout (o capa fija) simplifica el desarrollo de cross-platform (multi-plataforma) ordenando automáticamente los controles en la pantalla independientemente de el tamaño de esta. Cada elemento hijo es posicionado uno después de otro ya sea horizontal o verticalmente añadidos. La cantidad de espacio que usará el StackLayout depende de los valores asignados a las propiedades HorizontalOptions y VerticalOptions. Por defecto el StackLayout usará es espacio completo de la pantalla.
El siguiente código XAML muestra un ejemplo del uso de StackLayout para ordenar tres controles Label (etiquetas):
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample1" Padding="20"> <StackLayout Spacing="10"> <Label Text="Stop" BackgroundColor="Red" Font="20" /> <Label Text="Slow down" BackgroundColor="Yellow" Font="20" /> <Label Text="Go" BackgroundColor="Green" Font="20" /> </StackLayout> </ContentPage> |
El código equivalente en C# seria el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
public class StackLayoutExample : ContentPage { public StackLayoutExample() { Padding = new Thickness(20); var red = new Label { Text = "Stop", BackgroundColor = Color.Red, FontSize = 20 }; var yellow = new Label { Text = "Slow down", BackgroundColor = Color.Yellow, FontSize = 20 }; var green = new Label { Text = "Go", BackgroundColor = Color.Green, FontSize = 20 }; Content = new StackLayout { Spacing = 10, Children = { red, yellow, green } }; } } |
Por defecto el StackLayout coge orientación vertical como se muestra en la siguiente imagen:
Podemos cambiar la orientación del StackLayout y mostrar las etiquetas (Label)
|
1 |
Orientation = "Horizontal" |
O podemos hacer que los objetos se muestren en la parte inferior de la pantalla con la siguiente opción:
|
1 |
VerticalOptions = "End" |
Podemos establecer el tamaño de los controles con las propiedades HeightRequest y WidthRequest.
– HeightRequest:a Asignará la altura deseada al objeto.
– WidthRequest: Asignará la anchura deseada al objecto.
|
1 |
<Label Text="Stop" BackgroundColor="Red" Font="20" WidthRequest="100" HeihgtRequest="50" /> |