Xamarin.Forms VistasXamarin.Forms Views

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Xamarin.Forms las vistas son los bloques de creación de interfaces de usuario móviles multiplataforma.Xamarin.Forms views are the building blocks of cross-platform mobile user interfaces.

Las vistas son objetos de la interfaz de usuario, como etiquetas, botones y controles deslizantes que normalmente se conocen como controles o widgets en otros entornos de programación gráficos.Views are user-interface objects such as labels, buttons, and sliders that are commonly known as controls or widgets in other graphical programming environments. Las vistas admitidas por Xamarin.Forms todas derivan de la View clase.The views supported by Xamarin.Forms all derive from the View class. Se pueden dividir en varias categorías:They can be divided into several categories:

Vistas para presentaciónViews for presentation

TipoType DescripciónDescription AspectoAppearance
BoxView BoxView muestra un rectángulo sólido coloreado por la Color propiedad.BoxView displays a solid rectangle colored by the Color property. BoxView tiene una solicitud de tamaño predeterminado de 40 x 40.BoxView has a default size request of 40x40. Para otros tamaños, asigne las WidthRequest HeightRequest propiedades y.For other sizes, assign the WidthRequest and HeightRequest properties.

Documentación / de API Guía / de Ejemplo 1, 2, 3, 4, 5y 6API Documentation / Guide / Sample 1, 2, 3, 4, 5, and 6
Ejemplo de BoxViewBoxView Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Ellipse Ellipse muestra una elipse o un círculo con el tamaño WidthRequest x HeightRequest .Ellipse displays an ellipse or circle of size WidthRequest x HeightRequest. Para pintar el interior de la elipse, establezca su Fill propiedad en Color .To paint the inside of the ellipse, set its Fill property to a Color. Para asignar a la elipse un contorno, establezca su Stroke propiedad en Color .To give the ellipse an outline, set its Stroke property to a Color.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de elipseEllipse Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Label Label muestra cadenas de texto de una sola línea o bloques de texto de varias líneas, con un formato constante o variable.Label displays single-line text strings or multi-line blocks of text, either with constant or variable formatting. Establezca la Text propiedad en una cadena para el formato constante o establezca la FormattedText propiedad en un FormattedString objeto para el formato de variable.Set the Text property to a string for constant formatting, or set the FormattedText property to a FormattedString object for variable formatting.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de etiquetaLabel Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Line Line muestra una línea desde un punto inicial hasta un punto final.Line displays a line from a start point to an end point. Las propiedades y representan el punto inicial X1 Y1 , mientras que el punto final se representa mediante las X2 propiedades y Y2 .The start point is represented by the X1 and Y1 properties, while the end point is represented by the X2 and Y2 properties. Para colorear la línea, establezca su Stroke propiedad en Color .To color the line, set its Stroke property to a Color.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de líneaLine Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Image Image muestra un mapa de bits.Image displays a bitmap. Los mapas de bits se pueden descargar a través de Web, incrustados como recursos en los proyectos comunes de proyecto o plataforma, o bien crearse mediante un Stream objeto .net.Bitmaps can be downloaded over the Web, embedded as resources in the common project or platform projects, or created using a .NET Stream object.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de imagenImage Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Map Map muestra un mapa.Map displays a map. El Xamarin.Forms . El paquete NuGet de Maps debe estar instalado.The Xamarin.Forms.Maps NuGet package must be installed. Android y Plataforma universal de Windows requieren una clave de autorización de asignación.Android and Universal Windows Platform require a map authorization key.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de mapaMap Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
OpenGLView OpenGLView muestra los gráficos OpenGL en los proyectos de iOS y Android.OpenGLView displays OpenGL graphics in iOS and Android projects. No se admite el Plataforma universal de Windows.There is no support for the Universal Windows Platform. Los proyectos de iOS y Android requieren una referencia al ensamblado OpenTK-1,0 o al ensamblado de la versión 1.0.0.0 de OpenTK .The iOS and Android projects require a reference to the OpenTK-1.0 assembly or the OpenTK version 1.0.0.0 assembly. OpenGLView es más fácil de usar en un proyecto compartido; Si se utiliza en una biblioteca de .NET Standard, también se requerirá un servicio de dependencia (como se muestra en el código de ejemplo).OpenGLView is easier to use in a Shared Project; if used in a .NET Standard library, then a Dependency Service will also be required (as shown in the sample code).

