Novedades en Xamarin.Forms 3.6

Introducción

Versión tras versión recibimos novedades en Xamarin.Forms. En la última versión estable (3.6) hemos recibimos múltiples novedades de peso (donde brilla con luz propia Visual). ¿Y si las repasamos todas?.

Novedades

A continuación, vamos a realizar un repaso de todas las principales novedades introducidas en esta versión.

Visual

A la hora de desarrollar aplicaciones multiplataforma, buscamos llegar a diferentes plataformas cada una de ellas con sus propias guías de estilo, controles e idiosincrasia. Sin embargo, en ocasiones como desarrolladores móviles buscamos conseguir el mismo aspecto. Con Xamarin.Forms, a pesar de contar con una capa de abstracción en la capa de UI permitiendo definir la interfaz una única vez, creamos aplicaciones nativas. Es decir, utilizando Xamarin.Forms utilizamos los controles nativos de cada plataforma. Para conseguir un mismo aspecto necesitamos utilizar Custom Renderers o efectos en ocasiones.

Con Visual nos llega una nueva forma de indicar una forma de renderizar los controles nativos.

NOTA: Utilizando Visual seguimos utilizando controles 100% nativos.

Para establecer el uso de Visual, utilizaremos la propiedad Visual:

<ContentPage 
     Visual="Material">

</ContentPage>

La propiedad Visual esta disponible en la clase VisualElement. Cualquier elemento hijo de otro heredará el valor de la propiedad y modificará su forma de renderizar. Por este motivo, si establecemos Visual a nivel de ContentPage aseguramos que cualquier elemento de la página utilizará el nuevo sistema de renderizado.

NOTA: El valor de la propiedad Visual puede cambiar en tiempo de ejecución.

Nos llega esta funcionalidad en modo Preview con la apariencia basada en Material Design.

Además, se incluye la posibilidad de crear Custom Renderer para Visual.

ItemsSource e ItemTemplate en mapas

En esta versión se añaden dos nuevas propiedades el control de tipo mapa:

  • ItemsSource: Especifica la colección de tipo IEnumerable de elementos a mostrar.
  • ItemTemplate: DataTemplate a utilizar en cada elemento de la colección.

Un ejemplo:

<map:Map
     ItemsSource="{Binding Places}">
          <map:Map.ItemTemplate>
          <DataTemplate>
               <map:Pin 
                    Position="{Binding Position}"
                    Address="{Binding Address}"
                    Label="{Binding Description}" />
          </DataTemplate>
     </map:Map.ItemTemplate>
</map:Map>

Y el resultado:

ItemsSource e ItemTemplate en mapas!

FontImageSource

Se añade un nuevo tipo ed imagen, la clase FontImageSource derivada de ImageSource. Permite mostrar iconos que provienen de fuentes.

Cuenta con las siguientes propiedades:

  • Glyph: Valor de tipo cadena que especifica el caracter a utilizar de la fuente.
  • Color: Color a usar en el Glyph.
  • FontFamily: La fuente a utilizar.
  • Size: Valor de tipo double que especifica el tamaño a utilizar al renderizar el icono. El valor por defecto es 30.

Veamos un ejemplo:

<Image
     BackgroundColor="Gray">
     <Image.Source>
          <FontImageSource 
               Glyph="{Binding Glyph}"
               FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}"
               Size="44"/>
     </Image.Source>
</Image>

Y el resultado:

FontImageSource

 

ReadOnly Entry

Una opción muy solicitada era la posibilidad de tener Entry de solo lectura. Se añade la propiedad IsReadOnly.

<Entry 
     Text="Content..."
     IsReadOnly="true"/>

A diferencia de IsEnabled, esta nueva propiedad no modifica el aspecto visual del control.

Otras novedades

En esta versión se han incluidos otras novedades también interesantes como:

Más información

[Material] Novedades en Xamarin.Forms 4: Shell, CollectionView y más!

El evento

El pasado Jueves 11, celebramos un nuevo evento en SVQXDG (grupo de desarrolladores de Xamarin en Sevilla) donde repasamos todas las últimas novedades de Xamarin.Forms.

Repasando novedades de Xamarin.Forms

El material

A continación, vamos a repasar todo el material (presentación y ejemplos) que vimos en la presentación.

Novedades de Xamarin.Forms 3.5

Comenzamos el evento viendo las últimas novedades en las versiones estables, empezando por la versión 3.5. Vimos:

  • BindableLayout
  • ScrollBarVisibility
  • SwitchCell OnColor
  • Novedades en accesibilidad
  • Otras novedades

En cuanto al ejemplo, esta disponible en GitHub:

Ver GitHub

Novedades en Xamarin.Forms 3.6

Continuamos viendo las novedades de la última versión estable de Xamarin.Forms a la hora de escribir este artículo, la versión 3.6. Novedades:

  • Visual.
  • ItemsSource e ItemTemplate en mapas.
  • FontImageSource.
  • Otras novedades.

En cuanto al ejemplo, esta disponible en GitHub:

Ver GitHub

Visual

A la hora de desarrollar aplicaciones multiplataforma, buscamos llegar a diferentes plataformas cada una de ellas con sus propias guías de estilo, controles e idiosincrasia. Sin embargo, en ocasiones como desarrolladores móviles buscamos conseguir el mismo aspecto. Con Xamarin.Forms, a pesar de contar con una capa de abstracción en la capa de UI permitiendo definir la interfaz una única vez, creamos aplicaciones nativas. Es decir, utilizando Xamarin.Forms utilizamos los controles nativos de cada plataforma. Para conseguir un mismo aspecto necesitamos utilizar Custom Renderers o efectos en ocasiones.

