[Xamarin UI Challenge] Flights UI

El reto

Volvemos a por un reto de interfaz de usuario con Xamarin.Forms. En esta ocasión, crear un efecto Pull To Refresh personalizado.

La UI a replicar

Los retos del ejemplo

Los retos para conseguir un Pull to Refresh personalizado son los siguientes:

  • Pull to Refresh: Contamos con el control RefreshView diseñado justamente para hacer pull to refresh. Sin embargo, el contenido al hacer refresco no es personalizable. Así que, para conseguir el resultado deseado vamos a utilizar un SwipeView. El contenido del SwipeView será el listado de vuelos mientras que usaremos un SwipeItemView (soporta una View como contenido) para añadir la animación personalizada.
  • La animación de refresco: Para la animación de refresco vamos a usar Lottie.
  • El listado de vuelos: El listado de vuelos se realizará usando CollectionView.

Listado de vuelos

El listado es de todos los elementos de la interfaz, la parte más sencilla.

<CollectionView
     ItemsSource="{Binding Booking}">
</CollectionView>

Mostramos un listado de vuelos resultados de una búsqueda. En la cabecera mostramos información básica como el número total de resultados. Podemos conseguir añadir la información encima de cada resultado usando la cabecera (Header) del CollectionView.

<CollectionView.Header>
     <Grid
          Padding="0, 12, 0, 0">
          <Label 
               Text="2 Search Results"
               Style="{StaticResource HeaderStyle}"/>
     </Grid>
</CollectionView.Header>

El resultado:

La cabecera del listado de vuelos

Cada resultado de trayecto puede tener múltiples vuelos. Vamos a usar Bindable Layout dentro de cada elemento del CollectionView.

<StackLayout
     BindableLayout.ItemsSource="{Binding Flights}"> 
</StackLayout>

De esta forma adaptaremos cada celda de forma sencilla a mostrar el total de paradas y trayectos de un resultado:

Detalles de cada vuelos

Sencillo, ¿verdad?.

Pull to Refresh personalizado

La clave del ejemplo, el efecto Pull to Refresh personalizado lo conseguimos usando el control SwipeView. SwipeView permite cuatro direcciones para hacer swipe: arriba, abajo, izquierda y derecha. En nuestro caso, queremos hacer pull desde la parte superior y por ello vamos a utilizar TopItems. Podemos usar:

  • SwipeItem: Acción contextual sencilla. Es fácil de configurar (color de fondo, texto e icono), pudiendo ejecutar un comando o evento.
  • SwipeItemView: Permite como contenido una View, por lo que las opciones de personalización son más altas.

¿Sabes que vamos a utilizar en este caso?. Probablemente has acertado, vamos a usar un SwipeItemView donde vamos a añadir nuestra animación personalizada.

<SwipeView
     x:Name="SwipeView"
     SwipeEnded="OnSwipeEnded">
     <!-- PULL TO REFRESH CONTENT -->
     <SwipeView.TopItems>
          <SwipeItemView>
               <Grid
                    HeightRequest="60">
                    <!-- CUSTOM ANIMATION -->
               </Grid>
          </SwipeItemView>
     </SwipeView.TopItems>
     <!-- CONTENT -->
     <Grid>
          <CollectionView
               ItemsSource="{Binding Booking}">
          </CollectionView>
     </Grid>
</SwipeView>

Pasamos a ver como definir la animación personalizada.

Animación usando Lottie

La librería Lottie fue creada por Airbnb inicialmente para iOS, Android y React Native. Sin embargo, gracias a la contrinución de Martijn van Dijk y otros miembros de la comuidad, tenemos soporte en Xamarin y Xamarin.Forms.

Para comenzar a trabajar con Lottie en Xamarin.Forms utilizaremos el paquete NuGet Aribnb.Xamarin.Forms.Lottie:

Install-Package Com.Airbnb.Xamarin.Forms.Lottie

Para completar el proceso de preparación de Lottie en nuestro proyecto Xamarin.Forms, necesitamos añadir la siguiente línea tras la inicialización de Xamarin.Forms en cada proyecto nativo:

