▷ Todo sobre 【Layouts】 en Xamarin Forms

Al ingresar al mundo del desarrollo de Xamarin, los diseños en Xamarin Forms son un concepto importante a dominar, ya que a través de ellos podrá crear la interfaz gráfica que desea y elControles de Xamarinexactamente donde deben estar.

Algunos de estos controles se usan con más frecuencia que otros. Antes de entrar en diseños, te dejaré algunos conceptos para ayudarte a trabajar con diseños, como: B. Alineación, expansión, borde y relleno.

Antes de iniciar la publicación, quisiera agradecer a Luis Beltrán por incluir mi aporte en elprimer calendario de adviento de Xamarin, en el enlace puede ver muchas publicaciones excelentes sobre el desarrollo con Xamarin. Sin más preámbulos, ¡comencemos!

¡Consigue el Máster en Xamarin Forms!

Antes de comenzar, los invito a visitar la página de membresía de mi academia donde pueden encontrar:

–Cursos y talleres Xamarin
–Cursos y talleres en C#
–Cursos y talleres Blazor
– Cursos y talleres ASP.NET
– Cursos y talleres en muchas otras tecnologías

¡Todo al precio más bajo posible por tiempo limitado!

¡Echa un vistazo al Máster en Xamarin Forms!

Contenido

1 Opciones de diseño - Alineación
2 opciones de diseño - expansión
3 Margin y Padding y Xamarin Forms
4 Formularios StackLayout y Xamarin
- 4.1 ¿Cómo eliminar el espacio entre elementos de un StackLayout en Xamarin Forms?
- 4.2 Ejemplo de un StackLayout complejo en Xamarin Forms
5 AbsoluteLayout en Xamarin Forms (también escrito Absolute Layout)
6 Tutorial sobre RelativeLayout y Xamarin Forms
7 Formas Grid y Xamarin
- 7.1 Colocación de elementos en una cuadrícula en Xamarin Forms
- 7.2 Ejemplo de grilla en Xamarin Forms
8 ScrollView y Xamarin Forms

LayoutOptions - Alineación

Todos los diseños tienen un par de propiedades llamadas HorizontalOptions y VerticalOptions. Usamos estas propiedades para garantizar que el control se muestre dentro del contenedor de acuerdo con su valor. Supongamos que tenemos el siguiente caso:

<StackLayout> <Texto del botón="Rellenar"/> </StackLayout>

Esto nos daría el control que se muestra a continuación:

Esto se debe a que el valor de relleno tiene una propiedad llamada HorizontalOptions asignada por defecto, por lo que sería lo mismo:

<StackLayout> <Button Text="Rellenar" HorizontalOptions="Rellenar"/> </StackLayout>

La misma propiedad tiene otros valores que nos permiten personalizar los controles según nuestras necesidades, a saber: Inicio, Centrar y Expandir. Aunque su nombre es bastante explicativo, aquí lo vemos de forma práctica:

<StackLayout> <Button Text="Rellenar" HorizontalOptions="Rellenar"/> <Button Text="Iniciar" HorizontalOptions="Iniciar" /> <Button Text="Centro" HorizontalOptions="Centro" /> <Button Text=" Fin" HorizontalOptions="Fin" /> </StackLayout>

Si quisiéramos que esto funcionara pero en vertical y no en horizontal, tendríamos que cambiar la alineación del StackLayout y finalmente la propiedad HorizontalOptions a VerticalOptions:

<StackLayout Orientation="Horizontal"> <Button Text="Rellenar" VerticalOptions="Rellenar"/> <Button Text="Iniciar" VerticalOptions="Iniciar" /> <Button Text="Centro" VerticalOptions="Centro" /> <Button Text="Finalizar" VerticalOptions="Finalizar" /> </StackLayout>

Opciones de diseño - Extensión

Si hizo el ejemplo anterior, habrá notado que siempre tenemos una propiedad de Opciones vertical u horizontal que termina con "AndExpand". Analizaremos lo que está en juego en un ejemplo práctico.