Esta es la única instalación de gráficos integrada en Xamarin.Forms , pero una Xamarin.Forms aplicación también puede representar gráficos mediante SkiaSharp o UrhoSharp .This is the only graphics facility that is built into Xamarin.Forms, but a Xamarin.Forms application can also render graphics using SkiaSharp, or UrhoSharp.

Documentación de la APIAPI Documentation

Ejemplo de OpenGLViewOpenGLView Example
Código C# para esta página / Página XAML con código subyacenteC# code for this page / XAML page with code-behind
Path Path muestra curvas y formas complejas.Path displays curves and complex shapes. La Data propiedad especifica la forma que se va a dibujar.The Data property specifies the shape to be drawn. Para colorear la forma, establezca su Stroke propiedad en Color .To color the shape, set its Stroke property to a Color.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de ruta de accesoPath Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Polygon Polygon muestra un polígono.Polygon displays a polygon. La Points propiedad especifica los puntos de vértice del polígono, mientras que la FillRule propiedad especifica cómo se determina el relleno interior del polígono.The Points property specifies the vertex points of the polygon, while the FillRule property specifies how the interior fill of the polygon is determined. Para pintar el interior del polígono, establezca su Fill propiedad en Color .To paint the inside of the polygon, set its Fill property to a Color. Para dar un contorno al polígono, establezca su Stroke propiedad en Color .To give the polygon an outline, set its Stroke property to a Color.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de polígonoPolygon Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Polyline Polyline muestra una serie de líneas rectas conectadas.Polyline displays a series of connected straight lines. La Points propiedad especifica los puntos de vértice de la polilínea, mientras que la FillRule propiedad especifica cómo se determina el relleno interior de la polilínea.The Points property specifies the vertex points of the polyline, while the FillRule property specifies how the interior fill of the polyline is determined. Para pintar el interior de la polilínea, establezca su Fill propiedad en Color .To paint the inside of the polyline, set its Fill property to a Color. Para dar a la polilínea un contorno, establezca su Stroke propiedad en Color .To give the polyline an outline, set its Stroke property to a Color.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de polilíneaPolyline Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Rectangle Rectangle muestra un rectángulo o un cuadrado.Rectangle displays a rectangle or square. Para pintar el interior del rectángulo, establezca su Fill propiedad en Color .To paint the inside of the rectangle, set its Fill property to a Color. Para dar al rectángulo un contorno, establezca su Stroke propiedad en Color .To give the rectangle an outline, set its Stroke property to a Color.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de rectánguloRectangle Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
WebView WebView muestra páginas web o contenido HTML, en función de si la Source propiedad está establecida en un UriWebViewSource HtmlWebViewSource objeto o.WebView displays Web pages or HTML content, based on whether the Source property is set to a UriWebViewSource or an HtmlWebViewSource object.

Documentación / de API Guía / de Ejemplo 1 y 2API Documentation / Guide / Sample 1 and 2
Ejemplo de WebViewWebView Example
Código C# para esta página / Página XAMLC# code for this page / XAML page

Vistas que inician comandosViews that initiate commands

