Xamarin.Forms Vistas

Ejemplo de descarga Descarga del ejemplo

las vistas son los bloques de creación de interfaces de usuario móviles multiplataforma.

Las vistas son objetos de interfaz de usuario, como etiquetas, botones y controles deslizantes que normalmente se conocen como controles o widgets en otros entornos de programación gráfica. Las vistas admitidas Xamarin.Forms por todos derivan de la View clase . Se pueden dividir en varias categorías:

Vistas para presentación

Tipo Descripción Aspecto
BoxView BoxViewmuestra un rectángulo sólido coloreado por la Xamarin_Forms BoxView _BoxView_Color" data-linktype="absolute-path">Color propiedad. BoxView tiene una solicitud de tamaño predeterminado de 40 x 40. Para otros tamaños, asigne Xamarin_Forms _VisualElement_WidthRequest" data-linktype="absolute-path">y WidthRequest Xamarin_Forms WidthRequest _VisualElement_HeightRequest" data-linktype="absolute-path">HeightRequest properties.

Documentación de APIGuíaEjemplo 1,2,3,4,5y 6
de ejemplo de BoxView:ejemplo de
Código de C# para esta páginaPágina XAML
Ellipse Ellipsemuestra una elipse o un círculo de tamaño Xamarin_Forms Ellipse _VisualElement_WidthRequest" data-linktype="absolute-path">WidthRequest x Xamarin_Forms _VisualElement_HeightRequest" data-linktype="absolute-path">HeightRequest . Para pintar el interior de la elipse, establezca su propiedad Xamarin_Forms _Shapes_Shape_Fill" data-linktype="absolute-path">Fill en Color . Para dar un contorno a la elipse, establezca su Xamarin_Forms _Shapes_Shape_Stroke" data-linktype="absolute-path">Stroke propiedad en Color .

Documentación de APIGuíaMuestra
de elipseEjemplo
Código de C# para esta páginaPágina XAML
Label Label muestra cadenas de texto de una sola línea o bloques de varias líneas de texto, ya sea con formato constante o variable. Establezca la propiedad Xamarin_Forms _Label_Text" data-linktype="absolute-path">en una cadena para el formato constante, o bien establezca la propiedad TextText data-linktype="absolute-path">de Xamarin_Forms _Label_FormattedText" FormattedText en un FormattedString objeto para el formato de variable.

Documentación de APIGuíaMuestra
de etiquetadeejemplo
Código de C# para esta páginaPágina XAML
Line Line muestra una línea desde un punto inicial hasta un punto final. El punto de inicio se representa mediante Xamarin_Forms and Xamarin_Forms _Shapes_Line_Y1" data-linktype="absolute-path">properties, mientras que el punto de conexión se representa mediante el tipo de vínculo de datos Xamarin_Forms X1X1Y1 _Shapes_Line_X2" ="absolute-path">X2 y Xamarin_Forms _Shapes_Line_Y2" data-linktype="absolute-path">Y2 properties. Para colorear la línea, establezca su Xamarin_Forms _Shapes_Shape_Stroke" data-linktype="absolute-path">Stroke propiedad en Color .

Documentación de APIGuíaMuestra
delínea
Código de C# para esta páginaPágina XAML
Image Image muestra un mapa de bits. Los mapas de bits se pueden descargar a través de la Web, incrustarse como recursos en los proyectos comunes de proyecto o plataforma, o crearse mediante un objeto Stream .NET.

Documentación de APIGuíaMuestra
de ejemplo de
Código de C# para esta páginaPágina XAML
Map Map muestra un mapa. El paquete .Mapas NuGet debe estar instalado. Android y Universal Windows Platform requieren una clave de autorización de mapa.

Documentación de APIGuíaMuestra
de ejemplo de
Código de C# para esta páginaPágina XAML
OpenGLView OpenGLView muestra gráficos OpenGL en proyectos de iOS y Android. No hay compatibilidad con la Plataforma Windows universal. Los proyectos de iOS y Android requieren una referencia al ensamblado OpenTK-1.0 o al ensamblado openTK versión 1.0.0.0. OpenGLViewes más fácil de usar en un Project compartido; si se usa en una biblioteca de .NET Standard, también se requiere un servicio de dependencia (como se muestra en el código de ejemplo).

Esta es la única instalación gráfica integrada en , pero una aplicación Xamarin.FormsXamarin.Forms también puede representar gráficos mediante o SkiaSharpUrhoSharp .

Documentación de la API

