¡Hola! 🙋♀️ Continuando con la iniciativa “☃️ Coding Winter 2021 – C # y .NET MAUI ❄️”, hoy es #DiaCinto y aprenderemos sobre Bordes en .NET MAUI.
A lo largo de nuestra experiencia en Xamarin Forms, hemos tenido la necesidad de agregar Borders, y para lograrlo hemos desarrollado diferentes “tácticas” debido a que no teníamos un mecanismo directo para hacerlo. Sin embargo, esto nos hizo usar otros controles que no necesariamente tenían este propósito, como por ejemplo los Frames y podía alterar un poco el tiempo de desarrollo.
Estoy aquí para decirte que con .NET MAUI ya no tendrás que hacer esto !!! 💃 ¡Tenemos un nuevo control de de Borders disponible para agregar a nuestra interfaz de usuario! ¡Te invito a leer esta artículo para conocer más de este! 🌟
orio, sin cubrir el paso a paso. Por esta razón, ¡lo cubriremos en este post!
¡Empecemos!
Conociendo el control de Bordes
El Preview 9 .NET Maui nos ha dado la biblioteca Microsoft.Maui.Graphics library la cual nos proporciona un API de dibujo de interfaz de usuario consistente basada en motores gráficos nativos, lo que nos facilita agregar bordes, renderizado de esquinas y sombras para la mayoría de los controles. y el diseño contenidos en .NET Maui. En este artículo, nos centraremos en los Bordes.
El nuevo Control Border nos permite agregar Borders a un solo elemento como contenido, este puede ser tanto un control como un Layout. Este control nos trae un comportamiento muy flexible que permite el manejo independiente de cada esquina: arriba a la izquierda, arriba a la derecha, abajo a la izquierda, abajo a la derecha, permitiéndonos jugar de diferentes formas con nuestra interfaz de usuario, algunos de esos casos pueden ser agregando el borde a un botón y redondeando las esquinas superior izquierda e inferior derecha.
¿Y cómo puedo implementarlo? 🧐
Conozcamos las propiedades:
Para hacerlo, puedes agregar algunas de las siguientes propiedades:
🟠 Stroke: Establece el color que tomará el borde.
🟠 StrokeThickness: Es el grosor (ancho) del borde.
🟠 StrokeDashOffset: Es la distancia dentro del patrón de guiones.
🟠 StrokeDashArray: Colección de valores, que se encarga de especificar el patrón Dash y los espacios utilizados para el borde a implementar.
🟠 StrokeLineCap: Define el trazo inicial y final que tendrá el borde. Para la forma del trazo, recibe los siguientes valores: Flat (Plano), Round (Redondo) y Square (Cuadrado).
🟠 StrokeMiterLimit: Límite en la ración de la longitud a la mitad del grosor del trazo.
También tenemos el StrokeShape, esta propiedad nos permite modificar la forma del Stroke (Trazo) en base a una Forma (la que quieras), además de esta Forma puedes modificar los bordes como necesites, por ejemplo, en caso de que quieras modificar el CornerRadius!
Entre las Formas disponibles tenemos Rectangle, Ellipse, Polyline,, entre otras. Si quieres saber más información sobre ellos puedes leer aquí.
Nuestra estructura final, tiene que ser así:
Artículo en inglés:
Referencias:
- https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-9/?WT.mc_id=DT-MVP-50033
- https://javiersuarezruiz.wordpress.com/2021/10/25/borders-personalizados-en-net-maui/
¡Espero que este artículo te haya sido de gran utilidad! ⭐️ ¡Gracias por leer! 💚💕
