[Tips and Tricks] Utilizando Code Snippets en Visual Studio para macOS

Introducción

Como desarrolladores, a la hora de programar en determinadas ocasiones escribimos código repetitivo. Si nos centramos en el desarrollo de aplicaciones Xamarin.Forms desde Visual Studio para macOS, por ejemplo; a la hora de definir ViewModels tenemos código repetitivo como la definición de propiedades o comandos.

public string Name
{
     get => _name;
     set => SetProperty(ref _name, value);
}

public string SurName
{
     get => _surname;
     set => SetProperty(ref _surname, value);
}

¿Y si tenemos una forma de mejorar nuestra productividad a la hora de escribir código repetitivo / similar?

Creando Code Snippets

En Visual Studio para macOS cuenta con una solución para este problema, code snippets.

¿Qué es un code snippet?

Un snippet de código es una pieza de texto guardada como plantilla, reutilizable y que puede contar con argumentos reemplazables por valores al ser utilizados.

Veamos un ejemplo:

private $type$ $field$;

public $type$ $property$
{
     get => $field$;
     set => SetProperty(ref $field$, value);
}

Cada parte del código rodeada por $, representa un argumento que se puede reemplazar por un valor. En el ejemplo anterior usamos tres argumentos para controlar el tipo de la propiedad, el nombre de la variable y el nombre de la propiedad.

Bien, pero…¿y cómo creamos code snnipets?.

Accedemos a la ventana de Preferencias de Visual Studio para macOS. Y desde aquí al editor de Code Snippets.

Code Snippets

Debemos pulsar sobre el botón Add para añadir un nuevo snippet.

Nuevo Snippet

Tenemos que rellenar:

  • Shortcut: Una de las partes más importantes. Es el atajo que utilizaremos con IntelliSense para utilizar el snippet.
  • Group: Representa la carpeta donde se guardará el snippet dentro del panel de preferencias de Code Snippet.
  • Description: La descripción del snippet. Esta descripción aparecerá en el tooltip al utilizarlo.
  • Mime: El mime-type del lenguaje de código que el code snippet soporta.
  • Template Text: El contenido del snippet de código.
Nuestro snippet!

Utilizando Code Snippets

Llega el momento que esperábamos!. Escribimos el valor del Shortcut de nuestro snippet.

Comenzamos a usar el Snippet

Pulsamos el tabulador y…

Voila!. Basta con definir el tipo y nombre de variable y propiedad para tener una propiedad pública completa en la ViewModel.

Basta ya con definir tipo y nombres

Los Code Snippets son fáciles de crear y usar pero ayudan a acelerar la creación de código aumentando nuestra productivad.

¿Usabas los snippets?. Recuerda, puedes dejar cualquier duda en los comentarios del artículo.

Más información

Recopilación de addins y herramientas para Visual Studio para macOS

Introducción

Visual Studio para macOS va mejorando versión tras versión, pero hay funcionalidad cubierta o mejorada por la comunidad y terceros. Hay ejemplos destacados como LiveXAML o MFractor. Sin embargo, ¿conoces más addins?, ¿cuáles?.

Recopilatorio de addins y herramientas para Visual Studio para macOS

De igual forma que con Xamarin.Forms, tras ir anotando addins y herramientas decidí moverlas a repositorio público, he creado un repositorio público donde agrupar todo el conjunto de addins, herramientas y cualquier tipo de documentación o elemento relacionado con Visual Studio para macOS.

Tienes el repositorio disponible en GitHub:

Ver GitHub¿Qué te parece?, ¿utilizas addins que no estan en la lista?. Se aceptan PRs, hagamos entre todos la lista lo más completa posible!

Más información

[Material] .Net Conf Sevilla 2018

El evento

El pasado 24 de Octubre, teníamos en CartujaDotNet un evento bastante completo donde revisamos las últimas novedades disponibles en Xamarin, C#, .NET Core, ML.Net, Azure, Azure DevOps, etc.

El material

A continuación puedes encontrar la presentación utilizada en el evento:

Una tarde de repaso de una gran variedad de tecnologías, con preguntas interesantes y algo de netwotking asi que, ¿cuándo repetimos?.