AnimationViewRenderer.Init();

Para poder mostrar una animación de Lottie, debemos añadir el archivo JSON a cada proyecto nativo:

  • Android: En la carpeta Assets. El archivo debe tener como acción de compilación AndroidAsset.
  • iOS: En la carpeta Resources. El archivo debe tener como acción de compilación BundleResource.
  • UWP: En la carpeta Assets (o en la raíz), el archivo debe tener como acción de compilación Content.

Para mostrar la animación necesitamos un elemento visual que nos permita visualizar la animación además realizar una gestión de la misma. Este elemento visual es AnimationView.

<SwipeView.TopItems>
     <SwipeItemView>
          <Grid
               BackgroundColor="{StaticResource AccentColor}"
               HeightRequest="60">
               <lottie:AnimationView
                    Animation="pulltorefresh.json"
                    Loop="False" 
                    AutoPlay="True"
                    VerticalOptions="FillAndExpand"
                    HorizontalOptions="FillAndExpand"/>
          </Grid>
     </SwipeItemView>
</SwipeView.TopItems>

En nuestro ejemplo usamos esta gran animación creada por Lenny Miranda jr.

Animación de refresco

Obtener recursos

Un gran fuente de animaciones es LottieFiles. Puedes encontrar una gran variedad de animaciones listas para utilizar con opciones de búsqueda, etc.

LottieFiles

NOTA: Si usas animaciones de LottieFiles, recuerda otorgar crédito a sus creadores.

Con la definición del CollectionView, SwipeView y animación con Lottie, tenemos todo lo necesario. Veamos el resultado final!.

El resultado

Puedes encontrar el código en GitHub:

Ver GitHub

Más información

Cancelación Sevilla Net Conf 2020

Tras las últimas noticias acerca del coronavirus que tod@s conocemos y en un acto de responsabilidad compartida, nos vemos obligados a tomar una decisión triste pero que consideramos necesaria, hemos decidido cancelar la primera edición de la Sevilla .NET
Conf. ¡La seguridad de todos es lo más importante!.

Sevilla Net Conf 2020

Hemos barajado posponerlo al último trimestre del año, pero es posible que tengamos un exceso de eventos en esas fechas y no queremos colisionar con las demás comunidades técnicas o ciudades, que, como nosotros, se han esforzado muchísimo para organizar sus eventos.
También hemos pensado en esperar hasta el último momento posible, pero consideramos que podría ser un problema para aquellos que reserváis vuelos, hoteles, etc. si cancelamos con poca antelación. No queremos cancelar a última hora y que algunos no podáis recuperar vuestro dinero.

Cancelamos, a menos de dos meses del evento, con entorno a 70 entradas asignadas y 13 propuestas presentadas en el Call 4 Paper.
Hay una gran cantidad de esfuerzo y trabajo detrás de la organización de un evento, quizás algo superior al tratarse de la primera edición, pero esperamos que este trabajo también facilite las cosas en próximas ediciones.

Estamos recibiendo muchísimo apoyo y comprensión de nuestros patrocinadores y colaboradores. Todos están ofreciendo ayuda en lo posible. GRACIAS.

Si fuese posible retomar el evento este año sin colisionar o afectar a otroseventos, volveremos a intentarlo. En cualquier otro caso, esperamos veros en la #SvqNetConf2021.

Sevilla Net Conf 2020

Introducción

Tras un tiempo trabajando en dar forma la idea de tener un evento de mayor tamaño en Sevilla, estoy muy contento de poder compartir con todos información detallada de la Sevilla Net Conf 2020.

¿Por qué el evento?

Antes de lanzarme a explicar el evento, detalles, etc. quiero comenzar hablando de como nace la idea y el por qué de un evento así. En Sevilla solemos tener de forma periódica eventos en las comunidades de .NET y Xamarin. Hablamos de eventos pequeños (15-30 asistentes) de una única charla habitualmente, en ocasiones con dos. En los últimos años, algo que ha pasado de forma habitual es que para la mayoría de charlas solemos contar con un número reducido de speakers. Por otro lado, aunque se van sumando más miembros a la comunidad en asistencia y/o participación, en quedadas donde se hablaba acerca de ideas, cosas a mejorar, etc. un punto habitual y repetido ha sido llegar a más personas.