Comencemos con el siguiente código:

<StackLayout> <BoxView BackgroundColor="Rojo" HeightRequest="1"/> <Label Text="Inicio" BackgroundColor="Gris" VerticalOptions="Centro" TextColor="Blanco"></Label> <BoxView BackgroundColor="Rojo " HeightRequest="1" /> <Label Text="Center" BackgroundColor="Gray" VerticalOptions="Center" TextColor="White"></Label> <BoxView BackgroundColor="Rojo" HeightRequest="1" /> < Label Text="Fin" BackgroundColor="Gris" VerticalOptions="Centro" TextColor="Blanco"></Label> <BoxView BackgroundColor="Rojo" HeightRequest="1" /> <Label Text="Fill" BackgroundColor=" Gris" VerticalOptions="Centro" TextColor="Blanco"></Etiqueta> </StackLayout>

Lo que resulta en:

Como podemos ver, tenemos 4 conjuntos de BoxViews con etiquetas y también vemos que queda un gran espacio debajo.

Si tuviéramos que cambiar la propiedad VerticalOptions de una de las etiquetas etiquetadas como "Start" con un valor StartAndExpand tendríamos el siguiente resultado:

<Label Text="Inicio" BackgroundColor="Gris" VerticalOptions="IniciarYExpandir" TextColor="Blanco"></Etiqueta>

Como puede ver, la etiqueta ahora ocupa todo el espacio "libre". Lo mismo ocurriría con los demás valores, excepto que si hay más controles con la misma propiedad terminada en "Expandir", los elementos "esparcen" el espacio sobrante, por ejemplo si aplicamos "Expandir" a todos los elementos nos quedaríamos algo como esto:

<StackLayout> <BoxView BackgroundColor="Rojo" HeightRequest="1"/> <Label Text="Iniciar" BackgroundColor="Gris" VerticalOptions="IniciarYExpandir" TextColor="Blanco"></Label> <BoxView BackgroundColor="Rojo " HeightRequest="1" /> <Label Text="Center" BackgroundColor="Gray" VerticalOptions="CenterAndExpand" TextColor="White"></Label> <BoxView BackgroundColor="Rojo" HeightRequest="1" /> < Label Text="Ende" BackgroundColor="Gray" VerticalOptions="EndAndExpand" TextColor="White"></Label> <BoxView BackgroundColor="Red" HeightRequest="1" /> <Label Text="Fill" BackgroundColor=" Gris" VerticalOptions="FillAndExpand" TextColor="Blanco"></Etiqueta> </StackLayout>

Margen y relleno en Xamarin Forms

Si ha trabajado con HTML, el concepto es exactamente el mismo. El borde se refiere al borde exterior del control al que lo aplicamos, y el relleno al espacio del control en relación con su contenido.

Supongamos que tenemos lo siguiente:

<StackLayout> <StackLayout BackgroundColor="Verde"> <Image Source="dotnet_logo" HeightRequest="200"></Image> </StackLayout> <StackLayout BackgroundColor="Verde"> <Image Source="dotnet_logo" HeightRequest=" 200"></Imagen> </StackLayout> </StackLayout>

Si quisiéramos que nuestro StackLayout que contiene la imagen tuviera más margen en relación con el elemento contenedor, podríamos aumentar el margen exactamente, lo que se vería así:

<StackLayout BackgroundColor="Green" Margin="25,50,100,20"> <Fuente de la imagen="dotnet_logo" HeightRequest="200"></Imagen> </StackLayout>

Por otro lado, si queremos que el contenido del StackLayout (en este caso la imagen) tenga un espacio mayor, tendríamos que usar padding, lo que daría como resultado:

<StackLayout BackgroundColor="Green" Padding="25,50,100,20"> <Fuente de la imagen="dotnet_logo" HeightRequest="200"></Imagen> </StackLayout>

