Controles XAML

Artículo
12/02/2021
3 minutos para leer

Ejemplo de descarga Descarga del ejemplo

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 puede hacer referencia a todas las vistas definidas en Xamarin.Forms desde archivos XAML.

Vistas para presentación

Ver

Ejemplo

BoxView

Muestra un rectángulo de un color determinado.

Captura de pantalla de BoxView

<BoxView Color="Accent"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

Elipse

Muestra una elipse o un círculo.

Captura de pantalla de una elipse

<Ellipse Fill="Red"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

Imagen

Muestra un mapa de bits.

Captura de pantalla de una imagen

<Image Source=" https://aka.ms/campus.jpg" ;
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Etiqueta

Muestra una o varias líneas de texto.

Captura de pantalla de una etiqueta

<Label Text="Hello, Xamarin.Forms !"
       FontSize="Large"
       FontAttributes="Italic"
       HorizontalTextAlignment="Center" />

Línea

Mostrar una línea.

Captura de pantalla de una línea

<Línea X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Red"
      HorizontalOptions="Center" />

Asignación

Muestra un mapa.

Captura de pantalla de un mapa

<maps:Map ItemsSource="{Binding Locations}" />

Ruta

Mostrar curvas y formas complejas.

Captura de pantalla de una ruta de

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.9,16.2
            L32,16.2 32,31.9 13.9,30.1Z
            M0,16.2
            L11.9,16.2 11.9,29.9 0,28.6Z
            M11.9,2
            L11.9,14.2 0,14.2 0,3.3Z
            M32,0
            L32,14.2 13.9,14.2 13.9,1.8Z" />

Polygon

Mostrar un polígono.

Captura de pantalla de un polígono

<Polygon Points="0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48"
         Fill="Blue"
         Stroke="Red"
         StrokeThickness="3"
         HorizontalOptions="Center" />

Polilínea

Muestra una serie de líneas rectas conectadas.

Captura de pantalla de una polilínea polilínea

<Polyline Points="0,0 10,30, 15,0 18,60 23,30 35,30 40,0
                  43,60 48,30 100,30"
          Stroke="Red"
          HorizontalOptions="Center" />

Rectángulo

Mostrar un rectángulo o cuadrado.

Captura de pantalla de un rectángulo

<Rectangle Fill="Red"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

Muestra páginas web o contenido HTML.

Captura de pantalla de webView

<WebView Source=" https://docs.microsoft.com/xamarin/" ;
         VerticalOptions="FillAndExpand" />

Vistas que inician comandos

Ver

Ejemplo

Botón

Muestra texto en un objeto rectangular.

<Button Text="Click Me!"
        Font="Large"
        BorderWidth="1"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand"
        Clicked="OnButtonClicked" />

ImageButton

Muestra una imagen en un objeto rectangular.

Captura de pantalla de ImageButton

<ImageButton Source="XamarinLogo.png"
             HorizontalOptions="Center"
             VerticalOptions="CenterAndExpand"
             Clicked="OnImageButtonClicked" />

RadioButton

Permite la selección de una opción de un conjunto.

Captura de pantalla de un RadioButton

<RadioButton Text="Secuescución"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

Proporciona funcionalidad de extracción y actualización para el contenido desplazable.

Captura de pantalla de RefreshView

<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <!-- control desplazable va aquí:>
</RefreshView>

Barra de búsqueda

Acepta la entrada del usuario que usa para realizar una búsqueda.

Captura de pantalla de searchbar

<Marcador de posición de la barra de búsqueda="Escribir término de búsqueda"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Proporciona elementos de menú contextual que se revelan mediante un gesto de deslizar el dedo.

Captura de pantalla de swipeview de

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- contenido:>
</SwipeView>

Vistas para establecer valores

Ver Ejemplo

CheckBox

Permite la selección de un boolean valor.

Captura de pantalla de una casilla checkbox

<CheckBox IsChecked="true"
          HorizontalOptions="Center"
          VerticalOptions="CenterAndExpand" />

Control deslizante

Permite la selección de un double valor de un intervalo continuo.

Captura de pantalla de un control

<Slider Minimum="0"
        Maximum="100"
        VerticalOptions="CenterAndExpand" />

Control de incremento

Permite la selección de un double valor de un intervalo incremental.

Captura de pantalla de un stepper

<Stepper Minimum="0"
         Maximum="10"
         Increment="0.1"
         HorizontalOptions="Center"
         VerticalOptions="CenterAndExpand" />

Switch

Permite la selección de un boolean valor.

Captura de pantalla de un conmutador

<Switch IsToggled="false"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />

DatePicker

Permite la selección de una fecha.

Captura de pantalla de DatePicker

<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

Permite la selección de una hora.

Captura de pantalla de TimePicker

<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

Vistas para editar texto

Ver

Ejemplo

Entrada

Permite especificar y editar una sola línea de texto.

Captura de pantalla de una entrada

<Entrada Keyboard="Email"
       Placeholder="Enter email address"
       VerticalOptions="CenterAndExpand" />

Editor

Permite especificar y editar varias líneas de texto.

Captura de pantalla de una etiqueta del

<Editor VerticalOptions="FillAndExpand" />

Vistas para indicar actividad

Ver

Ejemplo

ActivityIndicator

Muestra una animación para mostrar que la aplicación está dedicada a una actividad larga, sin dar ninguna indicación de progreso.

Captura de pantalla de activityindicator

<ActivityIndicator IsRunning="True"
                   VerticalOptions="CenterAndExpand" />

ProgressBar

Muestra una animación para mostrar que la aplicación progresa a través de una actividad larga.

Captura de pantalla de ProgressBar

<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

Vistas que muestran colecciones

Ver Ejemplo

CarouselView

Muestra una lista desplazable de elementos de datos.

Captura de pantalla de un carouselView de

<CarouselView ItemsSource="{Binding Monkeys}">
              ItemTemplate="{StaticResource MonkeyTemplate}" />

CollectionView

Muestra una lista desplazable de elementos de datos seleccionables, con diferentes especificaciones de diseño.

Captura de pantalla de CollectionView

<CollectionView ItemsSource="{Binding Monkeys}">
                ItemTemplate="{StaticResource MonkeyTemplate}"
                ItemsLayout="VerticalGrid, 2" />

IndicatorView

Muestra indicadores que representan el número de elementos de CarouselView un .

Captura de pantalla de indicatorview

<IndicatorView x:Name="indicatorView"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

ListView

Muestra una lista desplazable de elementos de datos seleccionables.

Captura de pantalla de listView

<ListView ItemsSource="{Binding Monkeys}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Selector

Muestra un elemento de selección de una lista de cadenas de texto.

Captura de pantalla de un selector

<Picker Title="Select a monkey"
        TitleColor="Red">
  <Picker.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <>x:StringMpoon < /x:String>
      <x:String > Capilen Monkey < /x:String>
      <x:String > Blue Monkey < /x:String>
      <x:String > Monkey de cadena < /x:String>
      <x:String > Golden Golden Golden Lion Tamarin < /x:String>
      <x:String > Howler Monkey < /x:String>
      <x:String > Japanese Macaque < /x:String>
    </x:Array>
  </Picker.ItemsSource>
</Picker>

TableView

Muestra una lista de filas interactivas.

Captura de pantalla de TableView

<TableView Intent="Configuración">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="New Voice Mail" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>