Más información

[Evento] Monkey Conf 2018

El evento

Llega el evento técnico Xamarin que estabas esperando, Monkey Conf!.

Monkey Conf 2018

Monkey Conf será un evento gratuito, en el que trataremos temas relacionados con desarrollo móvil, Xamarin, Xamarin.Forms, App Center, testing y más…

La fecha

Será el próximo Sábado, 01 de Diciembre de 09:30h a 18:30h (GMT+1). Tendremos dos tracks en paralelo con diferentes sesiones técnicas de 50 minutos de duración cada una. Además contaremos con regalos y sorpresas!.

¿Te apuntas?

NOTA: Las entradas del evento son gratuitas pero limitadas!

El lugar

El evento se celebrará en Liferay. Dirección detallada:

Paseo de la Castellana, 280, 28046 Madrid, Madrid

Liferay

Call 4 Papers

¿Has desarrollado una aplicación con Xamarin?, ¿quieres hablar acerca de como usas App Center?, ¿revisar las próximas novedades de Xamarin.Forms?, ¿un taller?. El C4P del evento está abierto y estoy seguro que puedes hablar sobre algun tema que interese y ayude al resto!

Más información

[Xamarin.Forms] Utilizando TitleView

Introducción

Necesitar personalizar la barra superior de la aplicación añadiendo un logo, o un texto personalizado (utilizando una fuente específica, múltiples líneas, etc.) es bastante habitual. Hasta ahora, en Xamarin.Formsera algo posible pero…utilizando un Custom Renderer. Es un punto positivo de Xamarin.Forms, poder crear un Custom Renderer para acceder a características y elementos específicos de cada plataforma. Sin embargo, añade la necesidad de añadir más código (por plataforma) para conseguir un resultado.

Sin embargo, con la llegada de Xamarin.Forms 3.2 nos llega TitleView, una nueva opción para personalizar la barra superior sin necesidad de llegar a necesitar código específico por plataforma.

TitleView

TitleViewes parte de NavigationPage, donde se muestra el contenido del título de una ContentPage.

Cabecera personalizada

Comenzamos por un ejemplo sencillo. Vamos a personalizar la cabecera con un icono y título:

<NavigationPage.TitleView>
     <StackLayout
          Orientation="Horizontal"
          VerticalOptions="Center"
          Spacing="10">
          <Image
               Source="Icon.png"
               Aspect="AspectFit" />
          <Label
               Text="TitleView"
               FontSize="18"
               TextColor="White"
               VerticalTextAlignment="Center" />
     </StackLayout>
</NavigationPage.TitleView>

Podemos añadir el contenido deseado tal y como haríamos en el contenido de una página.

El resultado:

Cabecera personalizada!

Comandos

Podemos utilizar los eventos, comandos e incluso GestureRecognizersen los elementos de la cabecera:

<NavigationPage.TitleView>
     <StackLayout
          Orientation="Horizontal"
          VerticalOptions="Center"
          Spacing="10">
          <Image
               Source="Icon.png"
               Aspect="AspectFit">
               <Image.GestureRecognizers>
                    <TapGestureRecognizer
                         Tapped="OnHeaderIconTapped"/>
               </Image.GestureRecognizers>
          </Image>
          <Label
               Text="TitleView"
               FontSize="18"
               TextColor="White"
               VerticalTextAlignment="Center" />
     </StackLayout>
</NavigationPage.TitleView>

En este sencillo, ejemplo, mostramos un dialogo al pulsar sobre el logo de la cabecera:

Gestos

Barra de búsqueda

Pasemos a un ejemplo más complejo y típico. Vamos a añadir una barra de búsqueda:

<NavigationPage.TitleView>
     <Frame
          CornerRadius="{OnPlatform 12, UWP=1}"
          BackgroundColor="{OnPlatform Transparent, Android={StaticResource WhiteColor}}"
          HasShadow="False"
          IsClippedToBounds="True"
          Padding="0">
          <Frame.Content>
               <SearchBar
                    x:Name="SearchBar"
                    Placeholder="Search movie..."
                    HorizontalOptions="FillAndExpand"
                    SearchCommand="{Binding SearchCommand}"
                    SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}">
                    <SearchBar.Behaviors>
                         <behaviors:SearchTextChangedBehavior />
                    </SearchBar.Behaviors>
               </SearchBar>
          </Frame.Content>
     </Frame>
