Xamarin.Forms Vistas
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 |
ejemplo deCó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 elipse![]() 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 etiqueta ejemploCó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 |
de![]() 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 |
![]() 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 |
![]() 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 |
![]() 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 ruta![]() 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 |
de![]() 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 |
![]() 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ángulo ejemploCó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 |
ejemplo deCó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ón![]() 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 |
deCó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 deCó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 |
deCó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 |
de barra deCó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 |
ejemplo deCó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 |
![]() 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 |
![]() 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 de exampleCó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 |
![]() 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 |
![]() 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 |
![]() 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 deCó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 |
![]() 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 |
![]() 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 |
deCó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 deCó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 |
deCó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 |
deCó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">. SelectedItemDocumentación de APIGuíaMuestra |
deCó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 selector ejemploCó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 |
deCódigo de C# para esta páginaPágina XAML |
Descarga del ejemplo
ejemplo de
ejemplo






ejemplo
ejemplo de
de
ejemplo de
de
de barra de
ejemplo de

example


de ejemplo de

de
Ejemplo de
de
de
de
ejemplo
de