Puedes notar que en ambos casos la imagen se queda exactamente en el mismo lugar, con la diferencia que en el primer caso se reduce todo el contenedor por el borde y en el segundo solo el contenido. , esta es la foto.

Formularios StackLayout y Xamarin

Este diseño nos permite agrupar una serie de elementos de forma apilada. Esto significa que podemos colocar múltiples elementos GUI, ya sean botones u otros diseños.

Para usarlo, coloca un elemento StackLayout y dentro de él pon todos los elementos que quieras. El siguiente es un ejemplo de esto, aplicando lo que vimos anteriormente:

<StackLayout> <BoxView BackgroundColor="Granate" VerticalOptions="RellenarYExpandir"/> <BoxView BackgroundColor="Amarillo" VerticalOptions="RellenarYExpandir" /> <BoxView BackgroundColor="Azul" VerticalOptions="RellenarYExpandir" /> <BoxView BackgroundColor=" Grün" VerticalOptions="FillAndExpand" /> </StackLayout>

Vemos que los elementos de la pila están boca abajo porque tenemos una propiedad StackLayout llamada "Orientación" que por defecto es Vertical.

Podemos cambiar este comportamiento cambiando este valor a Horizontal:

<StackLayout Orientation="Horizontal"> <BoxView BackgroundColor="Maroon" VerticalOptions="FillAndExpand"/> <BoxView BackgroundColor="Amarillo" VerticalOptions="RellenarYExpandir" /> <BoxView BackgroundColor="Azul" VerticalOptions="RellenarYExpandir" /> <BoxView BackgroundColor="Green" VerticalOptions="FillAndExpand" /> </StackLayout>

¿Cómo eliminar espacios entre elementos de un StackLayout en Xamarin Forms?

Como notó en los ejemplos anteriores, siempre hay una brecha entre los diferentes elementos, que podemos reducir usando la propiedad Espaciado. Por ejemplo, si quisiéramos que el espacio desapareciera por completo, ingresaríamos el valor 0:

<StackLayout Spacing="0"> <BoxView BackgroundColor="Maroon" VerticalOptions="FillAndExpand" /> <BoxView BackgroundColor="Amarillo" VerticalOptions="RellenarYExpandir" /> <BoxView BackgroundColor="Azul" VerticalOptions="RellenarYExpandir" /> <BoxView BackgroundColor="Green" VerticalOptions="FillAndExpand" /> </StackLayout>

Ejemplo de un StackLayout complejo en Xamarin Forms

Como no todo en la vida es un simple ejemplo, te dejo un ejemplo para que veas como usar un StackLayout en tu aplicación, por si quieres usarlo.