Con Visual nos llega una nueva forma de indicar una forma de renderizar los controles nativos.

Hicimos un repaso como usar y que ofrece Visual. Espero que en próximos eventos veamos como crear renderers personalizados con Visual y otras opciones.

CollectionView

Continuamos con más novedades!. Llegaba el momento de hablar de CollectionView creando listados, listados horizontales, diferentes layouts con columnas, etc.

En cuanto al ejemplo, esta disponible en GitHub:

Ver GitHub

Shell

Llegamos al plato fuerte del evento, y la novedad principal con Xamarin.Forms 4, Shell. Vimos:

  • Introducción a Shell.
  • ShellItem, ShellSection y ShellContent.
  • Nuevas opciones al navegar.
  • Crear Flyouts.
  • Barras de búsqueda.
  • Otras opciones (ocultar tabs o nav, etc.).

El ejemplo:

Ver GitHub

Otras novedades

Para terminar el evento, vimos novedades de terceros. En concreto, repasamos Aurora Controls y Grial UI Kit 3.

Como de costumbre, un placer compartir momentos en comunidad. Muchas gracias a todos los asistentes, nos vemos en la próxima!. Pero…un momento. Me gustaría terminar recordando que la comunidad es de todos. Si te apetece hablar de tecnologías .NET o Xamarin, tan solo avísame!.

Más información

[SVQXDG] Nuevo evento: Un repaso a las últimas novedades en Xamarin.Forms

El evento

Si repasamos la lista de grandes novedades de Xamarin.Forms de los últimos meses encontramos una cantidad elevada de cambios. Hablamos de Shell, Visual, BindableLayout, Bindable Maps, etc que sumado a muchos pequeños detalles (FontIconSource, Read only Entry, etc.) nos brinda nuevas posibilidades.

Xamarin.Forms

¿Y si las recopilamos y vemos todas en un evento?.

El lugar

El evento se celebrará en la ETS de Ingeniería Informática. Dirección detallada:

E.T.S. Ingeniería Informática – Universidad de Sevilla, Aula por confirmar
Av. Reina Mercedes s/n
Sevilla Se 41012

La fecha

Será el próximo Jueves, 11 de Abril de 20:00h a 21:00h (GMT+1).

¿Te apuntas?

Más información

[Preview] Primer vistazo a Xamarin.Forms Visual

Introducción

A la hora de desarrollar aplicaciones multiplataforma, buscamos llegar a diferentes plataformas cada una de ellas con sus propias guías de estilo, controles e idiosincrasia. Sin embargo, en ocasiones como desarrolladores móviles buscamos conseguir el mismo aspecto. Con Xamarin.Forms, a pesar de contar con una capa de abstracción en la capa de UI permitiendo definir la interfaz una única vez, creamos aplicaciones nativas. Es decir, utilizando Xamarin.Forms utilizamos los controles nativos de cada plataforma. Para conseguir un mismo aspecto necesitamos utilizar Custom Renderers o efectos en ocasiones.

Xamarin.Forms Visual

Con Xamarin.Forms 4.0-pre1 nos llega una nueva forma de indicar una forma de renderizar los controles nativos con Visual.

Cuando utilizamos Visual, se utiliza el renderizado personalizado en cada plataforma en lugar del renderizado predeterminado.

NOTA: Utilizando Visual seguimos utilizando controles 100% nativos.

Para establecer el uso de Visual, utilizaremos la propiedad Visual:

<ContentPage 
     Visual="Material">

</ContentPage>

La propiedad Visual esta disponible en la clase VisualElement. Cualquier elemento hijo de otro heredará el valor de la propiedad y modificará su forma de renderizar. Por este motivo, si establecemos Visual a nivel de ContentPage aseguramos que cualquier elemento de la página utilizará el nuevo sistema de renderizado.

NOTA: El valor de la propiedad Visual puede cambiar en tiempo de ejecución.

Nos llega esta funcionalidad en modo Preview con la apariencia basada en Material Design. Actualmente, en la versión 4.0-pre1 contamos con Material Design en Android e iOS para los siguientes controles:

  • Button
  • Entry
  • Frame
  • ProgressBar

Para utilizar Visual, por ahora (recuerda, estamos ante una Preview) es necesario añadir la siguiente línea:

Forms.SetFlags("Visual_Experimental");

Antes de llamar a Forms.Init. Además, en iOS, es necesario añadir el paquete NuGet Xamarin.iOS.MaterialComponents.

NOTA: Visual requiere API 29 para funcionar en Android.

Veamos un ejemplo:

<Grid
     BackgroundColor="DarkGray">
     <Frame 
          Style="{StaticResource SignInFrameStyle}">
          <StackLayout 
               Style="{StaticResource SignInPanelStyle}">
               <Label 
                    Text="Sign in"
                    Style="{StaticResource SignInTitleStyle}" />
               <Entry 
                    Placeholder="Username" />
               <Entry 
                    IsPassword="True"
                    Placeholder="Password" />
               <Button 
                    Text="Sign in" 
                    Style="{StaticResource SignInButtontyle}"/>
          </StackLayout>
     </Frame>
</Grid>

El resultado:

Visual

Tienes el ejemplo disponible en GitHub:

Ver GitHub

Más información