Hoy en día, nuestros dispositivos móviles, tabletas y computadoras funcionan como ventanas a todo lo que ocurre en el mundo a través de las aplicaciones que utilizamos a diario. Estas apps presentan información mediante una estructura de contenido que combina textos, imágenes, hipervínculos y otros elementos, facilitando el acceso sin esfuerzo al contenido. 🔗 Los hipervínculos, en particular, potencian la interacción del usuario al ofrecer caminos para explorar temas más a fondo. En esta guía, les mostraremos cómo incorporar hipervínculos en sus aplicaciones .NET MAUI, mejorando así la experiencia interactiva de los usuarios con su contenido.
¡Empecemos!
Construyendo la clase HyperlinkLabel
El primer paso consiste en desarrollar HyperlinkLabel, una clase que combina la estética visual de un hipervínculo con su comportamiento interactivo inherente. Esta, además, extiende las funcionalidades de Label al heredar de ella.
✍️Dentro de este bloque de código, encontrarás comentarios que indican dónde agregar los pasos del 1 al 3. A lo largo de la explicación de cada bloque, podrás identificar a qué corresponde cada paso. Recuerda agregarlos exactamente donde cada comentario lo indica.
Agregando la URL como propiedad enlazable (BindableProperty)
Iniciemos agregando la BindableProperty, la cual nos permitirá incluir la URL que queremos abrir como parámetro en el XAML. Las propiedades enlazables (BindableProperty) están diseñadas para soportar un sistema de propiedades que facilita el enlace de datos, estilos, plantillas y la configuración de valores a través de relaciones entre padres e hijos.
Definiremos una BindableProperty llamada UrlProperty. Para crearla, utilizaremos el método Create, que requiere los siguientes parámetros:
🔹 Nombre de la Propiedad: Es el nombre de la propiedad enlazable, especificado como un string. Para garantizar la precisión y permitir la verificación en tiempo de compilación, usaremos nameof para obtener una cadena que representa el nombre de la propiedad, evitando así errores tipográficos. – [Obligatorio]
🔹 Tipo de Retorno: Identifica el tipo de datos que la propiedad contendrá. En este caso, es un string, lo que indica que la propiedad almacenará la URL como texto. – [Obligatorio]
🔹 Tipo Declarante: Se refiere a la clase que define la propiedad. En el contexto de este código, el tipo declarante es la clase HyperlinkLabel, que es una clase personalizada que define la funcionalidad etiqueta capaz de funcionalidad de hipervínculo. – [Obligatorio]
🔹 Valor Predeterminado: Este es el valor por defecto de la propiedad enlazable, su valor por defecto es nulo.
Agregando la propiedad Url
La propiedad Url funciona como contenedor para UrlProperty, simplificando el acceso y la asignación de su valor de cadena.
Implementando el constructor
Por último, desarrollaremos el constructor, donde definiremos los rasgos visuales característicos de un hipervínculo. Al utilizar las propiedades TextDecorations y TextColor, impartiremos el clásico tono azul y subrayaremos nuestro enlace. Además, integraremos un TapGestureRecognizer para facilitar la apertura de la URL al tocar el texto.
Usando el hipervínculo en el XAML
A continuación, comencemos a incorporar HyperlinkLabel en nuestro XAML. Recuerda incluir el espacio de nombres (namespace) de la clase recién creada. Mi clase está ubicada en la raíz del proyecto, por esto usaremos “local” como alias del espacio de nombres.
🚀 ¡Voilá! ¡En tan solo unos pocos pasos rápidos, aprendiste a crear hipervínculos para tus aplicaciones .NET MAUI! ¡Sigue creando aplicaciones increíbles! 📖🙌
Articulo en ingles:
➖ https://askxammy.com/from-text-to-action-creating-hyperlinks-in-net-maui/
Referencias:
¡Gracias por leer mi artículo! 💚💕