En base a los dos puntos anteriores, nace el evento. En la comunidad .NET tenemos una variedad y calidad de speakers muy alta. Organizar algo mayor donde poder contar con la participación de alguien que no se ve habitualmente en sesiones en Sevilla es una oportunidad fantástica para comunidad local. Por otro lado, quizás un evento de mayor tamaño llega a más empresas y desarrolladores fomentando la participación no solo en este evento, sino en otros eventos a posteriori.

Sevilla Net Conf

La Sevilla Net Conf 2020 es un evento gratuito que tendrá lugar el próximo 09 de Mayo. Será un evento de un solo día pero de mañana y tarde. Por este motivo, el evento ofrecerá un almuerzo para los asistentes.

Sevilla Net Conf 2020

Con una capacidad de asistentes elevada, ya se han abierto las entradas así como el Call 4 Paper.

Más información del evento:

  • Estamos cerrando el lugar. La idea es contar con una capacidad alta y que se encuentre en una zona adecuada teniendo en cuenta varios factores (transporte, hoteles cercanos, etc.). La página web del evento se actualizará con mapa, información de transporte, hoteles, etc. en cuanto tengamos cerrado el lugar.
  • El Call 4 Paper es abierto y cualquiera puede participar. El Call 4 Paper estará abierto hasta el 12 de Abril. A mitad de Abril se actualizará la web con la agenda y cada ponente recibirá confirmación e información detallada.
  • El evento contará con streaming y grabaciones de las sesiones. Sin embargo, si puedes asistir no te pierdas el evento!. No hay nada como poder asistir y compartir momentos de networking entre todos.
  • El evento será gratuito al cubrir costes gracias a sponsors. De momento contamos con 4 sponsors (gracias DevsDNA, Plain Concepts, MetaDev y Everis!), pero tenemos una gran cantidad de ideas que nos encantaría poder llevar a cabo. Contamos con tres niveles de patrocinio; oro, plata y bronce. Cada nivel cuenta con diferentes privilegios. Puedes ver más información al respecto en la web del evento. Si estas interesado en colaborar como patrocinador puedes escribir a contacto@sevillanetconf.es.
  • Sorpresas. Aún tenemos que cerrar algunos detalles pero ya tenemos algunas sorpresas preparadas.

Más información

[Xamarin.Forms] Creando StateTriggers personalizados

StateTriggers

Recientemente hablábamos en el blog acerca de los StateTriggers añadidos en Xamarin.Forms. Los StateTriggers representan un conjunto de reglas que aplican VisualStates basados ciertas condiciones. Ahora, cada VisualState cuenta con una colección de StateTriggerBase que indican cuando el VisualState se debe aplicar. Si alguno de los triggers esta activo, el VisualState será aplicado.

Xamarin.Forms facilita ciertos StateTriggers para cubrir casos habituales como la orientación del dispositivos, cambios dinámicos en el tamaño de la ventana de la App, etc. Sin embargo, ¿no sería genial poder extender las posibilidades y crear StateTriggers personalizados?.

Creando StateTriggers personalizados

Podemos crear nuestros propios StateTriggers!. A continuación, vamos a aprender como crearlos. Para entender el concepto bien vamos a crear un trigger que nos permite actualizar la UI basándose en el estado de la conexión a internet.

Lo primero es comenzar creando una clase que here de StateTriggerBase:

public class NetworkConnectionStateTrigger : StateTriggerBase
{

}

Para aplicar un VisualState necesitamos establecer la propiedad IsActive a True. Podemos usar el método SetActive disponible en StateTriggerBase para ello. Necesitamos “algo” para poder gestionar que estados aplicar cuando hay conexión y cuando no, para ellos vamos a crear una BindableProperty:

public bool IsConnected
{
     get => (bool)GetValue(IsConnectedProperty);
     set => SetValue(IsConnectedProperty, value);
}

public static readonly BindableProperty IsConnectedProperty =
     BindableProperty.Create(nameof(IsConnected), typeof(bool), typeof(NetworkConnectionStateTrigger), false,
          propertyChanged: OnIsConnectedChanged);

Al cambiar la propiedad vamos a actualizar el valor de IsActive.

void UpdateState()
{
    var current = Connectivity.NetworkAccess;

    if (IsConnected)
         SetActive(current == NetworkAccess.Internet);
    else 
         SetActive(current != NetworkAccess.Internet);
}

Utilizamos las APIs disponibles para conocer el estado de la red disponibles en Xamarin.Essentials. Hasta este punto, tenemos el trigger casi completo (sencillo, ¿verdad?) pero, nos falta un detalle. Estará genial actualizar el valor de IsActive de forma automática al cambiar el estado de la red. Para ello, vamos a utilizar el evento ConnectivityChanged:

Connectivity.ConnectivityChanged += OnConnectivityChanged;

Todo preparado, vamos a ver como utilizar el StateTrigger creado.

Usar el StateTrigger creado

Lo primero que debemos hacer es declarar el namespace en XAML donde hemos creado el StateTrigger:

xmlns:statetriggers="clr-namespace:XamarinFormsStateTriggers"

Para usarlo:

<Grid>
     <VisualStateManager.VisualStateGroups>
          <VisualStateGroup>
               <VisualState 
                    x:Name="NoConnected">
                    <VisualState.StateTriggers> 
                        <statetriggers:NetworkConnectionStateTrigger IsConnected="False" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Red" />
                         <Setter TargetName="InfoLabel" Property="Label.Text" 
                              Value="No Internet connection available" />
                    </VisualState.Setters>
               </VisualState>
               <VisualState
                    x:Name="Connected">
                    <VisualState.StateTriggers>
                         <statetriggers:NetworkConnectionStateTrigger IsConnected="True" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Green" />
                    </VisualState.Setters>
               </VisualState>
          </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
     <Label
          x:Name="InfoLabel"
          Text="Connected"
          HorizontalOptions="Center"
          VerticalOptions="Center" />
</Grid>

Hemos creado dos VisualState, uno que aplicaremos cuando hay conexión, y otro cuando no. Usamos NetworkConnectionStateTrigger con la propiedad creada, IsConnected para automáticamente aplicar VisualStates en base a la conexión.

El resultado:

NetworkConnectionStateTrigger

Puedes encontrar el código en GitHub:

Ver GitHub

Personalmente, pienso que la posibilidad de crear StateTriggers personalizados cubre un hueco interesante facilitando en gran medida opciones anteriormente posibles. Además, una vez creado el StateTrigger es reutilizable!. Y a ti, ¿qué te parecen?. Recuerda, puedes dejar cualquier feedback en los comentarios de la entrada.

Más información

[Xamarin.Forms] StateTriggers

Introducción

En forma de Preview acaba de llegar en Xamarin.Forms mejoras en VisualStateManager con el soporte a StateTriggers.

StateTriggers

Los StateTriggers representan un conjunto de reglas que aplican VisualStates basados ciertas condiciones. Ahora, cada VisualState cuenta con una colección de StateTriggerBase que indican cuando el VisualState se debe aplicar. Si alguno de los triggers esta activo, el VisualState será aplicado.

NOTA: Si has desarrollado previamente para UWP, el concepto de StateTriggers te será familiar.

StateTriggers es una Preview por lo que para usarlo, recuerda usar la siguiente etiqueta experimental:

Xamarin.Forms.Forms.SetFlags("StateTriggers_Experimental");

AdaptiveTrigger

Este trigger es muy versátil. Permite definir reglas en XAML basadas en el tamaño de la pantalla. Veamos un ejemplo:

Cuenta con dos posibles valores:

  • MinWindowHeight
  • MinWindowWidth

Veamos un ejemplo sencillo:

<Grid>
     <VisualStateManager.VisualStateGroups>
          <VisualStateGroup>
               <VisualState x:Name="Narrow">
                    <VisualState.StateTriggers>
                         <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                   <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Blue" />
                   </VisualState.Setters>
              </VisualState>
              <VisualState x:Name="Medium">
                   <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                   </VisualState.StateTriggers>
                   <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Red" />
                   </VisualState.Setters>
               </VisualState>
               <VisualState x:Name="Large">
                    <VisualState.StateTriggers>
                         <AdaptiveTrigger MinWindowWidth="1000" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Green" />
                    </VisualState.Setters>
               </VisualState>
          </VisualStateGroup>
     </VisualStateManager.VisualStateGroups> 
</Grid>

El resultado:

AdaptiveTrigger

El color de fondo del Grid será azul. Si el ancho de la ventana es mayor que 720 pasará (automáticamente) a ser rojo. Por último, el color cambiará a verde si el ancho es mayor que 1000.

CompareStateTrigger

CompareStateTrigger activará el trigger si el valor de Property es igual a Value.

<Grid>
     <VisualStateManager.VisualStateGroups>
          <VisualStateGroup>
               <VisualState x:Name="Checked">
                    <VisualState.StateTriggers>
                         <CompareStateTrigger Property="{Binding IsChecked, Source={x:Reference CheckBox}}" Value="True" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Green" />
                    </VisualState.Setters>
               </VisualState>
               <VisualState x:Name="UnChecked">
                    <VisualState.StateTriggers>
                         <CompareStateTrigger Property="{Binding IsChecked, Source={x:Reference CheckBox}}" Value="False" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Red" />
                    </VisualState.Setters>
               </VisualState>
          </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <CheckBox
           x:Name="CheckBox"/>
</Grid>

Veamos el resultado:

CompareStateTrigger

Como podemos ver, estamos modificando el BackgroundColor del Grid en base a si el CheckBox esta marcado o no. Si el ChechBox esta marcado, el color de fondo es verde, en otro caso será rojo.

Se puede utilizar enlace a datos por lo que la comparación puede ser con una propiedad de la ViewModel, una propiedad de un elemento visual, etc. abriendo una enorme variedad de posibilidades de forma muy sencilla.

DeviceStateTrigger

Un StateTrigger sencillo que nos permite activar VisualStates en base al dispositivo donde se ejecuta la App:

<Grid>
     <VisualStateManager.VisualStateGroups>
          <VisualStateGroup>
               <VisualState
                    x:Name="Android">
                    <VisualState.StateTriggers>
                         <DeviceStateTrigger Device="Android" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Blue" />
                    </VisualState.Setters>
               </VisualState>
               <VisualState
                    x:Name="iOS">
                    <VisualState.StateTriggers>
                         <DeviceStateTrigger Device="iOS" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Red" />
                    </VisualState.Setters>
               </VisualState>
          </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
</Grid>

Si ejecutamos en Android:

DeviceStateTrigger en Android

Y si la App se ejecuta en iOS:

DeviceStateTrigger en iOS

Sencillo, ¿verdad?.

OrientationStateTrigger

Este StateTrigger cuenta con la propiedad Orientation que nos permite aplicar VisualStates en base a la orientación del dispositivo:

<Grid>
     <VisualStateManager.VisualStateGroups>
          <VisualStateGroup>
               <VisualState
                    x:Name="Landscape">
                    <VisualState.StateTriggers>
                         <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Blue" />
                    </VisualState.Setters>
               </VisualState>
               <VisualState
                    x:Name="Portrait">
                    <VisualState.StateTriggers>
                         <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Red" />
                    </VisualState.Setters>
                </VisualState>
           </VisualStateGroup>
      </VisualStateManager.VisualStateGroups> 
</Grid>

El resultado:

OrientationStateTrigger

Sin necesidad de suscribirse a eventos o lógica extra.

StateTriggers y Surface Duo/Neo (Dual Screen)

Xamarin.Forms le da soporte a Surface Duo y Surface Neo (dispositivos con dos pantallas) con el paquete Xamarin.Forms.DualScreen principalmente gracias a TwoPaneView.