OpenGLView de ejemplo de OpenGLView:
Código de C# para esta páginaPágina XAML con código subyacente
Path Path muestra curvas y formas complejas. La Xamarin_Forms _Shapes_Path_Data" data-linktype="absolute-path">propiedad especifica la forma que se Data va a dibujar. Para colorear la forma, establezca su Xamarin_Forms _Shapes_Shape_Stroke" data-linktype="absolute-path">Stroke propiedad en Color .

Documentación de APIGuíaMuestra
ejemplo de rutade
Código de C# para esta páginaPágina XAML
Polygon Polygon muestra un polígono. La propiedad Xamarin_Forms _Shapes_Polygon_Points" data-linktype="absolute-path">especifica los puntos de vértice del polígono, mientras que la propiedad PointsPoints data-linktype="absolute-path">de Xamarin_Forms _Shapes_Polygon_FillRule" FillRule especifica cómo se determina el relleno interior del polígono. Para pintar el interior del polígono, establezca su propiedad Xamarin_Forms _Shapes_Shape_Fill" data-linktype="absolute-path">Fill en Color . Para dar un contorno al polígono, establezca su Xamarin_Forms _Shapes_Shape_Stroke" data-linktype="absolute-path">Stroke propiedad en Color .

Documentación de APIGuíaMuestra
depolígono
Código de C# para esta páginaPágina XAML
Polyline Polyline muestra una serie de líneas rectas conectadas. La propiedad Xamarin_Forms _Shapes_Polygon_Points" data-linktype="absolute-path">especifica los puntos de vértice de la polilínea, mientras que la propiedad PointsPoints data-linktype="absolute-path">de Xamarin_Forms _Shapes_Polygon_FillRule" FillRule especifica cómo se determina el relleno interior de la polilínea. Para pintar el interior de la polilínea, establezca su propiedad Xamarin_Forms _Shapes_Shape_Fill" data-linktype="absolute-path">Fill en Color . Para proporcionar un esquema a la polilínea, establezca su Xamarin_Forms _Shapes_Shape_Stroke" data-linktype="absolute-path">Stroke propiedad en Color .

Documentación de APIGuíaMuestra
de ejemplo de polilínea
Código de C# para esta páginaPágina XAML
Rectangle Rectangle muestra un rectángulo o cuadrado. Para pintar el interior del rectángulo, establezca su Xamarin_Forms _Shapes_Shape_Fill" data-linktype="absolute-path">Fill propiedad en Color . Para dar un contorno al rectángulo, establezca su Xamarin_Forms _Shapes_Shape_Stroke" data-linktype="absolute-path">Stroke propiedad en Color .

Documentación de APIGuíaMuestra
de rectángulodeejemplo
Código de C# para esta páginaPágina XAML
WebView WebViewmuestra páginas web o contenido HTML, en función de si la propiedad WebView Xamarin_Forms _WebView_Source" data-linktype="absolute-path">está establecida en Source un UriWebViewSource objeto o HtmlWebViewSource .

Documentación de APIGuíaEjemplo 1 y 2
WebView ejemplo de WebView deejemplo de
Código de C# para esta páginaPágina XAML

Vistas que inician comandos

Tipo Descripción Aspecto
Button Button es un objeto rectangular que muestra texto y que se produce cuando se presiona Clicked un evento.

Documentación de APIGuíaMuestra
de botónEjemplo
Código de C# para esta páginaPágina XAML con código subyacente
ImageButton ImageButton es un objeto rectangular que muestra una imagen y que se produce cuando se presiona Clicked un evento.

Documentación de APIGuíaMuestra
de ejemplo ImageButton Ejemplode
Código de C# para esta páginaPágina XAML con código subyacente
RadioButton RadioButton permite la selección de una opción de un conjunto y activa un CheckedChanged evento cuando se produce la selección.

Documentación de APIGuíaMuestra
ejemplo radioButton deejemplo de
Código de C# para esta páginaPágina XAML con código subyacente
RefreshView RefreshView es un control de contenedor que proporciona funcionalidad de extracción y actualización para el contenido desplazable. El definido por la propiedad se ejecuta cuando se desencadena una actualización y la propiedad indica ICommand el estado actual del CommandIsRefreshing control.

Documentación de APIGuíaMuestra
RefreshView Ejemplo de RefreshView Ejemplode
Código de C# para esta páginaPágina XAML con código subyacente
SearchBar SearchBar muestra un área para que el usuario escriba una cadena de texto y un botón (o una tecla de teclado) que señale a la aplicación para realizar una búsqueda. La Xamarin_Forms _InputView_Text" data-linktype="absolute-path">proporciona acceso al texto y el evento indica que se ha presionado TextSearchButtonPressed el botón.

