Hipervínculos

  • Artículo

Los hipervínculos llevan al usuario a otra parte de la aplicación, a otra aplicación o permiten iniciar un identificador uniforme de recursos (URI) específico con una aplicación de explorador diferente. Hay dos maneras de agregar un hipervínculo a una aplicación XAML: el elemento de texto Hyperlink y el control HyperlinkButton .

Botón de hipervínculo

¿Es este el control adecuado?

Use un hipervínculo cuando necesite texto que responda cuando se presione y navegue al usuario para obtener más información sobre el texto que se presionó.

Elige el tipo correcto de hipervínculo según tus necesidades:

  • Use un elemento de texto Hyperlink insertado dentro de un control de texto. Un elemento Hyperlink fluye con otros elementos de texto y se puede usar en cualquier elemento InlineCollection. Usa un hipervínculo de texto si quieres ajuste de texto automático y no necesitas obligatoriamente un destino de gran alcance. El texto del hipervínculo puede ser pequeño y difícil de activar, especialmente con la entrada táctil.
  • Use un HyperlinkButton para hipervínculos independientes. Un elemento HyperlinkButton es un control Button especializado que puedes usar en cualquier lugar en que usarías un elemento Button.
  • Use un HyperlinkButton con una imagen como contenido para hacer clic en una imagen.

Recomendaciones

  • Usa los hipervínculos solo para la navegación; no los uses para otras acciones.
  • Usa el estilo Body de la tabla de tipos para los hipervínculos basados en texto. Obtenga información sobre las fuentes y la rampa de tipos de Windows.
  • Mantén los hipervínculos discretos y suficientemente separados para que el usuario pueda diferenciarlos y seleccionarlos con facilidad.
  • Agrega información sobre herramientas a los hipervínculos que indican dónde se dirigirá al usuario. Si se dirige al usuario a un sitio externo, incluye el nombre de dominio de nivel superior dentro de la información sobre herramientas y un estilo de texto con un color de fuente secundario.

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

Las API de este control existen en el espacio de nombres Windows.UI.Xaml.Controls .

Crea un elemento de texto Hyperlink

En este ejemplo se muestra cómo usar un elemento de texto Hyperlink dentro de un bloque TextBlock.

<StackPanel Width="200">
    <TextBlock Text="Privacy" Style="{StaticResource SubheaderTextBlockStyle}"/>
    <TextBlock TextWrapping="WrapWholeWords">
        <Span xml:space="preserve"><Run>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Read the </Run><Hyperlink NavigateUri="http://www.contoso.com">Contoso Privacy Statement</Hyperlink><Run> in your browser.</Run> Donec pharetra, enim sit amet mattis tincidunt, felis nisi semper lectus, vel porta diam nisi in augue.</Span>
    </TextBlock>
</StackPanel>

El hipervínculo aparece en línea y fluye con el texto que le rodea:

Ejemplo de un hipervínculo como elemento de texto

Sugerencia

Cuando uses un elemento Hyperlink en un control de texto con otros elementos de texto en XAML, coloca el contenido en un contenedor Span y aplica el atributo xml:space="preserve" al contenedor Span para mantener el espacio en blanco entre el elemento Hyperlink y otros elementos.

Crear un elemento HyperlinkButton

Abra la aplicación Galería de WinUI 3 y vea los hipervínculos en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.

Aquí se muestra cómo usar un elemento HyperlinkButton, tanto con texto como con una imagen.

<StackPanel>
    <TextBlock Text="About" Style="{StaticResource TitleTextBlockStyle}"/>
    <HyperlinkButton NavigateUri="http://www.contoso.com">
        <Image Source="Assets/ContosoLogo.png"/>
    </HyperlinkButton>
    <TextBlock Text="Version: 1.0.0001" Style="{StaticResource CaptionTextBlockStyle}"/>
    <HyperlinkButton Content="Contoso.com" NavigateUri="http://www.contoso.com"/>
    <HyperlinkButton Content="Acknowledgments" NavigateUri="http://www.contoso.com"/>
    <HyperlinkButton Content="Help" NavigateUri="http://www.contoso.com"/>
</StackPanel>

Los botones de hipervínculo con contenido de texto aparecen como texto marcado. La imagen del logotipo de Contoso también es un hipervínculo interactivo:

Ejemplo de un hipervínculo como control de botón

En este ejemplo se muestra cómo crear una clase HyperlinkButton en el código.

HyperlinkButton helpLinkButton = new HyperlinkButton();
helpLinkButton.Content = "Help";
helpLinkButton.NavigateUri = new Uri("http://www.contoso.com");

Controlar la navegación

En los dos tipos de hipervínculos, puedes controlar la navegación del mismo modo; puedes establecer la propiedad NavigateUri o controlar el evento Click.

Para usar el hipervínculo para navegar a un URI, establece la propiedad NavigateUri. Cuando un usuario hace clic en el hipervínculo o lo pulsa, el URI especificado se abre en el explorador predeterminado. El explorador predeterminado se ejecuta en un proceso independiente de la aplicación.

Nota

Un identificador URI se representa mediante la clase Windows.Foundation.Uri. Cuando se programa con .NET, esta clase está oculta y se debe usar la System.Uri. Para más información, consulta las páginas de referencia de estas clases.