Sin embargo, en la librería Xamarin.Forms.DualScreen también tenemos StateTriggers específicos a la hora de gestionar la UI al trabajar con dos pantallas.

El SpanModeStateTrigger cuenta con la propiedad SpanMode que nos permite ajustar la UI usando VisualStates en base a si estamos usando una única pantalla, etc.

<Grid>
     <VisualStateManager.VisualStateGroups>
          <VisualStateGroup>
               <VisualState x:Name="NotSpanned">
                    <VisualState.StateTriggers>
                         <dualScreen:SpanModeStateTrigger SpanMode="SinglePane"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Red" />
                    </VisualState.Setters>
               </VisualState>
               <VisualState x:Name="Spanned">
                    <VisualState.StateTriggers>
                         <dualScreen:SpanModeStateTrigger SpanMode="Wide" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Green" />
                    </VisualState.Setters>
               </VisualState>
          </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
</Grid>

Usando una única pantalla:

Utilizando una pantalla

Al usar dos:

Utilizando las dos pantallas

Han llegado StateTriggers a Xamarin.Forms y pronto llegarán más opciones relacionadas. En algunos casos, hay StateTriggers que nos permiten hacer algo que ya podíamos de forma sencilla (por ejemplo, ajustes en la UI al cambiar la orientación) mientras que en otros casos, abre muchas posibilidades. ¿Qué te parece esta nueva funcionalidad?. Recuerda, puedes dejar cualquier feedback en los comentarios de la entrada.

Más información

[Evento SVQXDG] Se puede hacer de todo con Xamarin

El evento

Volvemos a la carga con un nuevo evento en el grupo de desarrolladores de Xamarin de Sevilla!. En esta ocasión tenemos un evento con dos sesiones técnicas donde se muestra el uso de Xamarin para hacer “cualquier cosa”.

La agenda:

  • 19:00h – 19:45h: Mi tesoro. Una app para gobernarlos a todos, una app para encontrarlos. Una app para atraerlos a todos y atarlos en las tinieblas. ¿Qué puede hacer mi aplicación en tu Android cuando le das permisos para ello? ¿Y si no se los das? Vamos a ver como instalar, listar o desinstalar aplicaciones en modo atendido en primer plano, junto a SignalR y ASP.Net Core. Por Marco Antonio Blanco.
  • 19:50h – 20:35h: Oh mama!. En esta sesión tendremos cosas que no esperas y todo se controlará desde una App Xamarin.Forms y aunque no te quede del todo claro, no me la perdería. Por José Manuel Montero.

El lugar

El evento se celebrará en las oficinas de SDOS. Dirección detallada:

Calle Luis Fuentes Bejarano, 60, 1ª Planta, 41020 Sevilla

SDOS

La fecha

Será el próximo Miércoles, 26 de Febrero de 19:00h a 21:00h (GMT+1).

¿Te apuntas?

Más información

[Xamarin.Forms] Embedded fonts

Introducción

Usar fuentes personalizadas consigue ayudar a trasmitir la imagen y rasgos característicos de una App móvil. Por supuesto, es posible utilizar fuentes personalizadas en Xamarin.Forms. Sin embargo, con la versión 4.5 nos llega una nueva posibilidad a la otra de trabajar con fuentes.

Embedded fonts

Nos llega una nueva opción a la hora de utilizar fuentes personalizadas, aún mas sencilla.

Hasta ahora, añadíamos los recursos de las fuentes en cada proyecto nativo en las correspondientes carpetas (carpeta Assets en Android o Resources en iOS).

Ahora, para usar fuentes, solo se necesita añadir la fuente como recurso incrustado en la librería compartida, en lugar de agregarlas a múltiples plataformas, cada una con sus propias reglas de implementación.

Recurso incrustado

A continuación, en el archivo AssemblyInfo.cs agregue:

[assembly: ExportFont("Montserrat-Regular.ttf")]

Y posteriormente, podemos usar la fuente:

<Label 
     Text="Montserrat-Regular (EmbeddedFont)"
     Font="Montserrat-Bold" />

El cambio principal radica en poder añadir los recursos de las fuentes una única vez en el proyecto compartido simplificando el uso. ¿Qué te parece este cambio?. Recuerda, cualquier duda o pregunta es bienvenida en los comentarios de la entrada.

Más información

[Xamarin.Forms] Establecer el directorio de recursos en Apps UWP

Diferentes recursos por plataformas

Usando Xamarin.Forms desarrollamos (habitualmente) aplicaciones para diferentes plataformas compartiendo grandes cantidades de código. La clase Device contiene una serie de propiedades y métodos para ayudar a personalizar la UI y la funcionalidad para cada plataforma.

Por ejemplo:

<StackLayout>
     <StackLayout.Margin>
          <OnPlatform x:TypeArguments="Thickness">
               <On Platform="iOS" Value="0,12,0,0" />
               <On Platform="Android, UWP" Value="0,0,0,12" />
          </OnPlatform>
     </StackLayout.Margin>
</StackLayout>

En el ejemplo anterior estamos personalizando la interfaz de usuario usando diferentes márgenes en iOS y en Android.

Cuando lo unico diferente es la ruta…

Sin embargo, un caso bastante habitual donde acabamos usando OnPlatform es a la hora de trabajar con imágenes.

<Image>
     <Image.Source>
          <OnPlatform x:TypeArguments="ImageSource">
               <On Platform="Android, iOS" Value="icon.png"/>
               <On Platform="UWP" Value="Assets/icon.png"/>
          </OnPlatform>
     </Image.Source>
</Image>

Esto sucede porque mientras que en Android e iOS las carpetas para añadir recursos (Assets, Resources) permiten escribir directamente el nombre del archivo, en el caso de UWP, las imágenes se encuentran dentro de la carpeta Assets del proyecto UWP.

¿Y si podemos simplificar estos casos?.

Nuevo Platform Specific para cubrir estos casos

Desde la versión 4.5.0.142-pre1, a nivel de aplicación o página, podemos usar el siguiente Platform Specific para UWP:

Application.Current.On<Windows>().SetImageDirectory("Assets");

Donde pasamos en el método, el nombre del directorio que deseamos que Xamarin.Forms use para buscar recursos por nosotros.

Gracias al Platform Specific anterior, podemos pasar de:

<Image>
     <Image.Source>
          <OnPlatform x:TypeArguments="ImageSource">
               <On Platform="Android, iOS" Value="icon.png"/>
               <On Platform="UWP" Value="Assets/icon.png"/>
          </OnPlatform>
     </Image.Source>
</Image>

A lo siguiente:

<Image Source="icon.png"/>

Sencillo, ¿verdad?.

Más información

Un vistazo a Mobile Blazor Bindings

Introducción

Recientemente se anunciaban los Mobile Blazor Bindings. Hablamos de un proyecto experimental que consiste en añadir bindings para poder desarrollar aplicaciones móviles nativas para Android e iOS usando C# y .NET utilizando el modelo de desarrollo de Blazor y la síntaxis Razor para definir la UI de la aplicación. Los componentes de UI se basan en Xamarin.Forms. Hasta ahora podíamos crear la interfaz de usuario en aplicaciones Xamarin.Forms usando XAML o C#. Gracias estos nuevos bindings se abre una nueva posibilidad.

Pero…¿por que crear estos bindings con Blazor?.

Hay un grupo de desarrolladores Xamarin.Forms que vienen del desarrollo web y han trasmitido que se sentirían más cómodos usando conocimientos más relacionados con su área. El objetivo principal de estos bindings es facilitar el desarrollo de aplicaciones móviles a desarrolladores web con un “estilo Blazor” utilizando sintaxis Razor.

Mobile Blazor Bindings

Los Bindings de Blazor para desarrollo móvil constan de dos librerías principales:

  • Microsoft.MobileBlazorBindings.Core: Esta libreria contiene implementaciones de un adaptador que mapea entre elementos de UI nativos y componentes de Blazor.
  • Microsoft.MobileBlazorBindings: una librería que añade bindings específicos para elementos de Xamarin.Forms.