Documentación de APIGuíaMuestra
Ejemplo de barra de búsqueda Ejemplode barra de
Código de C# para esta páginaPágina XAML con código subyacente
SwipeView SwipeView es un control de contenedor que se ajusta alrededor de un elemento de contenido y proporciona elementos de menú contextual que se revelan mediante un gesto de deslizar el dedo. Cada elemento de menú se representa mediante , que tiene una propiedad que ejecuta cuando se pulsa SwipeItemCommand el ICommand elemento.

Documentación de APIGuíaMuestra
de SwipeView deejemplo de
Código de C# para esta páginaPágina XAML con código subyacente

Vistas para establecer valores

Tipo Descripción Aspecto
CheckBox CheckBox permite al usuario seleccionar un valor booleano mediante un tipo de botón que se puede activar o vaciar. La IsChecked propiedad es el estado de y el evento se desencadena cuando cambia el CheckBoxCheckedChanged estado.

Documentación de APIGuíaMuestra
de CheckBox
Código de C# para esta páginaPágina XAML
Slider Sliderpermite al usuario seleccionar un valor de un intervalo continuo especificado con Xamarin_Forms doubleSlider _Slider_Minimum" data-linktype="absolute-path">Minimum and Xamarin_Forms double _Slider_Maximum" data-linktype="absolute-path">Maximum properties.

Documentación de APIGuíaMuestra
de ejemplo de
Código de C# para esta páginaPágina XAML
Stepper Stepperpermite al usuario seleccionar un valor de un intervalo de valores incrementales especificados con double Xamarin_Forms Stepper _Stepper_Minimum" data-linktype="absolute-path">Minimum , Xamarin_Forms double _Stepper_Maximum" data-linktype="absolute-path">Maximum y Xamarin_Forms _Stepper_Increment" data-linktype="absolute-path">Increment properties.

Documentación de APIGuíaMuestra
de ejemplo destepperexample
Código de C# para esta páginaPágina XAML
Switch Switch toma la forma de un conmutador de encendido y apagado para permitir al usuario seleccionar un valor booleano. La Xamarin_Forms _Switch_IsToggled" data-linktype="absolute-path">es el estado del modificador y el evento se desencadena cuando cambia IsToggledToggled el estado.

Documentación de APIGuíaMuestra
modificador switch example switch
Código de C# para esta páginaPágina XAML
DatePicker DatePicker permite al usuario seleccionar una fecha con el selector de fechas de la plataforma. Establezca un intervalo de fechas permitido con Xamarin_Forms _DatePicker_MinimumDate" data-linktype="absolute-path">MinimumDate y MinimumDate Xamarin_Forms _DatePicker_MaximumDate" data-linktype="absolute-path">MaximumDate properties. La Xamarin_Forms _DatePicker_Date" data-linktype="absolute-path">es la fecha seleccionada y el evento se desencadena cuando cambia esa DateDateSelected propiedad.

Documentación de APIGuíaMuestra
DatePicker Ejemplo de DatePicker
Código de C# para esta páginaPágina XAML
TimePicker TimePicker permite al usuario seleccionar una hora con el selector de hora de la plataforma. La Xamarin_Forms _TimePicker_Time" data-linktype="absolute-path">propiedad es Time la hora seleccionada. Una aplicación puede supervisar los cambios en la Time propiedad mediante la instalación de un controlador para el evento PropertyChanged .

Documentación de APIGuíaMuestra
TimePicker Ejemplo de TimePicker
Código de C# para esta páginaPágina XAML

Vistas para editar texto

Estas dos clases derivan de la clase , que define la Xamarin_Forms InputViewInputView _InputView_Keyboard" data-linktype="absolute-path">Keyboard propiedad:

Tipo Descripción Aspecto
Entry Entry permite al usuario escribir y editar una sola línea de texto. El texto está disponible como la propiedad Xamarin_Forms _InputView_Text" data-linktype="absolute-path">y los eventos y se desencadenan cuando cambia el texto o el usuario señala la finalización pulsando la tecla TextTextChangedCompleted Entrar.

Use para Editor escribir y editar varias líneas de texto.

Documentación de APIGuíaMuestra
de ejemplo de entradade ejemplo de
Código de C# para esta páginaPágina XAML
Editor Editor permite al usuario escribir y editar varias líneas de texto. El texto está disponible como la propiedad Xamarin_Forms _InputView_Text" data-linktype="absolute-path">y los eventos y se desencadenan cuando cambia el texto o el usuario señala la TextTextChangedCompleted finalización.

Use una Entry vista para escribir y editar una sola línea de texto.

Documentación de APIGuíaMuestra
editor de ejemplo del
Código de C# para esta páginaPágina XAML