<?versión xml="1.0" codificación="UTF-8"?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com /winfx/2009/xaml"x:Class="TheBusinessTumble.StackLayoutPage"BackgroundColor="Maroon"Title="StackLayouts"> <ContentPage.Content> <ScrollView> <StackLayout Spacing="0" Padding="0" BackgroundColor=" Kastanienbraun"> <BoxView HorizontalOptions="FillAndExpand" HeightRequest="100" VerticalOptions="Start" Color="Gray" /> <Button BorderRadius="30" HeightRequest="60" WidthRequest="60" BackgroundColor="Red" HorizontalOptions ="Centro" VerticalOptions="Inicio" /> <StackLayout HeightRequest="100" VerticalOptions="Inicio" HorizontalOptions="FillAndExpand" Spacing="20" BackgroundColor="Maroon"> <Label Text="Benutzername" FontSize=" 28 " HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold" /> <Entry Text="Bio + Hashtags" TextColor="White" BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" /> < /StackLayout> <St ackLayout Orientación="Horizontal" HeightRequest="50" BackgroundColor="Blanco" Padding="5"> <StackLayout Spacing="0" BackgroundColor="Blanco" Orientación="Horizontal" HorizontalOptions="Inicio"> <BoxView BackgroundColor= "Black" WidthRequest="40" HeightRequest="40" HorizontalOptions="StartAndExpand" VerticalOptions="Center" /> <Label FontSize="14" TextColor="Black" Text="Akzentfarbe" HorizontalOptions="StartAndExpand" VerticalOptions=" Center " /> </StackLayout> <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="EndAndExpand"> <BoxView BackgroundColor="Maroon" WidthRequest="40" HeightRequest="40" HorizontalOptions= " Inicio" VerticalOptions="Center" /> <Label FontSize="14" TextColor="Black" Text="Primary Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" /> </StackLayout> </StackLayout> <StackLayout Orientación ="Horizontal"> <Label FontSize="14" Text="Edad:" TextColor="Blanco" HorizontalOptions="Iniciar" VerticalOptions="Centro" WidthRe quest="100" /> <Ent ry HorizontalOptions="FillAndExpand" Text="35" TextColor="White" BackgroundColor="Maroon" /> </StackLayout> <StackLayout Orientation="Horizontal"> <Label FontSize="14 " Text="Intereses:" TextColor= „Blanco“ HorizontalOptions="Iniciar" VerticalOptions="Centro" WidthRequest="100" /> <Entry HorizontalOptions="FillAndExpand" Text="Xamarin.Forms" TextColor="Blanco" BackgroundColor= "Granate" /> </StackLayout> <StackLayout Orientation="Horizontal"> <Label FontSize="14" Text="Fragen Sie mich zu:" TextColor="White" HorizontalOptions="Inicio" VerticalOptions="Center" WidthRequest= "100"/> <Entry HorizontalOptions="FillAndExpand" Text="Xamarin, C#, .NET, Mono..." TextColor="Blanco" BackgroundColor="Granate" /> </StackLayout> </StackLayout> </ScrollView > </ContentPage.Content></ContentPage >

Esto nos dará:

AbsoluteLayout en Xamarin Forms (también diseño absoluto escrito)

Este es uno de los controles menos utilizados en el mundo del desarrollo con Xamarin, pero nos permite hacer cosas complejas para formar "capas". Nos ayuda a posicionar elementos secundarios proporcionalmente a su tamaño y posición según valores absolutos.

Comencemos por definirlo, y en él un botón:

<AbsoluteLayout> <Texto del botón="Absolute"/> </AbsoluteLayout>

Vemos que el comportamiento es colocar el elemento en la esquina derecha. Cuando colocamos un segundo botón, vemos cómo se coloca sobre el primero:

<AbsoluteLayout> <Texto del botón="Absolute"/> <Texto del botón="Absolute 2" /> </AbsoluteLayout>

Debido a que tenemos el elemento en AbsoluteLayout, tenemos una propiedad adjunta que podemos usar para especificar cómo se comportará el botón en relación con su padre. En este caso, la primera propiedad se llama AbsoluteLayout.LayoutBounds, que requiere 4 valores:

X
j
ancho
alternativa

Sabiendo esto, podemos agregar valores a la propiedad para cambiar el aspecto del primer botón:

<AbsoluteLayout> <Button Text="Absolute" AbsoluteLayout.LayoutBounds="50,50,200,100"/> <Button Text="Absolute 2" /> </AbsoluteLayout>

Hemos especificado que el control debe mostrarse en la posición 50, 50, con un ancho de 200 y una altura de 100, independientemente de si el dispositivo es un teléfono móvil o una tableta, es decir, valores fijos.

Si definitivamente queremos cambiar este comportamiento para que estos valores sean porcentajes y no absolutos, podemos cambiar una segunda propiedad, AbsoluteLayout.LayoutFlags, que podemos usar para indicar si queremos hacer esto.

Los valores de la propiedad LayoutFlags son:

en
altura proporcional
PosiciónProporcional
XProporcional
Yproporcional
ninguno
proporcional al tamaño
proporcional al ancho

