Xamarin.Forms Diseños

  • Artículo

Descargar ejemploDescargar el ejemplo

Xamarin.Forms Los diseños se usan para crear controles de interfaz de usuario en estructuras visuales.

Las Layout clases y Layout<T> de Xamarin.Forms son subtipos especializados de vistas que actúan como contenedores para las vistas y otros diseños. La Layout propia clase se deriva de View. Normalmente, un Layout derivado contiene lógica para establecer la posición y el tamaño de los elementos secundarios en Xamarin.Forms las aplicaciones.

diseño TiposXamarin.Forms de diseño Tipos de

Las clases que derivan de Layout se pueden dividir en dos categorías:

Diseños con contenido único

Estas clases se derivan de Layout, que define las Padding propiedades y IsClippedToBounds :

Tipo Descripción Aspecto
ContentView ContentView contiene un único elemento secundario que se establece con la Content propiedad . La Content propiedad se puede establecer en cualquier View derivado, incluidos otros Layout derivados. ContentView se usa principalmente como elemento estructural y actúa como una clase base para Frame.

Documentación de / APIGuía / Muestra		 de ContentView ContentView Ejemplo
Código de C# para esta página / Página XAML
Frame La Frame clase se deriva de ContentView y muestra un borde, o marco, alrededor de su elemento secundario. La Frame clase tiene un valor predeterminado Padding de 20 y también define las BorderColorpropiedades , CornerRadiusy HasShadow .

Documentación de / APIGuía / Muestra		 marco de marco
Código de C# para esta página / Página XAML
ScrollView ScrollView es capaz de desplazar su contenido. Establezca la Content propiedad en una vista o diseño demasiado grande para caber en la pantalla. (El contenido de un ScrollView es muy a menudo un StackLayout). Establezca la Orientation propiedad para indicar si el desplazamiento debe ser vertical, horizontal o ambos.

Documentación de / APIGuía / Muestra		 de ScrollView Ejemplo de ScrollView
Código de C# para esta página / Página XAML
TemplatedView TemplatedView muestra contenido con una plantilla de control y es la clase base para ContentView.

Documentación de / APIGuía		 TemplatedView Ejemplo
ContentPresenter ContentPresenter es un administrador de diseño para las vistas con plantilla, que se usa dentro de para ControlTemplate marcar dónde aparece el contenido que se va a presentar.

Documentación de / APIGuía		 de ContentPresenter ContentPresenter Ejemplo

Diseños con varios elementos secundarios

Estas clases derivan de Layout<View>:

Tipo Descripción Aspecto
StackLayout StackLayout coloca los elementos secundarios en una pila, ya sea horizontal o verticalmente en función de la Orientation propiedad . La Spacing propiedad rige el espaciado entre los elementos secundarios y tiene un valor predeterminado de 6.

Documentación de / APIGuía / Muestra		 de StackLayout
Código de C# para esta página / Página XAML
Grid Grid coloca sus elementos secundarios en una cuadrícula de filas y columnas. La posición de un elemento secundario se indica mediante las propiedades adjuntasRow, Column, RowSpany ColumnSpan.

Documentación de / APIGuía / Muestra		 cuadrícula Ejemplo de cuadrícula
Código de C# para esta página / Página XAML
AbsoluteLayout AbsoluteLayout coloca los elementos secundarios en ubicaciones específicas en relación con su elemento primario. La posición de un elemento secundario se indica mediante las propiedades adjuntasLayoutBounds y LayoutFlags. Es AbsoluteLayout útil para animar las posiciones de las vistas.

Documentación de / APIGuía / Muestra		 absoluteLayout ejemplo
Código de C# para esta página / Página XAML con código subyacente
RelativeLayout RelativeLayout coloca los elementos secundarios en relación con el RelativeLayout propio o con sus elementos del mismo nivel. La posición de un elemento secundario se indica mediante las propiedades adjuntas que se establecen en objetos de tipo Constraint y BoundsConstraint.

Documentación de / APIGuía / Muestra		 de relativeLayout relativeLayout ejemplo
Código de C# para esta página / Página XAML
FlexLayout FlexLayout se basa en el módulo de diseño flexible de cuadros CSS, conocido normalmente como diseño flexible o caja flexible. FlexLayout define seis propiedades enlazables y cinco propiedades enlazables adjuntas que permiten apilar o encapsular elementos secundarios con muchas opciones de alineación y orientación.

Documentación de / APIGuía / Muestra		 FlexLayout FlexLayout ejemplo de
Código de C# para esta página / Página XAML