</NavigationPage.TitleView>

Mostramos un listado de peliculas de modo que, cada vez que cambia el texto de la barra de búsqueda, se actualiza el contenido de la página con el listado de películas filtrado.

El resultado:

Búsqueda

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Limitaciones o problemas conocidos actuales

Entre el listado de limitaciones actuales encontramos:

  • SearchBar debe ser contenido en un panel con HorizontalOptions=LayoutOptions.Fill y VerticalOptions=LayoutOptions.Fill, o bien, utilizar WidthRequest y HeightRequest específicos para que todo se vea correctamente en iOS.
  • TitleView no es compatible con Android FormsApplicationActivity.
  • El contenido no puede ser más grande que el tamaño predeterminado de la barra de navegación en iOS/UWP. En caso de intentarlo, habrá recorte de forma automática.
  • Ya contábamos con las propiedades BackTitle, Title, TitleIcon y ahora con TitleView ocupando el mismo espacio en la barra de navegación, puede que haya conflictos y espacio limitado para admitir todas estas propiedades al mismo tiempo. Esto variará según la plataforma y el tamaño de la pantalla.

Más información

[Material] Analizando interfaces de usuario avanzadas con Xamarin.Forms

El evento

El pasado 26 de Septiembre, teníamos en SVQXDG un divertido evento donde abriendo debate e intercambiando ideas algunos de los ejemplos revisamos opciones disponibles para conseguir interfaces atractivas con Xamarin.Forms. Vimos opciones como efectos, Custom Renderers, SkiaSharp, VisualStateManager, etc.

El material

A continuación puedes encontrar la presentación utilizada en el evento:

En cuanto a ejemplos, revisamos muchos ejemplos revisando UI y opciones en cada uno de ellos.

My Trip Countdown

Sencillo contador atrás hacia el momento de una fecha (viaje).

My Trip Countdown

Las claves:

  • Uso de SkiaSharp para crear progreso circularcon degradado.
  • Gestión de imágenes con efectos (circular).
  • Botón con degradado.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Pulse Music

Interfaz de un reproductor de música.

Pulse Music

Las claves:

  • Uso de SkiaSharp para crear progreso circular.
  • Animaciones infinitas.
  • Gestión de imágenes con efectos (circular).

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Walkthrough

Creación de un Walkthrough con diferentes pasos animados.

Walkthrough

Las claves:

  • Uso de Carousel.
  • Animaciones con Lottie.
  • API de animaciones de Xamarin.Forms.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Netflix

Ejemplo donde se replica la interfaz básica de Netflix.

Vista principal en Android

La claves de este ejemplo:

  • Navegación personalizada (logo, transparencias, etc.).
  • Listados horizontales.
  • Parallax.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Movies

El último ejemplo que revisamos. Aplicación utilizando la API de TheMovieDB.

Movies

La claves de este ejemplo:

  • Crear aplicaciones para Linux y WPF utilizando Xamarin.Forms.
  • Personalizar estilos para Linux y WPF.
  • Aplicar temas GTK.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

Primer vistazo a Xamarin.Forms gui.cs Backend

Introducción

Las aplicaciones de consola son geniales!. Probablemente, has realizado alguna aplicación de consola con alguna pequeña (o gran) herramienta.Tener una aplicación de consola tiene ventajas: liviana, multiplataforma, rápida, etc.

¿Y si pudiesemos realizar aplicaciones de consola con Xamarin.Forms?.

gui.cs

Estamos ante un Toolkit de UI para .NET, .NET Core y Mono que permite crear apliaciones de consola (si, con interfaz!) para Linux, macOS y Windows. Creado por Miguel de Icaza.

gui.cs

El Toolkit cuenta con una variedad de controles:

Añade soporte a colores, reescalado de pantalla, eventos, async, etc. A nivel de gestión de vistas es bastante similar a otros frameworks de UI como GTK# .

Conceptos básicos

gui.cs cuenta on Application.Run, que facilita un bucle principal donde:

  • Procesar eventos de teclado.
  • Gestiona el foco.
  • Redibuja áreas de la pantalla.
  • Timers.
  • Etc.

Cada elemento visual, hereda de la clase View. Toda View cuenta con propiedades X, Y, Height y Width para la gestión de tamaño y posición. Todo se pone más interesante al poder realizar composición de Views.

¿Y por qué Xamarin.Forms?

Buena pregunta. El framework ya permite grandes posibilidades, es sencillo de usar, así que, ¿por qué?.

EL origen

Why not?

Xamarin.Forms cada vez llega a más plataformas tras los backends de WPF y GTK, además de seguir aumentando en posibilidades. Ya había utilizada gui.cs para herramientas y pruebas, vi un tweet, nació un reto personal y voila. ¿Por qué no añadir la posibilidad de crear aplicaciones de consola con Xamarin.Forms?.

Backend gui.cs

Disponible en GitHub y en NuGet, nace el backend de Xamarin.Forms de gui.cs.

NOTA: Todos los ejemplos anteriores estan realizados con Xamarin.Forms.

Actualmente con soporte a:

  • ContentPage
  • Layouts
  • Label
  • Button
  • Editor
  • Entry
  • ListView
  • ProgressBar
  • Switch

Paulatinamente se añadirá soporte a otras características y controles.

¿Cómo lo uso?

Partimos de una aplicación de consola. Tras crear la aplicación, añadimos el paquete NuGet Terminal.Gui.Forms:

Terminal.Gui.Forms

Se encarga de añadir las referencias necesarias tanto a Terminal.Gui como a Xamarin.Forms.

Creamos un Application de Xamarin.Forms:

public class App : Xamarin.Forms.Application
{
     public App()
     {
          MainPage = new MainView();
     }
}

Se encargará de iniciar y establecer la página inicial. La página inicial, creada con XAML:

<StackLayout>
     <Grid 
          Padding="10, 10, 10, 10">
     <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="60" />
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="100" />
     </Grid.ColumnDefinitions>
     <Label 
          Text="Search by Zip Code" 
          Grid.Row="0" 
          Grid.Column="0" 
          Grid.ColumnSpan="3"
          TextColor="White"
          Margin="0, 6"/>
     <Label 
          Text="Zip Code:" 
          Grid.Row="1"
          Grid.Column="0"
          Style="{StaticResource LabelStyle}"
          TextColor="#C0C0C0" />
     <Entry
          Grid.Row="1"
          Grid.Column="1"
          Text="{Binding ZipCode, Mode=TwoWay}"
          Margin="5, 0" />
     <Button 
          Text="Get Weather" 
          Grid.Row="1" 
          Grid.Column="2"
          Command="{Binding WeatherCommand}"/>
     </Grid>
     <StackLayout
          Padding="10, 10, 10, 10">
          <Label 
               Text="Location" 
               Style="{StaticResource LabelStyle}" />
          <Label 
               Text="{Binding Weather.Title}"
               Style="{StaticResource FieldStyle}" />
          <Label 
               Text="Temperature"
               Style="{StaticResource LabelStyle}" />
          <Label 
               Text="{Binding Weather.Temperature}" 
               Style="{StaticResource FieldStyle}" />
          <Label
               Text="Wind Speed"
               Style="{StaticResource LabelStyle}" />
          <Label 
               Text="{Binding Weather.Wind}"
               Style="{StaticResource FieldStyle}" />
          <Label 
               Text="Humidity" 
               Style="{StaticResource LabelStyle}" />
          <Label
               Text="{Binding Weather.Humidity}"
               Style="{StaticResource FieldStyle}" />
          <Label 
               Text="Visibility" 
               Style="{StaticResource LabelStyle}" />
          <Label 
               Text="{Binding Weather.Visibility}"
               Style="{StaticResource FieldStyle}" />
          <Label 
               Text="Time of Sunrise" 
               Style="{StaticResource LabelStyle}" />
          <Label
               Text="{Binding Weather.Sunrise}"
               Style="{StaticResource FieldStyle}" />
          <Label
               Text="Time of Sunset" 
               Style="{StaticResource LabelStyle}" />
          <Label 
               Text="{Binding Weather.Sunset}"
               Style="{StaticResource FieldStyle}" />
     </StackLayout>