TipoType DescripciónDescription AspectoAppearance
Button Button es un objeto rectangular que muestra texto y que activa un Clicked evento cuando se presiona.Button is a rectangular object that displays text, and which fires a Clicked event when it's been pressed.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de botónButton Example
Código C# para esta página / Página XAML con código subyacenteC# code for this page / XAML page with code-behind
ImageButton ImageButton es un objeto rectangular que muestra una imagen y que activa un Clicked evento cuando se presiona.ImageButton is a rectangular object that displays an image, and which fires a Clicked event when it's been pressed.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de ImageButtonImageButton Example
Código C# para esta página / Página XAML con código subyacenteC# code for this page / XAML page with code-behind
RadioButton RadioButton permite la selección de una opción de un conjunto y activa un CheckedChanged evento cuando se produce la selección.RadioButton allows the selection of one option from a set, and fires a CheckedChanged event when selection occurs.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de RadioButtonRadioButton Example
Código C# para esta página / Página XAML con código subyacenteC# code for this page / XAML page with code-behind
RefreshView RefreshView es un control contenedor que proporciona funcionalidad de extracción para actualizar para el contenido desplazable.RefreshView is a container control that provides pull-to-refresh functionality for scrollable content. El ICommand definido por la Command propiedad se ejecuta cuando se desencadena una actualización, y la IsRefreshing propiedad indica el estado actual del control.The ICommand defined by the Command property is executed when a refresh is triggered, and the IsRefreshing property indicates the current state of the control.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de RefreshViewRefreshView Example
Código C# para esta página / Página XAML con código subyacenteC# code for this page / XAML page with code-behind
SearchBar SearchBar muestra un área para que el usuario escriba una cadena de texto y un botón (o una tecla del teclado) que señale a la aplicación para realizar una búsqueda.SearchBar displays an area for the user to type a text string, and a button (or a keyboard key) that signals the application to perform a search. La Text propiedad proporciona acceso al texto y el SearchButtonPressed evento indica que se ha presionado el botón.The Text property provides access to the text, and the SearchButtonPressed event indicates that the button has been pressed.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de barraSearchBar Example
Código C# para esta página / Página XAML con código subyacenteC# code for this page / XAML page with code-behind
SwipeView SwipeView es un control contenedor que se ajusta alrededor de un elemento de contenido y proporciona elementos de menú contextual que se revelan mediante un gesto de deslizar rápidamente.SwipeView is a container control that wraps around an item of content, and provides context menu items that are revealed by a swipe gesture. Cada elemento de menú se representa mediante un SwipeItem , que tiene una Command propiedad que ejecuta ICommand cuando se puntea el elemento.Each menu item is represented by a SwipeItem, which has a Command property that executes an ICommand when the item is tapped.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de SwipeViewSwipeView Example
Código C# para esta página / Página XAML con código subyacenteC# code for this page / XAML page with code-behind

Vistas para establecer valoresViews for setting values

TipoType DescripciónDescription AspectoAppearance
CheckBox CheckBox permite al usuario seleccionar un valor booleano mediante un tipo de botón que puede estar activado o vacío.CheckBox allows the user to select a Boolean value using a type of button that can either be checked or empty. La IsChecked propiedad es el estado de CheckBox , y el CheckedChanged evento se desencadena cuando cambia el estado.The IsChecked property is the state of the CheckBox, and the CheckedChanged event is fired when the state changes.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de CheckBoxCheckBox Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Slider Slider permite al usuario seleccionar un double valor de un intervalo continuo especificado con las Minimum propiedades y Maximum .Slider allows the user to select a double value from a continuous range specified with the Minimum and Maximum properties.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de control deslizanteSlider Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Stepper Stepper permite al usuario seleccionar un double valor de un intervalo de valores incrementales especificado con las Minimum propiedades, Maximum y Increment .Stepper allows the user to select a double value from a range of incremental values specified with the Minimum, Maximum, and Increment properties.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de stepperStepper Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Switch Switch toma la forma de un modificador ON/OFF para permitir al usuario seleccionar un valor booleano.Switch takes the form of an on/off switch to allow the user to select a Boolean value. La IsToggled propiedad es el estado del modificador y el Toggled evento se desencadena cuando cambia el estado.The IsToggled property is the state of the switch, and the Toggled event is fired when the state changes.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de conmutadorSwitch Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
DatePicker DatePicker permite al usuario seleccionar una fecha con el selector de fecha de la plataforma.DatePicker allows the user to select a date with the platform date picker. Establezca un intervalo de fechas permitidas con las MinimumDate MaximumDate propiedades y.Set a range of allowable dates with the MinimumDate and MaximumDate properties. La Date propiedad es la fecha seleccionada y el DateSelected evento se desencadena cuando cambia esa propiedad.The Date property is the selected date, and the DateSelected event is fired when that property changes.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de DatePickerDatePicker Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
TimePicker TimePicker permite al usuario seleccionar una hora con el selector de tiempo de plataforma.TimePicker allows the user to select a time with the platform time picker. La Time propiedad es la hora seleccionada.The Time property is the selected time. Una aplicación puede supervisar los cambios en la Time propiedad mediante la instalación de un controlador para el PropertyChanged evento.An application can monitor changes in the Time property by installing a handler for the PropertyChanged event.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de TimePickerTimePicker Example
Código C# para esta página / Página XAMLC# code for this page / XAML page