Como ves, cada uno de ellos hace referencia a que podemos utilizar diferentes propiedades del elemento en proporción o en porcentaje. Por ejemplo, si quisiéramos colocar nuestro control centrado horizontal y verticalmente, pero con un ancho y alto fijo de 200 x 100, podríamos colocar:

<AbsoluteLayout> <Button Text="Absolute" AbsoluteLayout.LayoutBounds=".5,.5,200,100" AbsoluteLayout.LayoutFlags="PositionProportional"/> <Button Text="Absolute 2" /> </AbsoluteLayout>

Tenga en cuenta que los valores proporcionales se dan como valores de 0 a 1 y los valores absolutos no lo son.

Tutorial de RelativeLayout y Xamarin Forms

Este diseño es un poco más complejo de usar ya que necesitamos definir un conjunto de reglas que nos permitirán mantener algunos elementos posicionados en relación con otros.

Comencemos con un ejemplo simple:

<RelativeLayout> <BoxView Color="Verde" x:Nombre="verde" WidthRequest="200" HeightRequest="200"/> </RelativeLayout>

Como parte de un RelativeLayout tenemos 4 tipos de reglas disponibles:

X
Y
Anker
alternativa

Debido a que BoxView está en RelativeLayout, tenemos propiedades disponibles que podemos usar para crear estas reglas. Si escribimos la propiedad que mencioné en Visual Studio, vemos que aparecen las opciones:

Supongamos que queremos centrar BoxView horizontalmente, entonces usamos la regla XConstraint:

RelativeLayout.XConstraint=""

Lo siguiente que debe hacer es poner un par de llaves dentro de las comillas donde especificamos la regla:

RelativeLayout.XConstraint="{}"

La regla está definida por el tipo ConstraintExpression, con un conjunto de atributos que definen esta regla:

RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 1, Constant = 1 }"

Analicemos un poco esta regla. Primero indicamos que será una ConstraintExpression.

El atributo Type determina qué tipo de regla es, es decir, qué elemento necesitamos para nuestro posicionamiento en X, en este caso es el elemento padre, que en este caso es la página completa, por lo que usaremos sus propiedades Use para ver dónde estaremos.

El atributo property nos ayuda a especificar qué propiedad queremos usar del padre para heredar su valor y sirve como guía para encontrarnos.

Acabamos de explicar el factor y la constante. Con lo que hicimos arriba, veremos lo siguiente:

No parece estar funcionando, ¿verdad? La verdad es que los elementos están ahí, pero no estamos usando correctamente el factor y la constante.

Me explico, para usar este par de propiedades debes considerar la siguiente fórmula:

(valor * factor) + constante

Para hacer la conversión en nuestra fórmula de ejemplo, supongamos que el ancho del formulario es de 500 unidades. Si sustituyes los valores de la fórmula, esta sería:

(500 * 1) + 1 = 501

¿Viste el problema? Si no, el problema es que estamos colocando el elemento a una unidad de distancia de la pantalla y por lo tanto no lo mostramos.

Conociendo la fórmula podemos hacer el cambio adecuado ya que sabemos que cualquier número multiplicado por 0.5 da su mitad, así que cambiemos el factor por 0.5:

RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0.5, Constant = 1 }"

Perfecto, con eso ya se ve nuestro elemento, pero si recuerdas lo queríamos centrado. Lo que haremos entonces es cambiar el valor de Constant por el valor de Width de -(BoxView/2) para centrarlo correctamente:

RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0.5, Constant = -100 }" />

Formas Grid y Xamarin

Este contenedor nos permite definir filas y columnas para posicionar elementos dentro de ellas, ya sean controles u otros diseños.

Supongamos que tenemos la siguiente definición:

<Cuadrícula> <Texto del Botón="Hola"/> <Texto del Botón="Adiós"/> </Cuadrícula>

Si quisiéramos dividir nuestro contenedor en 4 partes iguales y colocar cada botón en un lugar diferente, necesitamos dividirlo en filas y columnas.