</StackLayout>

Hacemos uso de:

  • Diferentes Layouts
  • Diferentes controles
  • Enlace a datos
  • Estilos
  • Etc

La página cuenta con una ViewModel enlazada que se encarga de usar un servicio que accederá a información de OpenWeatherMap para informar de datos climatológicos dado un código postal.

Sólo nos falta, en la clase Program, inicializar Terminal.Gui, XamarinForms; cargar nuestra aplicación; y ejecutar la misma:

public class Program
{
     public static void Main()
     {
          Terminal.Gui.Application.Init();
          Forms.Init();
          var app = new App();
          var window = new FormsWindow("WeatherApp");
          window.LoadApplication(app);
          Terminal.Gui.Application.Run();
     }
}

Sencillo, ¿verdad?. Veamos el resultado:

WeatherApp

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Recuerda, es una Preview…

Estamos ante la primera Preview con un soporte limitado de guis.cs y de Xamarin.Forms. Sin embargo, hay algunas características aun no disponibles:

  • Frame
  • Menus
  • ScrollView
  • Etc

Más información

Channel 9: Retro Computing with .NET

[Xamarin.Forms] Nueva extensión de marcado para OnPlatform y OnIdiom

Introducción

Xamarin.Formsañade una capa de abstracción sobre la capa de la interfaz de usuario permitiendo definir la misma una única vez siendo válida para todas las plataformas.

Xamarin.Forms

A pesar de definir la interfaz de usuario una única vez para todas las plataformas, tenemos la posibilidad de realizar personalizaciones y adaptaciones para ofrecer la mejor experiencia posible en cada una de las plataformas soportadas.

La clase Device

La clase Devicesin duda alguna es una de las claves a la hora de personalizar la interfaz de usuario por plataforma. Esta clase contiene diversas propiedades y métodos para personalizar la UI y la funcionalidad en base a la plataforma.

Hasta ahora…

Dentro de la clase Device, la propiedad OSpermitía identificar la plataforma en la que se ejecuta la aplicación. La extensión demarcado OnPlatformpermite personalizar la interfaz por plataforma. La extensión OnPlatform esta soportada por la clase OnPlatformExtension (se permite la abreviatura OnPlatform desde XAML) que define las siguientes propiedades:

  • Default: Representa el valor por defecto que aplica a todas las plataformas.
  • Android: Valor aplicado en Android.
  • GTK: Valor aplicado en plataformas GTK.
  • iOS: Valor aplicado en iOS.
  • macOS: Valor aplicado en macOS.
  • Tizen: Valor aplicado en plataformas Tizen.
  • UWP: Valor aplicado en Universal Windows Platform
  • WPF: Valor aplicado en la plataforma Windows Presentation Foundation.

Hasta ahora, el uso de OnPlatform era:

<BoxView>
     <BoxView.Color>
          <OnPlatform x:TypeArguments="Color">
               <On Platform="Android" Value="Green" />
               <On Platform="iOS" Value="Blue" />
               <On Platform="UWP" Value="Orange" />
          </OnPlatform>
     </BoxView.Color>
</BoxView>

La extensión de marcado OnIdiompermite realizar personalizaciones de la apariencia basadas en el tipo de dispositivo donde corre la App. Soportado por la clase OnIdiomExtension define las siguientes propiedades:

  • Default: Valor por defecto, aplicado a todos los dispositivos.
  • Phone: Valor aplicado a teléfonos.
  • Tablet: Valor aplicado a tabletas.
  • Desktop: Aplicado a plataformas de escritorio.
  • TV: Valor aplicado a plataformas TV.
  • Watch: En este caso, el valor se aplica a plataformas Watch.

Donde, el uso de OnIdiom hasta ahora era:

<BoxView>
     <BoxView.Color>
          <OnIdiom x:TypeArguments="Color">
               <OnIdiom.Phone>Green</OnIdiom.Phone>
               <OnIdiom.Tablet>Blue</OnIdiom.Tablet>
               <OnIdiom.Desktop>Orange</OnIdiom.Desktop>
          </OnIdiom>
     </BoxView.Color>
</BoxView>

Hasta ahora…

Llega nueva extensión de marcado con Xamarin.Forms 3.2

Con Xamarin.Forms 3.2 llega una nueva versión de extensión de marcadopara OnPlatform y OnIdiom.

Veamos su uso con OnPlatform:

<BoxView 
     Color="{OnPlatform Red, Android=Green, iOS=Blue, UWP=Orange}"/>

Y con OnIdiom:

<BoxView 
     Color="{OnIdiom Red, Phone=Green, Tablet=Blue, Desktop=Orange}" />

Como podemos ver, se simplifica la verbosidad para conseguir el mismo resultado.

Puedes encontrar ejemplo en GitHub:

Ver GitHubY a ti, ¿qué te parece la novedad?.

Más información

[Xamarin.Forms] Efecto para personalizar la StatusBar

Introducción

La StatusBar es un área importante de cara al usuario final. Disponible para mostrar información importante relacionada con el estado del sistema (hora, batería, red, etc.) además de notificaciones de otras aplicaciones.

StatusBar

Al desarrollar aplicaciones móviles, entre los objetivos, debemos conseguir un estilo único y uniforme. Para conseguirlo, en ocasiones será necesario modificar el aspecto de la StatusBar o incluso cambiarlo de forma uniforme para adaptarla a diferentes páginas de nuestra aplicación.

¿Cómo personalizamos la StatusBar?. En este artículo vamos a crear un efecto de Xamarin.Forms para personalizar la StatusBar en Android, iOS y en UWP.

Efectos

Un efecto permite el acceso al control nativo de cada plataforma con el objetivo de personalizarlo, principalmente aplicando pequeños cambios estéticos o de comportamiento. Permiten simplificar la personalización del control y sobretodo se convierten en “piezas” reutilizables de código incluso aceptando parametrización.

Crear un efecto

El proceso de creación de un efecto, se puede resumir en una serie de sencillos pasos:

  1. Crear en la libería .NET Standard una clase que herede de RoutingEffect. Código independiente de la plataforma encargado de hacer el wrapping del efecto. Podemos definir distintas propiedades que permitan modificar la acción realizada por el efecto. Por ejemplo, en un efecto encargado de aplicar Blur a una imagen, se puede definir una propiedad encarga de aplicar mayor o menor distorsión.
  2. Crear clases en cada plataforma soportada que hereden de PlatformEffect.
  3. Sobrecargar el método OnAttached y añadir la lógica de personalización del control.
  4. Sobrecargar el método OnDetached y añadir lógica de liberación de recursos.
  5. Añadir el atributo ResolutionGroupName. Este atributo permite establecer el nombre del creador o compañia tras el efecto. Recuerda que uno de los objetivos fundamentales de los efectos es lograr permitir compartir y reutilizar con suma facilidad. Con este atributo se previenen colisiones con otros efectos que compartan nombre.
  6. Añadir el atributo ExportEffect. Este atributo registra el efecto con un identificador único usado por Xamarin.Forms, junto al nombre del grupo, permite localizar y aplicar el efecto.

Definición del efecto

Comenzamos con la definición del efecto. Creamos una clase que hereda de RoutingEffect:

public class StatusBarEffect : RoutingEffect
{
     public Color BackgroundColor { get; set; }

     public StatusBarEffect() : base("Xamarin.StatusBarEffect")
     {

     }
}

Fíjate que definimos una propiedad de tipo Color llamada BackgroundColor que nos permitirá establecer el color de la StatusBar.

Android

En Android, accedemos a la Window de la actividad, para modificar el color de la StatusBar utilizando el método SetStatusBarColor:

var statusBarEffect = (StatusBarXamarinForms.Effects.StatusBarEffect)Element.Effects.FirstOrDefault(e => e is StatusBarXamarinForms.Effects.StatusBarEffect);

if (statusBarEffect != null)
{
     var backgroundColor = statusBarEffect.BackgroundColor.ToAndroid();
     Window currentWindow = GetCurrentWindow();
     currentWindow.SetStatusBarColor(backgroundColor);
}

Convertimos el color de Xamarin.Forms a Android utilizando la extensión ToAndroid. Mientras que, para tener acceso de forma sencilla a la actividad actual, usamos el plugin CurrentActivityPlugin:

var window = CrossCurrentActivity.Current.Activity.Window;

iOS

En iOS, accedemos a la StatusBar, y le establecemos el color de fondo utilizando la propiedad BackgroundColor:

if (statusBarEffect != null)
{
     UIView statusBar = UIApplication.SharedApplication.ValueForKey(new NSString("statusBar")) as UIView;
     if (statusBar.RespondsToSelector(new ObjCRuntime.Selector("setBackgroundColor:")))
     {
          statusBar.BackgroundColor = statusBarEffect.BackgroundColor.ToUIColor();
     }
}

En este caso, el color lo convertimos a un UIColor con la extensión ToUIColor.

UWP

En el caso de UWP, contemplamos dos posibilidades:

NOTA: Para tener acceso a estas APIs es necesario añadir como referencia a las extensiones UWP correspondientes.

Comenzamos por el uso de la TitleBar:

// Desktop Customization
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView"))
{
     var titleBar = ApplicationView.GetForCurrentView().TitleBar;
     if (titleBar != null)
     {
          titleBar.BackgroundColor = statusBackgroundColor;
          titleBar.ButtonBackgroundColor = statusBackgroundColor;
     }
}

Accedemos a la misma y establecemos el color de fondo.

En el caso de StatusBar es bastante similar:

// Mobile Customization
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
{
     var statusBar = StatusBar.GetForCurrentView();
     if (statusBar != null)
     {
          statusBar.BackgroundOpacity = 1;
          statusBar.BackgroundColor = statusBackgroundColor;
     }
}

Sencillo, ¿verdad?.

Utilizando el efecto

Llega el momento de utilizar nuestro efecto!. Comenzamos añadiendo el namespace correspondiente en XAML:

xmlns:local="clr-namespace:StatusBarXamarinForms.Effects"

Y utilizamos el efecto:

<ContentPage.Effects>
<local:StatusBarEffect 
     BackgroundColor="Red"/>
</ContentPage.Effects>

El resultado:

Podemos añadir el efecto desde código C# y nos da la posibilidad de moficar la StatusBar programáticamente de forma sencilla.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

[SVQXDG] Analizando interfaces de usuario avanzadas con Xamarin.Forms

El evento

En los últimos tiempos, la mejora de Xamarin.Forms tanto en posibilidades a nivel de UI (VisualStateManager, FlexLayout, etc.) como a nivel de renderers y rendimiento (a destacar en Android) ha sido importante.

Realmente, en el estado actual de Xamarin.Forms se pueden conseguir aplicaciones nativas de gran escala, con interfaces cuidadas y con alta integración con la plataforma. Hay que tener en cuenta el conjunto de Custom Renderers (código específico en cada plataforma) necesario para lograrlo.

NOTA: La elección entre Xamarin Classic o Xamarin.Forms es importante. Es necesario evaluar la aplicación a desarrollar, el conjunto de características específicas de cada plataforma (que pueden requerir un Custom Renderer), etc. 

Es cada vez mayor el recopilatorio de ejemplos Open Source con Xamarin.Forms buscando interfaces complejas:

En este evento, vamos a analizar entre todos, abriendo debate e intercambiando ideas algunos de los ejemplos revisando opciones disponibles para conseguir ciertos resultados. Hablaremos de opciones como efectos, Custom Renderers, SkiaSharp, VisualStateManager, etc.

El lugar

El evento se celebrará en la ETS de Ingeniería Informática.

ETS de Ingeniería Informática

Dirección detallada:

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

La fecha

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

¿Te apuntas?

Más información