Vistas para indicar actividad

Tipo Descripción Aspecto
ActivityIndicator ActivityIndicator usa una animación para mostrar que la aplicación está comprometida en una actividad larga sin dar ninguna indicación de progreso. La Xamarin_Forms _ActivityIndicator_IsRunning" data-linktype="absolute-path">IsRunning propiedad controla la animación.

Si se conoce el progreso de la actividad, use un en ProgressBar su lugar.

Documentación de APIGuíaMuestra
ActivityIndicator Example
Código de C# para esta páginaPágina XAML
ProgressBar ProgressBar usa una animación para mostrar que la aplicación progresa a través de una actividad larga. Establezca la propiedad Xamarin_Forms _ProgressBar_Progress" data-linktype="absolute-path">en valores entre 0 y 1 para indicar Progress el progreso.

Si no se conoce el progreso de la actividad, use un en ActivityIndicator su lugar.

Documentación de APIGuíaMuestra
ejemplo de ProgressBar Ejemplode
Código de C# para esta páginaPágina XAML con código subyacente

Vistas que muestran colecciones

Tipo Descripción Aspecto
CarouselView CarouselView muestra una lista desplazable de elementos de datos. Establezca la propiedad en una colección de objetos y establezca la propiedad en un objeto que describa cómo se va ItemsSource a dar formato a los ItemTemplateDataTemplate elementos. El evento indica que el elemento mostrado actualmente ha CurrentItemChanged cambiado, que está disponible como CurrentItem la propiedad .

GuíaMuestra
Ejemplo de CarouselViewEjemplo de
Código de C# para esta páginaPágina XAML
CollectionView CollectionView muestra una lista desplazable de elementos de datos seleccionables, con diferentes especificaciones de diseño. Su objetivo es proporcionar una alternativa más flexible y de rendimiento a ListView . Establezca la propiedad en una colección de objetos y establezca la propiedad en un objeto que describa cómo se va ItemsSource a dar formato a los ItemTemplateDataTemplate elementos. El SelectionChanged evento indica que se ha realizado una selección, que está disponible como la propiedad SelectedItem .

GuíaMuestra
Ejemplo de CollectionView Ejemplode
Código de C# para esta páginaPágina XAML
IndicatorView IndicatorView muestra indicadores que representan el número de elementos de CarouselView un . Establezca la CarouselView.IndicatorView propiedad en el objeto para mostrar los IndicatorView indicadores de CarouselView .

Documentación de APIGuíaMuestra
Ejemplo de IndicatorView Ejemplode
Código de C# para esta páginaPágina XAML
ListView ListView deriva de ItemsView y muestra una lista desplazable de elementos de datos seleccionables. Establezca la propiedad Xamarin_Forms _ItemsView_1_ItemsSource" data-linktype="absolute-path">en una colección de objetos y establezca la propiedad ItemsSourceItemsSource data-linktype="absolute-path">de Xamarin_Forms _ItemsView_1_ItemTemplate" en ItemTemplateDataTemplate un objeto que describa cómo se va a dar formato a los elementos. El evento indica que se ha realizado una selección, que está disponible como la propiedad ItemSelected Xamarin_Forms ItemSelected _ListView_SelectedItem" data-linktype="absolute-path">. SelectedItem

Documentación de APIGuíaMuestra
ListView Ejemplo de ListView Ejemplode
Código de C# para esta páginaPágina XAML
Picker Picker muestra un elemento seleccionado de una lista de cadenas de texto y permite seleccionar ese elemento cuando se pulsa la vista. Establezca la propiedad Xamarin_Forms _Picker_Items" data-linktype="absolute-path">en una lista de cadenas o la propiedad ItemsItems Xamarin_Forms _Picker_ItemsSource" data-linktype="absolute-path">en ItemsSource una colección de objetos . El SelectedIndexChanged evento se desencadena cuando se selecciona un elemento.

muestra Picker la lista de elementos solo cuando se selecciona. Use o ListView para TableView una lista desplazable que permanezca en la página.

Documentación de APIGuíaMuestra
de selectordeejemplo
Código de C# para esta páginaPágina XAML con código subyacente
TableView TableView muestra una lista de filas de tipo Cell con encabezados y encabezados opcionales. Establezca la propiedad Xamarin_Forms _TableView_Root" data-linktype="absolute-path">en un objeto de tipo y agregue objetos a RootTableRootTableSection esa TableRoot . Cada TableSection es una colección de objetos Cell .

Documentación de APIGuíaMuestra
de TableView Ejemplode
Código de C# para esta páginaPágina XAML