Para crear una fila de filas, necesitamos usar la propiedad Grid.RowDefinitions:

<Grid> <Grid.RowDefinitions> </Grid.RowDefinitions> <Button Text="Hola"/> <Button Text="Adiós"/> </Grid>

Y dentro definimos tantas líneas como queramos:

<Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinition>

En este caso hemos definido 2 líneas. Con este cambio podemos ver que la interfaz gráfica ha cambiado:

Si queremos cambiar el tamaño de cada fila, podemos hacerlo a través del atributo de altura:

<Grid.RowDefinitions> <RowDefinition Height=""></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions>

Tenemos 3 opciones para llenar el valor de la altura:

Con un valor fijo: Por ejemplo, si aplicamos un valor como "200", establecemos un tamaño para la fila sin permitir que cambie mientras se ejecuta la aplicación.

<Altura de definición de fila="200"></Definición de fila>

Auto: Si aplicamos este valor, la fila solo se ajustará al contenido de la fila, como en el siguiente ejemplo:

<Altura de definición de fila="Auto"></Definición de fila>

Con asterisco: cuando aplicamos un valor seguido de un asterisco, indicamos que la fila debe ocupar todo el espacio disponible.

<Altura de definición de fila="*"></Definición de fila>

En este caso, como dividimos las filas en 2, tomamos todo el espacio de la mitad superior.

Si queremos trabajar con algo parecido a un porcentaje, podemos poner un valor delante del asterisco:

<Altura de definición de fila=".5*"></Definición de fila>

Es bueno tener en cuenta que el valor que debe preceder al asterisco es un número entre 0 y 1 para simular un porcentaje.

Podemos aplicar los mismos conceptos a las columnas de una cuadrícula, solo que en este caso usamos la definición ColumnDefinitions seguida de los elementos ColumnDefinition:

<Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinition>

Como en nuestro caso queremos cortar la cuadrícula en 4 partes iguales, tenemos lo siguiente:

<Grid> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid .ColumnDefinitions> <Button Text="Hola"/> <Button Text="Adiós"/> </Grid>

Posicionamiento de elementos en una grilla en Xamarin Forms

Para realizar el posicionamiento de los controles en una grilla, accedemos a la propiedad Grid.Row o Grid.Column según sea necesario. En nuestro ejemplo, dado que queremos colocar el botón "Hola" en el primer cuadrante, especificamos lo siguiente:

<Button Text="Hola" Grid.Column="0" Grid.Row="0"/>

Y colocaremos el segundo botón en el cuarto cuadrante:

<Button Text="Adiós" Grid.Column="1" Grid.Row="1"/>

Lo que nos queda es esto:

Rasterbeispiel en Xamarin Forms

Uno de los ejemplos más comunes cuando hablamos de cuadrículas en Xamarin Forms es el ejemplo de una calculadora, y es una aplicación que se presta a este tipo de diseño.

Si queremos una definición de una calculadora, necesitamos insertar el siguiente código:

<ContentPage.Resources> <ResourceDictionary> <Style x:Key="plainButton" TargetType="Button"> <Setter Property="BackgroundColor" Value="#eee" /> <Setter Property="TextColor" Value="Black" /> <Setter Property="BorderRadius" Value="0" /> <Setter Property="FontSize" Value="40" /> </Style> <Style x:Key="darkButton" TargetType="Button"> < Setter Property="BackgroundColor" Value="#ddd" /> <Setter Property="TextColor" Value="Black" /> <Setter Property="BorderRadius" Value="0" /> <Setter Property="FontSize" Value ="40" /> </Style> <Style x:Key="orangeButton" TargetType="Button"> <Setter Property="BackgroundColor" Value="#E8AD00" /> <Setter Property="TextColor" Value=" Weiß" /> <Setter Property="BorderRadius" Value="0" /> <Setter Property="FontSize" Value="40" /> </Style> </ResourceDictionary> </ContentPage.Resources> <Grid x: Name="controlGrid" RowSpacing="1" ColumnSpacing="1"> <Grid.RowDefinitions> <RowDefinition Height="150" /> <RowDefinition Height="*" /> <RowDefinition Height="*" /> <RowD efi nition Height="*" /> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width = "*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Label Text="0" Grid.Row="0" HorizontalTextAlignment="Ende" VerticalTextAlignment = "Fin" TextColor="Blanco" FontSize="60" Grid.ColumnSpan="4" /> <Button Text="C" Grid.Row="1" Grid.Column="0" Style="{StaticResource darkerButton } " /> <Button Text="+/-" Grid.Row="1" Grid.Column="1" Style="{StaticResource darkerButton}" /> <Button Text="%" Grid.Row="1 " Grid.Column="2" Style="{StaticResource darkerButton}" /> <Button Text="div" Grid.Row="1" Grid.Column="3" Style="{StaticResource orangeButton}" /> < Texto del botón="7" Grid.Row="2" Grid.Column="0" Style="{StaticResource plainButton}" /> <Texto del botón="8" Grid.Row="2" Grid.Column="1 " Style="{StaticResource plainButton}" /> <Button Text="9" Grid.Row="2" Grid.Column="2" St yle="{Sta ticResource plainButton}" /> <Button Text="X" Grid.Row="2" Grid.Column="3" Style="{StaticResource orangeButton}" /> <Button Text="4" Grid .Row="3 " Grid.Column="0" Style="{StaticResource simpleButton}" /> <Button Text="5" Grid.Row="3" Grid.Column="1" Style="{StaticResource simpleButton }" /> < Texto del botón="6" Grid.Row="3" Grid.Column="2" Style="{StaticResource plainButton}" /> <Texto del botón="-" Grid.Row="3" Grid .Column="3 " Style="{StaticResource orangeButton}" /> <Button Text="1" Grid.Row="4" Grid.Column="0" Style="{StaticResource plainButton}" /> <Button Text ="2" Grid .Row="4" Grid.Column="1" Style="{StaticResource plainButton}" /> <Button Text="3" Grid.Row="4" Grid.Column="2" Style ="{StaticResource plainButton}" /> <Button Text="+" Grid.Row="4" Grid.Column="3" Style="{StaticResource orangeButton}" /> <Button Text="0" Grid.ColumnSpan ="2" Grid .Row="5" Grid.Column="0" Style="{StaticResource plainButton}" /> <Button Text="." Grid.Row="5" Grid.Column="2" Style="{StaticResource simpleButton}" /> <Button Text="=" Grid.Row="5" Grid.Column="3" Style="{StaticResource botónnaranja}" /> </Grid>

Formularios ScrollView y Xamarin

Este contenedor nos permite desplazarnos o deslizarnos cuando el contenido lo requiere. Es uno de los contenedores más fáciles de usar.

Supongamos que tenemos el siguiente código:

<StackLayout> <Solicitud de altura del botón="200"></Botón> <Solicitud de altura del botón="200"></Botón> <Solicitud de altura del botón="200"></Botón> <Solicitud de altura del botón="200"></Botón > <Botón HeightRequest="200"></Botón> </StackLayout>

El problema es que no hay forma de ver el quinto botón ya que no hay suficiente pantalla para mostrarlo.

Si queremos agregar la funcionalidad de desplazamiento, podemos hacerlo colocando el contenido que queremos hacer desplazable en ScrollView. De esta forma quedaría así:

<ScrollView> <StackLayout> <Button HeightRequest="200"></Button> <Button HeightRequest="200"></Button> <Button HeightRequest="200"></Button> <Button HeightRequest="200"> </Botón> <Botón HeightRequest="200"></Botón> </StackLayout> </ScrollView>

Como puede ver, hay un ScrollView a la derecha que podemos usar para desplazarnos por el contenido no visto anteriormente.

▷ Todo sobre 【Layouts】 en Xamarin Forms | con ejemplos (2023)