Vistas para editar textoViews for editing text

Estas dos clases se derivan de la InputView clase, que define la Keyboard propiedad:These two classes derive from the InputView class, which defines the Keyboard property:

TipoType DescripciónDescription AspectoAppearance
Entry Entry permite al usuario escribir y editar una sola línea de texto.Entry allows the user to enter and edit a single line of text. El texto está disponible como la Text propiedad y los TextChanged eventos y Completed se activan cuando cambia el texto o el usuario envía una señal de finalización pulsando la tecla entrar.The text is available as the Text property, and the TextChanged and Completed events are fired when the text changes or the user signals completion by tapping the enter key.

Utilice Editor para escribir y editar varias líneas de texto.Use an Editor for entering and editing multiple lines of text.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de entradaEntry Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Editor Editor permite al usuario escribir y editar varias líneas de texto.Editor allows the user to enter and edit multiple lines of text. El texto está disponible como la Text propiedad y los TextChanged eventos y Completed se activan cuando cambia el texto o el usuario envía una señal de finalización.The text is available as the Text property, and the TextChanged and Completed events are fired when the text changes or the user signals completion.

Use una Entry vista para escribir y editar una sola línea de texto.Use an Entry view for entering and editing a single line of text.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de editorEditor Example
Código C# para esta página / Página XAMLC# code for this page / XAML page

Vistas para indicar actividadViews to indicate activity

TipoType DescripciónDescription AspectoAppearance
ActivityIndicator ActivityIndicator usa una animación para mostrar que la aplicación está ocupada en una actividad prolongada sin ofrecer ninguna indicación de progreso.ActivityIndicator uses an animation to show that the application is engaged in a lengthy activity without giving any indication of progress. La IsRunning propiedad controla la animación.The IsRunning property controls the animation.

Si se conoce el progreso de la actividad, use ProgressBar en su lugar.If the activity's progress is known, use a ProgressBar instead.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de ActivityIndicatorActivityIndicator Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
ProgressBar ProgressBar usa una animación para mostrar que la aplicación progresa a través de una actividad prolongada.ProgressBar uses an animation to show that the application is progressing through a lengthy activity. Establezca la Progress propiedad en valores entre 0 y 1 para indicar el progreso.Set the Progress property to values between 0 and 1 to indicate the progress.

Si no se conoce el progreso de la actividad, use ActivityIndicator en su lugar.If the activity's progress is not known, use an ActivityIndicator instead.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de ProgressBarProgressBar Example
Código C# para esta página / Página XAML con código subyacenteC# code for this page / XAML page with code-behind

Vistas que muestran coleccionesViews that display collections

TipoType DescripciónDescription AspectoAppearance
CarouselView CarouselView muestra una lista desplazable de elementos de datos.CarouselView displays a scrollable list of data items. Establezca la ItemsSource propiedad en una colección de objetos y establezca la ItemTemplate propiedad en un DataTemplate objeto que describa cómo se va a dar formato a los elementos.Set the ItemsSource property to a collection of objects, and set the ItemTemplate property to a DataTemplate object describing how the items are to be formatted. El CurrentItemChanged evento indica que el elemento mostrado actualmente ha cambiado, que está disponible como la CurrentItem propiedad.The CurrentItemChanged event signals that the currently displayed item has changed, which is available as the CurrentItem property.