Arquitectura

Puedes ver la introducción realizada por Eilon Lipton a continuación:

Creando una primera App

Antes que nada, necesitarás:

  • El SDK de .NET Core 3.0 o 3.1.
  • Visual Studio (Windows o Mac) con las herramientas para desarrollar con Xamarin y ASP.NET instaladas.

Contando con lo anterior, estamos casi preparados para arrancar!. Vamos a crear un proyecto de inicio usando la linea de comandos. Abre la linea de comandos y escribe:

dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.1.173-beta

Esto descargará las plantillas necesarias. A continuación:

dotnet new mobileblazorbindings -o MyMobileBlazorBindingsApp

Esto creará una solución con varios proyectos.

  • Un proyecto con el código compartido (UI y lógica).
  • Un proyecto para Android.
  • Un proyecto para iOS.

El código para un “Hola Mundo” sería algo como lo siguiente:

<StackLayout>
     <Label FontSize="30"
          Text="@("You pressed " + count + " times")" />
     <Button Text="+1"
          OnClick="@HandleClick" />
</StackLayout>

@code {
     int count;

     void HandleClick()
     {
          count++;
     }
}

Con el proyecto creado, basta con compilar y lanzar en algun emulador o dispositivo:

Primera App

Más ejemplos

En el repositorio oficial hay varios ejemplos con una mezcla entre muestra de diferentes componentes de UI y acceso a la plataforma nativa (Text to Speech, etc), uso de SQLite, etc.

Estado actual

Las aplicaciones creadas con Mobile Blazor Bindings usan componentes de UI. Estos componentes usan sintaxis Razor y se basan en controles de Xamarin.Forms.

El estado actual implementado es el siguiente:

  1. Páginas
    • ContentPage
    • MasterDetailPage
    • Page
    • TabbedPage
    • TemplatedPage
  2. Layouts
    • ContentView
    • Frame
    • Grid
    • ScrollView
    • StackLayout
  3. Views
    • Button
    • ActivityIndicator
    • Image
    • Entry
    • Label
    • Stepper
    • Switch
  4. Otros componentes
    • Application
    • BaseMenuItem
    • FormattedString
    • GestureElement
    • MenuItem
    • Shell (including ShellContent, ShellGroupItem, ShellItem, FlyoutItem, TabBar, ShellSection, Tab)
    • Span

Roadmap

Al ser un proyecto experimental, hay varias areas importantes donde continuar evolucionando:

  • Añadir soporte a Hot Reload.
  • Añadir más wrappers de elementos Xamarin.Forms.
  • Mejorar el soporte de Shell.
  • Soportar navegación por URL.
  • Etc.

Feedback

Al ser un proyecto experimental, todo el feedback es bienvenido!. Puedes ver un listado de issues conocidas en este enlace, aunque si tienes feedback o alguna issue concreta no registrada puedes hacerlo en el repositorio en GitHub.

Más información

Quedada informal de CartujaDotNet & SVQXDG

Quedada múltiple

Desde CartujaDotNet, grupo de usuarios .NET de Sevilla y SVQXDG, grupo de desarrolladores Xamarin de Sevilla, vamos a realizar una quedada informal para charlar abiertamente sobre tecnologías Microsoft, Xamarin, herramientas utilizadas, intercambiar impresiones, etc. Además, hablaremos de futuros eventos de la comunidad y posibles ideas para llevar a cabo. Al ser quedada de dos grupos diferentes creemos que es una gran oportunidad para conocer, intercambiar e interactuar entre ambos permitiendo a miembros de cada uno conocer a los del otro y tratar otros aspectos.

No hace falta confirmar asistencia, y por supuesto será gratuito.

¿Te apuntas?

A continuación tienes disponible la fecha, hora y lugar:

  • Día: 29 de Enero (Miércoles)
  • Horario:  19:00h
  • Lugar: En la Terraza del McDonald’s de Santa Justa

Más información