¿Has tenido la necesidad agregar funcionalidades para dibujar en tus aplicaciones de .NET MAUI? 🤔 .. Probablemente si,.. pero más allá del dibujo… ¿Has requerido que el usuario de tu App bancaria firme a través de ella? En este artículo, aprendemos cómo hacerlo con .NET MAUI Community Toolkit.
¡Aprenderemos a integrarlo de una manera simple! 💕 La explicación será dividida en los siguientes puntos:
🔹 .NET MAUI Community Toolkit: Implementación
🔹 Preparando tu XAML para agregar el DrawView
➖ Conociendo las propiedades del DrawingView
🔹 Limpiando el DrawView
🔹 Mostrando la imagen del DrawView
¡Empecemos!
.NET MAUI Community Toolkit: Implementación
La clave para lograr dibujar en nuestra App, es usar Community.ToolKit.Maui, veamos su definición y como implementarlo.
¿Qué es .NET MAUI Community Toolkit:?
Es una colección de elementos reutilizables como animaciones, comportamientos (Behaviors), converters, entre otros, con el objetivo de desarrollar aplicaciones para iOS, Android, macOS y WinUI usando MAUI.
Vamos a implementarlo:
- Agrega desde el paquete NuGet: Community.Toolkit.Maui
- Ahora inicialicemos: Ve a tu archivo MauiProgram.cs
En el método CreateMauiApp, verás la siguiente línea: .UseMauiApp<App>(), justo debajo, agrega lo siguiente:
⚠ No olvides agregar using CommunityToolkit.Maui; en la parte superior de la clase.
Preparando tu XAML para agregar el DrawView
¿Qué es DrawingView?
Es una clase proporcionada por Community.Toolkit.Maui la cual se encarga de proveer una superficie que permite dibujar líneas a través del tacto o la interacción del mouse en tus aplicaciones.
Para continuar, agrega el siguiente espacio de nombres en tu XAML:
Luego, agrega la etiqueta DrawingView con las propiedades que necesita:
Conociendo las propiedades de DrawingView
Cuenta con diferentes propiedades muy útiles, conozcamos algunas:
➖ WidthRequest y HeightRequest: Estas propiedades ayudan a establecer el ancho y alto respectivamente. ⚠ Ten en mente que debes agregar ambas propiedades a tu DrawingView para que este pueda ser visualizado correctamente en tu app.
➖ LineColor: Es el color que tendrá la línea de dibujo.
➖ LineWidth: Es el ancho que tendrá la línea de dibujo.
➖IsMultiLineModeEnabled: De manera predeterminada, el DrawingView permite dibujar solo un trazo a la vez. La propiedad IsMultiLineModeEnabled permite cambiar esto y dibujar varias lineas a la vez. Recibe valores Bool. Para activarla necesitas establer el valor en True.
Limpiando el DrawView
Si deseas limpiar el DrawView, has lo siguiente:
➖ Agrega un botón con un evento Click.
➖ Ve al CodeBehind y en el evento del Button, agrega lo siguiente:
📝 Este también lo puedes hacer con MVVM..
Mostrando la imagen del DrawView
Agrega un control Image a tu XAML
Usaremos el evento DrawingLineCompleted para DrawingView.
Finalmente, desarrolla el evento:
📝 Este también lo puedes hacer con MVVM.
¡Y listo! 
Ya estas list@ para dibujar y firmas en tus aplicaciones .NET MAUI! 💚💕
<Label Text=”¡Gracias por leer! 👋 ” />
Artículo en inglés: https://askxammy.com/drawing-with-net-maui-community-toolkit/
Referencia: https://www.youtube.com/watch?v=7rw13_a5GR0
¡Interesante! No conocía este control ¡Gracias por el artículo!
Gracias!
Gracias por tus aportes a la comunidad, me sirven muchísimo.
Pregunta, habrá alguna manera de cargar el trazado para poder editarlo posteriormente? por ejemplo, si lo uso para que el usuario dibuje su firma, guardo localmente y necesito cargar nuevamente todo un formulario y que me muestre la firma para poder editarla también.
Muchas gracias Cris!
Por el momento no ha visto que puedas editar como tal el trazo, sin embargo una opción es recargas la imagen para poder dibujar por arriba.