Guía / de Ejemplo deGuide / Sample
Ejemplo de CarouselViewCarouselView Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
CollectionView CollectionView muestra una lista desplazable de elementos de datos seleccionables, con distintas especificaciones de diseño.CollectionView displays a scrollable list of selectable data items, using different layout specifications. Pretende proporcionar una alternativa más flexible y de rendimiento a ListView .It aims to provide a more flexible, and performant alternative to ListView. Establezca la ItemsSource propiedad en una colección de objetos y establezca la ItemTemplate propiedad en un DataTemplate objeto que describa cómo se va a dar formato a los elementos.Set the ItemsSource property to a collection of objects, and set the ItemTemplate property to a DataTemplate object describing how the items are to be formatted. El SelectionChanged evento indica que se ha realizado una selección, que está disponible como la SelectedItem propiedad.The SelectionChanged event signals that a selection has been made, which is available as the SelectedItem property.

Guía / de Ejemplo deGuide / Sample
Ejemplo de CollectionViewCollectionView Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
IndicatorView IndicatorView muestra indicadores que representan el número de elementos de un CarouselView .IndicatorView displays indicators that represent the number of items in a CarouselView. Establezca la CarouselView.IndicatorView propiedad en el IndicatorView objeto para mostrar indicadores para CarouselView .Set the CarouselView.IndicatorView property to the IndicatorView object to display indicators for the CarouselView.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de IndicatorViewIndicatorView Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
ListView ListView deriva de ItemsView y muestra una lista desplazable de elementos de datos seleccionables.ListView derives from ItemsView and displays a scrollable list of selectable data items. Establezca la ItemsSource propiedad en una colección de objetos y establezca la ItemTemplate propiedad en un DataTemplate objeto que describa cómo se va a dar formato a los elementos.Set the ItemsSource property to a collection of objects, and set the ItemTemplate property to a DataTemplate object describing how the items are to be formatted. El ItemSelected evento indica que se ha realizado una selección, que está disponible como la SelectedItem propiedad.The ItemSelected event signals that a selection has been made, which is available as the SelectedItem property.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de ListViewListView Example
Código C# para esta página / Página XAMLC# code for this page / XAML page
Picker Picker muestra un elemento seleccionado en una lista de cadenas de texto y permite seleccionar ese elemento cuando se puntea en la vista.Picker displays a selected item from a list of text strings, and allows selecting that item when the view is tapped. Establezca la Items propiedad en una lista de cadenas o la ItemsSource propiedad en una colección de objetos.Set the Items property to a list of strings, or the ItemsSource property to a collection of objects. El SelectedIndexChanged evento se desencadena cuando se selecciona un elemento.The SelectedIndexChanged event is fired when an item is selected.

PickerMuestra la lista de elementos solo cuando está seleccionado.The Picker displays the list of items only when it's selected. Use ListView o TableView para una lista desplazable que permanezca en la página.Use a ListView or TableView for a scrollable list that remains on the page.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo del selectorPicker Example
Código C# para esta página / Página XAML con código subyacenteC# code for this page / XAML page with code-behind
TableView TableView muestra una lista de filas de tipo Cell con encabezados y subencabezados opcionales.TableView displays a list of rows of type Cell with optional headers and subheaders. Establezca la Root propiedad en un objeto de tipo TableRoot y agregue TableSection objetos a esa TableRoot .Set the Root property to an object of type TableRoot, and add TableSection objects to that TableRoot. Cada TableSection es una colección de Cell objetos.Each TableSection is a collection of Cell objects.

Documentación / de API Guía / de Ejemplo deAPI Documentation / Guide / Sample
Ejemplo de TableViewTableView Example
Código C# para esta página / Página XAMLC# code for this page / XAML page