.NET MAUI Preview 3

Con la Preview 3 de NET MAUI llegan más novedades como:

  • Añadidos más cambios relacionados con HostBuilder, clase Startup.
  • Nueva API para gestionar el ciclo de vida de la aplicación.
  • Añadidos mas controles (DatePicker, TimePicker, SearchBar, Stepper, etc).
  • Añadidos mas cambios en Layouts.
  • Añadidas nuevas APIs de accesibilidad.
  • Primeros cambios añadiendo soporte para Windows usando WinUI 3.

En este artículo, vamos a hacer un repaso a todo lo que incluye la Preview 3, además de repasar que nos esperar en próximas Previews.

.NET MAUI Preview 3

Startup

Las aplicaciones .NET MAUI van a utilizar una clase Startup que permitirá:

  • Incluye un método Configure para canalizar los procesos de registro de servicios, registro de handlers o personalización de la aplicación.
  • Poder crear un HostBuilder personalizado.

Por ejemplo:

public void Configure(IAppHostBuilder appBuilder)
{
    appBuilder = appBuilder
        .UseCompatibilityRenderers()
        .UseMauiApp<MyApp>();
}

Por defecto, si no quiere personalizar nada especial, o bien, quieres utilizar tu propio contenedor de dependencias, etc., podrás hacerlo.

Ciclo de vida

El ciclo de vida de una aplicación es sumamente importante. Hay muchas acciones que se deben realizar cuando la aplicación pasa a segundo plano, o bien cuando regresa de suspensión. Por lo tanto, tener un control detallado de cada paso es importante.

En .NET MAUI hay una nueva API para el ciclo de vida con el firme objetivo de cubrir todas las peticiones recibidas en Xamarin.Forms y mejorar las áreas donde las posibilidades necesitaban ser expandidas.

Por supuesto, al igual que en Xamarin.Forms podrás sobrecargar diferentes métodos para saber cuándo la aplicación pasa a segundo plano etc. Igualmente, se añaden mucho más control en el ciclo de vida de otros elementos como ventanas o Views.

Por otro lado, también se va a permitir conectar directamente con eventos nativos de cada plataforma. Veamos un ejemplo:

appBuilder
    .ConfigureLifecycleEvents(events =>
    {
        events.AddEvent<Action<string>>("CustomEventName", value => LogEvent("CustomEventName"));

#if __ANDROID__
        events.AddAndroid(android => android
            .OnActivityResult((a, b, c, d) => LogEvent(nameof(AndroidLifecycle.OnActivityResult), b.ToString()))
            .OnBackPressed((a) => LogEvent(nameof(AndroidLifecycle.OnBackPressed)))
            .OnConfigurationChanged((a, b) => LogEvent(nameof(AndroidLifecycle.OnConfigurationChanged)))
            .OnCreate((a, b) => LogEvent(nameof(AndroidLifecycle.OnCreate)))
            .OnDestroy((a) => LogEvent(nameof(AndroidLifecycle.OnDestroy)))
            .OnNewIntent((a, b) => LogEvent(nameof(AndroidLifecycle.OnNewIntent)))
            .OnPause((a) => LogEvent(nameof(AndroidLifecycle.OnPause)))
            .OnPostCreate((a, b) => LogEvent(nameof(AndroidLifecycle.OnPostCreate)))
            .OnPostResume((a) => LogEvent(nameof(AndroidLifecycle.OnPostResume)))
            .OnPressingBack((a) => LogEvent(nameof(AndroidLifecycle.OnPressingBack)) && false)
            .OnRequestPermissionsResult((a, b, c, d) => LogEvent(nameof(AndroidLifecycle.OnRequestPermissionsResult)))
            .OnRestart((a) => LogEvent(nameof(AndroidLifecycle.OnRestart)))
            .OnRestoreInstanceState((a, b) => LogEvent(nameof(AndroidLifecycle.OnRestoreInstanceState)))
            .OnResume((a) => LogEvent(nameof(AndroidLifecycle.OnResume)))
            .OnSaveInstanceState((a, b) => LogEvent(nameof(AndroidLifecycle.OnSaveInstanceState)))
            .OnStart((a) => LogEvent(nameof(AndroidLifecycle.OnStart)))
            .OnStop((a) => LogEvent(nameof(AndroidLifecycle.OnStop))));

        // Add some cool features/things
        var shouldPreventBack = 1;
        events.AddAndroid(android => android
            .OnResume(a =>
            {
                LogEvent(nameof(AndroidLifecycle.OnResume), "shortcut");
            })
            .OnPressingBack(a =>
            {
                LogEvent(nameof(AndroidLifecycle.OnPressingBack), "shortcut");

                return shouldPreventBack-- > 0;
            })
            .OnBackPressed(a => LogEvent(nameof(AndroidLifecycle.OnBackPressed), "shortcut"))
            .OnRestoreInstanceState((a, b) =>
            {
                LogEvent(nameof(AndroidLifecycle.OnRestoreInstanceState), "shortcut");

                Debug.WriteLine($"{b.GetString("test2", "fail")} == {b.GetBoolean("test", false)}");
            })
            .OnSaveInstanceState((a, b) =>
            {
                LogEvent(nameof(AndroidLifecycle.OnSaveInstanceState), "shortcut");

                b.PutBoolean("test", true);
                b.PutString("test2", "yay");
            }));
    }

Como puedes ver, recibimos información de cada evento nativo de una aplicación nativa Android. Si plugins se enlazan de esta forma con estos eventos, se notificará tanto al plugin como a tu propia subscripción. Esto hará que el uso de plugins dónde se requiere un control de ciclo de vida sea más sencillo sin necesidad de añadir código de inicialización, etc.

¿Qué te parece?

Novedades en accesibilidad

Añadir más control y mejorar la API de accesibilidad para evitar confusiones además de alinear el comportamiento en todos los casos y plataformas es una de las prioridades en unos de los apartados con tanta importancia como es la accesibilidad.

<Entry
    Text="Entry text TH"
    FontSize="14"
    SemanticProperties.Description="Description text"
    SemanticProperties.Hint="Hint text"/>

Se añade el concepto de SemanticProperties. Hablamos de una serie de propiedades que añaden información extra a Views para permitir interpretar correctamente que ocurre cuando se utiliza el lector de pantalla, o navegación por teclado.

Habrá más novedades en próximas Previews. Puedes ver mas información en la Spec.

Soporte a Windows

Con la llegada de la versión 0.5 de Project Reunion, incluimos soporte a Windows en .NET MAUI con WinUI 3:

.NET MAUI en Windows
.NET MAUI en Windows!

Hasta aquí el pequeño repaso a algunas de las novedades en la Preview 3 de .NET MAUI. En la próxima Preview se esperan mas controles, novedades a nivel de UI, Microsoft Graphics y mucho más!. Por supuesto, estaremos aquí en el blog repasando con detallada cada novedad.

Más información

.NET MAUI Check tool

.NET MAUI es un framework de desarrollo de aplicaciones multiplataforma disponible en .NET 6. Con las primeras Previews ya disponibles, es necesario descargar e instalar varios requisitos desde el propio .NET 6 a los workloads para Android, iOS o Catalyst.

¿Y si pudieras utilizar una herramienta que prepare todo el entorno e instale todo los requisitos automáticamente?.

.NET MAUI Check tool

Se trata de una herramienta de línea de comandos que valida los requisitos necesarios para poder lanzar aplicaciones .NET MAUI y permite automáticamente descargar e instalar los requisitos pendientes.

Para instalar la herramienta basta con abrir la linea de comandos y ejecutar el siguiente comando:

dotnet tool install -g Redth.Net.Maui.Check

Para lanzar la herramienta basta con ejecutar el siguiente comando:

maui-check

Otras opciones

La herramienta utiliza un archivo de manifiesto para obtener la última versión de todos los requisitos. Por defecto, se utiliza un archivo de manifiesto disponible en https://aka.ms/dotnet-maui-check-manifest, pero si quieres utilizar un manifiesto personalizado es posible:

maui-check --manifest /some/other/file

Si se utiliza la herramienta en CI, es posible ejecutarla evitando cualquier confirmación usando el argumento –non-interactive.

maui-check --non-interactive

Más información

[XCT] Sombras en Xamarin.Forms

Las sombras consisten en un efecto visual que ayuda al cerebro humano a diferenciar ciertos elementos de la interfaz de usuario. Y esta es una de las razones por las que los diseñadores añaden sombras en sus diseños para aplicaciones móviles.

En este artículo vamos a aprender como añadir sombras, así como personalizar las mismas con diferentes opciones relacionadas con la dirección, tamaño o color de la sombra utilizando el Xamarin Community Toolkit.

Añadiendo Shadows usando el XCT

En el XCT se ha añadido un efecto sumamente útil y sencillo de utilizar que permite añadir sombras a cualquier View que añadimos a la UI.

El efecto ShadowEffect cuenta con una serie de propiedades para permitir personalizar las sombras:

  • Color: Especifica el color usado en la sombra.
  • OffsetX: Este valor nos permite definir el desplazamiento de la sombra. OffsetX especifica la distancia horizontal. Los valores negativos colocan las sombra a la izquierda de el elemento.
  • OffsetY: Este valor nos permite definir el desplazamiento de la sombra. OffsetY especifica la distancia vertical. Los valores negativos colocan las sombra en la parte superior de el elemento.
  • Opacity: Este valor permite especificar la opacidad de la sombra.
  • Radius: Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera.

Utilizar sombras es sencillo, tras añadir la referencia al paquete NuGet del Xamarin Community Toolkit 1.1 o superior, añadimos el namespace necesario para trabajar con el XCT:

xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

Y utilizando el efecto ShadowEffect con las propiedades que hemos visto previamente:

<Label 
    Text="Label With Shifted Red Shadow"
    xct:ShadowEffect.Color="Red"
    xct:ShadowEffect.OffsetX="10"
    xct:ShadowEffect.OffsetY="10" />

El resultado:

Sencillo, ¿verdad?. Recuerda, puedes usar los comentarios de la entrada para añadir tus dudas o preguntas o bien, si has usado este efecto y quieres compartir con todos tu resultado!.

Más información

Contribuir a .NET MAUI

.NET MAUI es un proyecto Open Source desde su inicio y desde etapas tempranas, se permite colaborar o contribuir de diferentes formas (eso sí, con unas bases a seguir bastante definidas).

.NET MAUI

Tras ver ya algunas contribuciones de la comunidad, y recibir un correo preguntando como se puede ayudar, en este artículo, voy a hacer un repaso en las diferentes formas en las que se puede contribuir en .NET MAUI, así como compilar el proyecto, etc.

¿Te interesa?. Vamos a por ello!.

Consejos antes de comenzar

Antes de empezar, colaborar en proyectos Open Source tiene partes positivas como:

  • Vas a ayudar a otros!.
  • Es una forma divertida de aprender.
  • Etc.

Sin embargo, si nunca has colaborado antes probablemente tengas algunas dudas. La primera de ellas será como hacerlo. Para eso espero que este artículo sea de ayuda. El segundo de los posibles problemas esta en el conocido “síndrome del impostor”. Dudas si lo que haces es correcto,  etc. En este punto, no te preocupes!. Si hay algo que se pueda mejorar, lo verás en el feedback. Es parte de la “gracia” de colaborar así, aprenderás posiblemente cosas nuevas.

Tan solo recuerda:

  • No tengas dudas. Aprenderás cosas nuevas como yo y todos lo hacemos a diario.
  • Puedes preguntar al crear la PR lo que necesites!.

Formas de contribuir

Lo primero de todo, contribuir tiene varias definiciones aunque en este caso:

“se trata de ayudar y concurrir con otros al logro de un cierto fin”

Se puede ayudar de muchas formas!. No tienes porque implementar la espectacular funcionalidad X para poder contribuir.

Vamos a repasar las diferentes opciones disponibles:

  • Probar las Previews.
  • Dar tu feedback en las Specs de nueva funcionalidad.
  • Correcciones en la wiki.
  • Tomar una de las issues disponibles (implementar una propiedad en un Handler).

Preparar el entorno

Antes de comenzar a trabajar con .NET MAUI, para trabajar con .NET 6, debemos instalar .NET 6 y otros requisitos.

Comenzamos instalando la Preview de .NET 6:

Para trabajar con .NET para Android y iOS necesitarás instalar también los workloads:

Android:

iOS:

En el caso de querer probar la implementación de macOS usando Catalyst, necesitas instalar:

Para compilar el proyecto debemos comenzar por tener el mismo. Es sencillo:

git clone https://github.com/dotnet/maui.git C:\maui

Usando Visual Studio (Windows o macOS), tras obtener el proyecto no deberás hacer nada especial para compilarlo. Abre la solución Microsoft.Maui.sln y pulsa F5.

Estructura del proyecto

A continuación, vamos a ver la estructura básica de la solución. Con respecto a Xamarin.Forms, se simplifica considerablemente el número de proyectos (gracias al uso de Multitargeting) donde:

  • En la carpeta Controls puedes encontrar los Renderers de Xamarin.Forms y otras partes usadas por el paquete Compatibility.
  • En Core, esta disponible el proyecto Core de .NET MAUI. En este proyecto puedes encontrar los Handlers en la carpeta Handlers y es el proyecto principal que editarás. Dentro de esta carpeta también puedes encontrar los proyectos de tests relacionados con el Core de .NET MAUI.
  • En la carpeta Essentials se encuentra la evolución de Xamarin.Essentials.
  • Todo lo que permite funcionar a al proyecto único o Single Project se encuentra en la carpeta SingleProject.

Implementar una propiedad de un handler

Has revisado las issues de .NET MAUI y te has decidido a colaborar implementando una propiedad de un Handler. Fantástico!. A continuación, algunos detalles que debes tener en cuenta:

  • Como la propia issue indica, añade una sola propiedad para un control.
  • Debes implementar el método del Handler para iOS y Android.
  • Crea los métodos de extensión necesarios o reutiliza lo existentes cuando sea apropiado / posible.
  • Mueve el código del Renderer correspondiente que encontrarás en la carpeta Compatbility. Marca el código portado con el atributo [PortHandler].
  • Añade tests tanto para iOS como para Android (DeviceTests).
  • Evitar cualquier cambio que no sea esencial para la propiedad del Handler (incluidos los espacios en blanco).

Crea una nueva rama partiendo de lo último disponible en main.

No se requiere cumplir un patrón específico a la hora de crear la rama. Mis recomendaciones serían:

  • Puedes crear una rama “fix-{id}” donde el id es el identificador de la Issue.
  • Puedes usar un nombre descriptivo. Por ejemplo, si estas corrigiendo un error al seleccionar un elemento en el TabView podría ser algo como “implement-text-button”.
  • También puedes usar una combinación de las ideas anteriores. Por ejemplo: “fix-1234-text-button”.

El momento de enviar la PR

Añade un título descriptivo junto con una breve descripción. Añade el enlace a la issue asociada.

Todo listo para enviar!. Una vez enviado, miembros del equipo comenzarán a revisar todo. Una vez pasadas revisiones, builds y otras validaciones. Enhorabuena, tus cambios estarán incluidos en .NET MAUI!.

Hasta aquí. Creo que hemos realizado un buen resumen de como contribuir en .NET MAUI. Además de todo lo expuesto, si puedo ayudar en algo tan solo avísame. Cualquier feedback es bienvenido en los comentarios de la entrada!.

Más información

.NET MAUI Preview 2

Con la primera Preview de .NET 6 llegaban los primeros bits para poder hacer pruebas con .NET para Android y iOS, una primera muestra de todo lo que llegará con .NET MAUI. Con la Preview 2, llegan muchas más novedades relacionadas con .NET MAUI como:

  • Primera muestra de proyecto único. Incluye gestión común de iconos, fuentes, etc.
  • Introducción del concepto de nueva aplicación, ventana etc.
  • Handlers. Son la evolución de los actuales renderers en Xamarin.Forms, pero con una nueva arquitectura en búsqueda de mayor rendimiento y opciones de extensibilidad.
  • HostBuilder.
  • Soporte a Mac Catalyst.

En este artículo, vamos a hacer un repaso a todo lo que incluye la Preview 2, además de repasar que nos esperar en próximas Previews.

¿Qué es .NET MAUI?

Partiendo de la evolución de Xamarin.Forms llega a .NET, Multi-platform App UI, MAUI. Se trata de un framework, evolución de Xamarin.Forms, que permitirá crear interfaces de usuario nativas para escritorio y dispositivos móviles usando una base de código común y un único proyecto.

.NET MAUI

Las claves de MAUI son:

  • Interfaz de usuario multi-plataforma nativa.
  • Evolución de Xamarin.Forms.
  • Base de código común, un único proyecto.
  • .NET 6.
  • Soporte oficial para Android, iOS, macOS y Windows.

Los objetivos fundamentales son:

  • Mejorar el rendimiento.
  • Mejorar las posibilidades a la hora de extender controles. Extender de forma más sencilla.
  • Habilitar otras opciones como Model-View-Update (MVU).

Puedes verlo todo con más detalles en el siguiente video:

Preparar el entorno

Antes de comenzar a trabajar con .NET MAUI, necesitamos instalar .NET 6 y otros requisitos. Y antes de instalar nada, recuerda que vamos a instalar Previews. NO están listos para producción, el objetivo principal es permitir comenzar a probar y descubrir las novedades, etc.

Comenzamos instalando la Preview de .NET 6:

Para trabajar con .NET para Android y iOS necesitarás instalar también los workloads:

Android:

iOS:

En el caso de querer probar la implementación de macOS usando Catalyst, necesitas instalar:

Casi lo tenemos todo listo!. Puedes obtener algunos ejemplos usando .NET 6 preparados aquí.

Con .NET 6 ganamos la línea de comandos para poder realizar compilaciones y despliegues de aplicaciones móviles. Puedes compilar aplicaciones .NET MAUI con el comando:

dotnet build HelloMaui

Y compilar y desplegar a la vez usando:

dotnet build HelloMaui -t:Run -f net6.0-android

NOTA: En esta Preview debes añadir también –no-restore. Es debido a algo que estará implementado en la próxima Release, pero no disponible en esta.

Para lanzar un proyecto .NET MAUI, necesitas especificar el $(TargetFramework) usando el parámetro -f.

Hola .NET MAUI

Pero…te estarás preguntando si puedes usar algún IDE. Actualmente hay soporte a Visual Studio 16.9 para Windows pero hay que hacer unos pequeños cambios.

NOTA: El soporte a Visual Studio para macOS o Visual Studio Code aún no esta disponible.

Abre una línea de comandos para activar el EnableWorkloadResolver.sentinel:

cd "%ProgramFiles(x86)%\Microsoft Visual Studio\2019\Enterprise\MSBuild\Current\Bin\SdkResolvers\Microsoft.DotNet.MSBuildSdkResolver"
type NUL > EnableWorkloadResolver.sentinel

Debes reiniciar Visual Studio (si lo tenías abierto) tras este cambio.

.NET MAUI Preview 2

A continuación, veamos que incluye esta Preview así como que podemos hacer con ella.

Proyecto único

Simplificar y reducir conceptos necesarios para ser productivos es uno de los objetivos de .NET MAUI. Una de las formas de buscar este objetivos es con el proyecto único. A diferencia de Xamarin.Forms donde teníamos una librería común compartida junto con un proyecto nativo por cada plataforma, en .NET MAUI tenemos un proyecto único para todas las plataformas.

Proyecto único

En estos momentos, el proyecto incluye soporte a Android, iOS y macOS. El soporte a Windows usando WinUI 3 llegará en próximas Previews.

Para poder usar un proyecto único con diferentes plataformas donde cada una requiere recursos como imágenes o fuentes, necesitamos una forma común de gestionar recursos. Las fuentes e imágenes se pueden colocar en una ubicación común de la solución y .NET MAUI lo gestionará para adaptar todos los recursos a cada plataforma nativa. Estos recursos se registran en el *.csproj como SharedImage y SharedFont.

<ItemGroup>
    <SharedImage Include="appicon.svg" ForegroundFile="appiconfg.svg" IsAppIcon="true" />
    <SharedFont Include="Resources\Fonts\ionicons.ttf" />
</ItemGroup>

Android, iOS y macOS (Catalyst)

El soporte a macOS en .NET MAUI utiliza Catalyst. Para poder usar Catalyst y compilar la aplicación para escritorio, se necesita usar el siguiente TargetFramework:

<TargetFrameworks>net6.0-android;net6.0-ios</TargetFrameworks>
<TargetFrameworks Condition=" '$(OS)' != 'Windows_NT' ">$(TargetFrameworks);net6.0-maccatalyst</TargetFrameworks>

Handlers

La evolución de los Renderers de Xamarin.Forms. Se busca tener siempre el equivalente a un Fast Renderer (solo crear el elemento nativo necesario sin ningún elemento padre o similar para realizar tareas de posicionamiento, reduciendo el árbol visual y por consiguiente, consiguiendo un mejor rendimiento), además de realizar una gestión más óptima con Layouts, etc.

En esta Preview se ha incluido un subconjunto de Handlers (controles) entre los que puedes encontrar: Label, Button, Entry, Slider y Switch. Sin embargo, en esta Preview también se incluye la librería Compatibility.

¿Qué es el paquete Compatibility?

Dado que .NET MAUI es una evolución de Xamarin.Forms, se busca desde el inicio de .NET MAUI ofrecer una experiencia de conversión de proyectos sencilla. Para permitir seguir usando Custom Renderers y otras opciones creadas con Xamarin.Forms, se ha creado el paquete Compatibility. De igual forma, se pueden usar Renderers (controles) de Xamarin.Forms en .NET MAUI. Por ese motivo, aunque no este disponible el Handler de Image (por ejemplo), puedes usar imágenes también.

NOTA: Existe una diferencia de rendimiento entre Renderers y Handlers, sin embargo, poder rehusar grandes cantidades de código gracias al paquete Compatibility, es un gran beneficio.

BuildHost

Se añade en .NET MAUI el concepto de Host, junto con extensiones para configurar servicios, fuentes o habilitar el uso de Renderers para migrar proyectos de Xamarin.Forms. Este nuevo patrón también presenta un lugar único y coherente para que los autores de librerías se integren con .NET MAUI.

public class Application : MauiApp
{
    public override IAppHostBuilder CreateBuilder() => 
        base.CreateBuilder()
            .RegisterCompatibilityRenderers()
            .ConfigureServices((ctx, services) =>
            {
                services.AddTransient<MainPage>();
                services.AddTransient<IWindow, MainWindow>();
            })
            .ConfigureFonts((hostingContext, fonts) =>
            {
                fonts.AddFont("ionicons.ttf", "IonIcons");
            });

    public override IWindow CreateWindow(IActivationState state)
    {
        Microsoft.Maui.Controls.Compatibility.Forms.Init(state);
        return Services.GetService<IWindow>();
    }
}

Otras novedades

  • Xamarin.Essentials también esta integrado en esta Preview. Essentials y toda su funcionalidad es ahora parte directa del framework.
  • AndroidX esta ya integrado en .NET 6.
  • Funciona el Build Host para conectar desde Windows a un Mac.
  • Añadido soporte a AOT para iOS en .NET 6.
  • Etc.

¿Qué es lo próximo?

Habrá varias Previews antes de la llegada de .NET 6 y .NET MAUI en Noviembre. La próxima Preview contará además de con mas Handlers (controles), primera versión de nuevo sistema de Layout, concepto de Startup, eventos de ciclo de vida, y mucho más. Al estar disponible, volveremos a tener artículo en el blog así como algún streaming en Twitch.

¿Qué te parece lo que ves en la Preview?, ¿cuál es tu novedad favorita?. Puedes dejar cualquier feedback o pregunta en los comentarios de la entrada!

Más información

GraphicsControls: Controles dibujados para Xamarin.Forms

Introducción

Xamarin.Forms añ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

De la abstracción, en cada plataforma, se crean controles nativos. Es una de las características principales de Xamarin.Forms permitiendo crear apps con controles nativos con la apariencia nativa esperada en cada plataforma, etc. Con propiedades se pueden realizar personalizaciones, y para quien tenga conocimientos de desarrollo móvil nativo en cada plataforma puede llegar mucho más lejos usando Custom Renderers.

Mientras que contar con controles nativos, tiene puntos a favor:

  • Rendimiento nativo.
  • Aspecto nativo.
  • Poder extender creando Custom Renderers con código nativo en cada plataforma.

Pero también alguno negativo:

  • Hay que definir el control en cada plataforma.
  • Los controles tienen apariencia nativa, no la misma. A veces se busca exactamente la misma apariencia y en alguna plataforma hay que añadir código específico para conseguir el resultado.

¿Y sí, pudiéramos elegir si usar un control nativo o un control dibujado?. De esta forma:

  • Quien quiera usar el control nativo, puede.
  • Quien tenga conocimiento de código nativo, puede usar el control nativo y extender usando Custom Renderers.
  • Quien quiera exactamente misma apariencia pixel por pixel, puede usar un control dibujado de exactamente la misma forma en todas las plataformas.
  • Quien quiera extender, y no tenga conocimientos de cada plataforma nativa, puede hacerlo con controles dibujados con una API común.

GraphicsControls

GraphicsControls es una librería experimental de controles dibujados para Xamarin.Forms. En cada plataforma se usan APIs de dibujado nativo:

  • Android -Android Graphics
  • iOS – CoreGraphics
  • macOS – CoreGraphics
  • UWP – Win2D
  • Linux – Skia
  • Tizen – Linux

El objetivo de la librería es ofrecer controles dibujados con soporte a Cupertino, Fluent y Material de todos los controles disponibles en Xamarin.Forms Visual (BoxView, Entry, Button, etc) en todas las plataformas actuales soportadas por Xamarin.Forms.

Controles dibujados

La librería cuenta con controles dibujados. Los controles reproducen la interfaz y comportamiento esperado usando Cupertino, Fluent y Material en todas las plataformas.

Fácil de extender

En cada control, se puede sobrecargar el dibujado del control o de una capa específica de cad control:

public override void Draw(ICanvas canvas, RectangleF dirtyRect)
{

}

Soporte a modo claro/oscuro

Todos los controles tienen soporte para el modo claro y oscuro:

Escritorio y móvil

Se busca dar soporte tanto en plataformas de escritorio como en móvil:

RTL

A pesar de ser controles dibujados, permitir usar los mismos ante cualquier situación es importante. Aspectos como soporte a RTL o accesibilidad es sumamente importante y se tiene en cuenta a la hora de crear los controles:

Accesibilidad

Los controles dibujados usando un Canvas donde dibujar todo el contenido, pero el Canvas se aloja en una vista nativa en cada plataforma. de momento solo se mapea la posibilidad de leer texto pero, de nuevo, a pesar de ser controles dibujados se busca dar el soporte necesario a nivel de accesibilidad.

¿Cuál es el objetivo?

El objetivo buscado es ofrecer una librería de controles dibujados con soporte a Cupertino, Fluent y Material en todas las plataformas soportadas por Xamarin.Forms. Cada control contará con las mismas propiedades y eventos de los controles disponibles en Xamarin.Forms.

Al tener completados todos los controles y dar soporte a todas las plataformas, se creará paquete NuGet.

Tras esto, el feedback e interés en la librería determinará la evolución.

¿Quieres saber más?. Recientemente, hice un streaming enseñando la librería:

Feedback

La librería usa una filosofía diferente a la habitual usada en Xamarin.Forms, controles dibujados en lugar de mapear a controles nativos. Puedes ayudar muchísimo a la evolución de la librería con tu feedback!. ¿Qué te parece la idea?. Recuerda, puedes dejar cualquier feedback en los comentarios de la entrada.

Más información

[Evento TechClub Asturias] Presente y futuro de Xamarin.Forms

El evento

Este 2021 aparece en escena dentro de .NET, .NET MAUI. Se trata de un framework multiplataforma de desarrollo de apps, evolución de Xamarin.Forms. Pero, probablemente existan muchas dudas al respecto, ¿cuál es el estado actual de Xamarin.Forms?, ¿qué ocurrirá con Xamarin.Forms?, ¿qué es exactamente .NET MAUI?. En esta sesión, vamos a realizar un repaso al presente y futuro de Xamarin.Forms intentando resolver todas las dudas con la mayor cantidad de demos posibles.

Tech Club Asturias

La fecha

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

¿Te apuntas?

Más información

Café Virtual con Miguel Ángel Ramos

Café Virtual

Los cafés virtuales consisten en una reunión por streaming donde tendremos un café y charla con un invitado especial. De una forma amena y divertida hablaremos con invitados acerca de tecnologías .NET, los conoceremos mejor, etc. Además, tendremos tiempo para conocer también mejor al invitado usando algún que otro “juego” además de permitir la participación de cualquiera que quiera conectar y participar en ronda de preguntas, etc.

Café Virtual

Miguel Ángel Ramos

En esta ocasión tenemos a un sevillano desde Seattle, a Miguel Ángel Ramos.

Miguel Ángel Ramos

Miguel Ángel es Program Manager en Microsoft. Hablaremos con el acerca de su trayectoria hasta llegar a su posición actual. Además hablaremos de su experiencia en la Imagine Cup, como evangelista de Microsoft y por supuesto de tecnología donde sin duda, hablaremos de WinUI.

Será el próximo Miércoles, 03 de Febrero de 18:30h a 20:30h (GMT+1).

¿Te apuntas?

Más información

Felices fiestas!

Queridos amigos, celebréis lo que celebréis, os deseo a todos unas felices fiestas!. Normalmente, añadiría “junto a vuestros seres queridos”, pero esta vez solo añadiré, cuidaos mucho, al igual que a todos los que os rodean.

Para el 2021!

Para el próximo año solo pido mirar hacia delante con alegría y optimismo además de salud. Son los ingredientes básicos para tener un buen año!.

Felices fiestas!

¿Cómo colaborar con el Xamarin Community Toolkit?

Contribuir en el Xamarin Community Toolkit

Una de los puntos a favor de Xamarin es su increíble comunidad. Una comunidad activa haciendo constantemente actividades (eventos online, eventos presenciales, etc.) y creando nuevo contenido (artículos, ejemplos, plugins, etc.). Con el paso del tiempo es fantástico ver más y más plugins además de diferentes retos de UI y otro tipo de contenidos que son de ayuda para todos.

El Xamarin Community Toolkit es un proyecto Open Source apoyado por Microsoft, pero donde el motor es la comunidad. Es por y para la comunidad, así que es, un proyecto ideal donde colaborar.

Recibo en ocasiones correos o mensajes en varios medios (Slack, Skype, etc.) preguntando como formar parte del Toolkit. En este artículo, voy a hacer un repaso en las diferentes formas en las que se puede contribuir en el Xamarin Community Toolkit, así como compilar el proyecto, poder tomar issues o mejoras, etc.

¿Te interesa?. Vamos a por ello!.

Consejos antes de comenzar

Antes de empezar, colaborar en proyectos Open Source tiene partes positivas como:

  • Vas a ayudar a otros!.
  • Es una forma divertida de aprender.
  • Etc.

Sin embargo, si nunca has colaborado antes probablemente tengas algunas dudas. La primera de ellas será como hacerlo. Para eso espero que este artículo sea de ayuda. El segundo de los posibles problemas esta en el conocido “síndrome del impostor”. Dudas si lo que haces es correcto,  etc. En este punto, no te preocupes!. Si hay algo que se pueda mejorar, lo verás en el feedback. Es parte de la “gracia” de colaborar así, aprenderás posiblemente cosas nuevas.

Tan solo recuerda:

  • No tengas dudas. Aprenderás cosas nuevas como yo y todos lo hacemos a diario.
  • Puedes preguntar al crear la PR lo que necesites!.

Formas de contribuir

Lo primero de todo, contribuir tiene varias definiciones aunque en este caso:

“se trata de ayudar y concurrir con otros al logro de un cierto fin”

Se puede ayudar de muchas formas!. No tienes porque implementar la espectacular funcionalidad X para poder contribuir.

Vamos a repasar las diferentes opciones disponibles:

  • Reportar una issue.
  • Aportar ideas para nueva funcionalidad.
  • Correcciones en la documentación.
  • Corregir una issue.
  • Nueva funcionalidad.

Reportar una issue

Es una de las formas más sencillas de contribuir. Tienes un problema usando el Xamarin Community Toolkit, algo que no se comporta cómo debería. Abre una issue. De esta forma, avisarás que algo no funciona como debe; se corregirá y en el futuro otros devs tendrán la corrección gracias a que avisaste el problema.

Nueva issue

Los pasos a seguir son sencillos:

  1. Logra reproducir un problema de forma constante.
  2. Escribe una Issue explicando el problema. Lo fundamental es detallar en pasos como reproducir el problema.
  3. Detallada cual es el comportamiento que estas obteniendo y cual es el esperado (ayuda a determinar si es una Issue o no).
  4. Añade la versión del Xamarin Community Toolkit utilizada así como la plataforma o plataformas afectadas.
  5. Si es posible, añade algunas capturas.
  6. Si es posible (ayuda muchísimo), añade un pequeño ejemplo adjunto donde reproducir el problema.

Voila!. Sencillo, ¿verdad?.

Aportar ideas, añadir nueva funcionalidad

“Estaría genial tener esta propiedad en este control”. Haz una propuesta. Es sencillo, al final es como escribir una issue pero con ligeros cambios.

Los pasos a seguir serían:

  1. Piensa, analiza y piensa de nuevo tu idea.
  2. Abre una issue con el título “[Enhancement] …” y añade una descripción detallada de lo que buscas con esta mejora.
  3. Si has pensado una posible definición para la API añadela.
  4. Si puedes, añade un pequeño ejemplo (Scenario) donde enseñar como se usaría la nueva funcionalidad.
  5. ¿Afecta a alguna API existente?. Indícalo.
  6. Si puedes, añade el nivel de dificultad necesario para implementar la nueva funcionalidad (bajo, medio, alto).
  7. Añade el tag enhancement.

Actualizar documentación

¿Encontraste algún error en la documentación?, ¿falta documentación de alguna funcionalidad?. Puedes enviar actualizaciones en la documentación.

Documentación!

Corregir una issue

En este nivel de contribución se ha seleccionado una issue específica a corregir, cuentas con el código fuente sincronizado y ya te dispones a modificar código. Vamos a ver con más detalles este proceso un poco más adelante.

Añadir una nueva funcionalidad

Similar al caso anterior. La diferencia radica que en este caso creas una funcionalidad nueva en lugar de corregir una issue.

Compilar el proyecto

Para compilar el proyecto debemos comenzar por tener el mismo. Es sencillo:

git clone https://github.com/xamarin/XamarinCommunityToolkit.git C:\XamarinCommunityToolkit

Usando Visual Studio (Windows o macOS), tras obtener el proyecto no deberás hacer nada especial para compilarlo. Abre la solución Xamarin.CommunityToolkit.Sample.sln y pulsa F5.

Conociendo el proyecto

La solución del Xamarin Community Toolkit no es relativamente grande pero, veamos las calves del proyecto:

  • Xamarin.CommunityToolkit: Aquí puedes encontrar la librería del Toolkit. Dentro de la librería se encuentra todo organizado en carpetas (Converters, Effects, Views, etc).
  • Xamarin.CommunityToolkit.Sample: Es un ejemplo donde probar todo lo implementado en el Toolkit. Es muy recomendable usar este ejemplo si añades algo nuevo o haces una corrección para validar los cambios.
  • Xamarin.CommunityToolkit.UnitTests: Un proyecto con tests unitarios de elementos clave.
Estructura del proyecto

Trabajar en una corrección

Ya tienes el proyecto sincronizado y tienes una Issue seleccionada. Ahora si, manos a la obra. Pero antes de comenzar, crea una nueva rama partiendo de lo último disponible en main.

No se requiere cumplir un patrón específico a la hora de crear la rama. Mis recomendaciones serían:

  • Si es un fix, puedes crear una rama “fix{id}” donde el id es el identificador de la Issue.
  • Puedes usar un nombre descriptivo. Por ejemplo, si estas corrigiendo un error al seleccionar un elemento en el TabView podría ser algo como “fix_tabview_selectindex”.
  • También puedes usar una combinación de las ideas anteriores. Por ejemplo: “fix_1234_tabview_selectindex”.

A la hora de trabajar con el código recuerda cumplir las guías de estilo de código usadas en la .NET Foundation.

Una vez aplicados los cambios necesarios, considera lo siguiente:

  • Si es una corrección, es posible que un test unitario o UITest encaje y ayude a evitar regresiones en el futuro.
  • Si has añadido algo nuevo, modifica el Sample para reflejar la nueva opción.

El momento de enviar la PR

Añade un título descriptivo junto con una buena descripción (si hay cambios visuales o añadiste algun ejemplo o UITest, añade capturas de pantalla). Si has corregido una issue (o issues) añade el enlace a las mismas.

A continuación, si hay cambios en API añade los detalles. Por último, rellena el checklist indicando si hay UITests, etc.

Todo listo para enviar!. Una vez enviado, miembros del equipo así como de la comunidad comenzarán a revisar todo. Una vez pasadas revisiones, builds y otras validaciones. Enhorabuena, tus cambios estarán incluidos en el Xamarin Community Toolkit!.

Hasta aquí. Creo que hemos realizado un buen resumen de como contribuir en el Xamarin Community Toolkit. Además de todo lo expuesto, si puedo ayudar en algo tan solo avísame. Por otro lado, estoy pensando en la idea de hacer algun streaming en Twitch abordando este tema, ¿te resultaría interesante?. Cualquier feedback es bienvenido en los comentarios de la entrada!.

Más información