No es necesario usar esquemas http: o https:. Esquemas como ms-appx:, ms-appdata: o ms-resources: se pueden usar si hay contenido de recursos en estas ubicaciones que sea adecuado para cargarlo en un explorador. Sin embargo, el esquema file: se bloquea específicamente. Para más información, consulta Esquemas de URI.

Cuando un usuario hace clic en el hipervínculo, el valor de la propiedad NavigateUri se pasa a un controlador de sistema para esquemas y tipos de URI. El sistema inicia entonces la aplicación que esté registrada para el esquema del URI proporcionado para NavigateUri.

Si no quieres que el hipervínculo cargue contenido en un explorador web predeterminado (y no quieres que aparezca un explorador), no establezcas un valor para NavigateUri. En su lugar, controla el evento Click y escribe código que haga lo que quieres.

Controlar el evento Click

Usa el evento Click para las acciones que no sean iniciar un URI en un explorador, como la navegación dentro de la aplicación. Por ejemplo, si quieres cargar una nueva página de la aplicación, en lugar de abrir un explorador, llama a un método Frame.Navigate en el controlador de eventos Click para navegar a la nueva página de la aplicación. Si quieres que un URI absoluto y externo se cargue dentro de un control WebView que también exista en la aplicación, llama a WebView.Navigate como parte de la lógica del controlador de eventos Click.

Normalmente no se controla el evento Click a la vez que se especifica un valor de NavigateUri, ya que representan dos formas diferentes de usar el elemento de hipervínculo. Si tu intención es abrir el URI en el explorador predeterminado y se ha especificado un valor para NavigateUri, no controles el evento Click. Por el contrario, si controlas el evento Click, no especifiques un valor de NavigateUri.

No hay nada que se pueda hacer en el controlador de eventos Click para impedir que el explorador predeterminado cargue cualquier destino válido especificado para NavigateUri; la acción se realiza automáticamente (de forma asincrónica) cuando el hipervínculo se activa y no se puede cancelar desde el controlador de eventos Click.

De manera predeterminada, los hipervínculos aparecen subrayados. Este subrayado es importante porque ayuda a cumplir los requisitos de accesibilidad. Los usuarios daltónicos se ayudan del subrayado para distinguir entre hipervínculos y otros tipos de texto. Si deshabilita los subrayados, considera la posibilidad de agregar algún otro tipo de diferencia de formato para distinguir los hipervínculos de otros tipos de texto, como FontWeight o FontStyle.

Elementos de texto Hyperlink

Puedes establecer la propiedad UnderlineStyle para deshabilitar el subrayado. Si lo haces, considera la posibilidad de usar FontWeight o FontStyle para diferenciar el texto de los vínculos.

HyperlinkButton

De manera predeterminada, el elemento HyperlinkButton aparece como texto subrayado cuando se establece una cadena como el valor de la propiedad Content.

El texto no aparece subrayado en los siguientes casos:

  • Se establece un bloque TextBlock como el valor para la propiedad Content y se establece la propiedad Text en el bloque TextBlock.
  • Se modifica la plantilla del elemento HyperlinkButton y se cambia el nombre de la parte de la plantilla ContentPresenter.

Si necesitas un botón que aparezca como texto sin subrayado, considera la posibilidad de usar un control Button estándar y aplicar el recurso de sistema TextBlockButtonStyle integrado a su propiedad Style.

Notas para el elemento de texto Hyperlink

Esta sección se aplica únicamente al elemento de texto Hyperlink, no al control HyperlinkButton.

Eventos de entrada

Como un elemento Hyperlink no es un UIElement, no tiene el conjunto de eventos de entrada de los elementos de la interfaz de usuario como Tapped, PointerPressed, etc. En su lugar, un elemento Hyperlink tiene su evento Click, así como el comportamiento implícito del sistema que carga cualquier URI que se especifique como el valor de NavigateUri. El sistema controla todas las acciones de entrada que deberían invocar las acciones Hyperlink y genera como respuesta el evento Click.

Contenido

El elemento Hyperlink tiene restricciones respecto al contenido que puede existir en su colección de elementos Inline. En concreto, un elemento Hyperlink solo permite la clase Run y otros tipos de Span que no sean otro elemento Hyperlink. InlineUIContainer no puede estar en la colección de elementos Inlines de un elemento Hyperlink. Si se intenta agregar contenido restringido, se genera una excepción de argumento no válido o una excepción de análisis XAML.

Hyperlink no hereda de Control, de modo que no tiene una propiedad Style ni una Template. Se pueden modificar las propiedades que se heredan de TextElement como, por ejemplo, Foreground o FontFamily, para cambiar la apariencia de un elemento Hyperlink, pero no se puede usar una plantilla ni un estilo comunes para aplicar los cambios. En lugar de usar una plantilla, considere la posibilidad de usar recursos comunes para los valores de las propiedades de Hyperlink a fin de ofrecer una experiencia coherente. Algunas propiedades de Hyperlink usan valores predeterminados de un valor de extensión de marcado {ThemeResource} que proporciona el sistema. Esto permite que la apariencia del elemento Hyperlink cambie de forma adecuada cuando el usuario modifique el tema del sistema en tiempo de ejecución.

El color predeterminado del hipervínculo es el color de énfasis del sistema. Puedes establecer la propiedad Foreground para reemplazar este comportamiento.

Obtención del código de ejemplo