Compartir a través de

Hipervínculos

  • Artículo

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

Un 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 ha presionado.

Elija el tipo correcto de hipervínculo en función de sus necesidades:

  • Use un elemento de texto Hyperlink insertado dentro de un control de texto. Un elemento Hyperlink fluye con otros elementos de texto y puede usarlo en cualquier InlineCollection. Use un hipervínculo de texto si desea ajustar texto automático y no necesita necesariamente un destino de posicionamiento grande. El texto del hipervínculo puede ser pequeño y difícil de tener como destino, especialmente para la entrada táctil.
  • Use hyperlinkButton para hipervínculos independientes. HyperlinkButton es un control de botón especializado que puede usar en cualquier lugar que usaría un botón.
  • Use un HyperlinkButton con una imagen como contenido para hacer clic en una imagen.

Recomendaciones

  • Use solo hipervínculos para la navegación; no los use para otras acciones.
  • Use el estilo Body de la rampa de tipos para hipervínculos basados en texto. Obtenga información sobre las fuentes y la rampa de tipos de Windows.
  • Mantenga los hipervínculos discretos lo suficientemente separados para que el usuario pueda diferenciar entre ellos y tiene un tiempo fácil de seleccionar cada uno.
  • Agregue información sobre herramientas a hipervínculos que indiquen dónde se dirigirá el usuario. Si el usuario se dirigirá a un sitio externo, incluya el nombre de dominio de nivel superior dentro de la información sobre herramientas y asigne un estilo al 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.

Existen API para este control en el espacio de nombres Windows.UI.Xaml.Controls.

Crear un elemento de texto Hyperlink

En este ejemplo se muestra cómo usar un elemento de texto Hyperlink dentro de un 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 circundante:

Ejemplo de un hipervínculo como elemento de texto

Sugerencia

Cuando usas un Hipervínculo en un control de texto con otros elementos de texto en XAML, coloca el contenido en un contenedor Span y aplica el xml:space="preserve" atributo a Span para mantener el espacio en blanco entre hyperlink y otros elementos.

Crear un 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, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.

Aquí se muestra cómo usar 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 en el que se puede hacer clic:

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

Para ambos tipos de hipervínculos, controla la navegación de la misma manera; puede establecer la propiedad NavigateUri o controlar el evento Click .

Para usar el hipervínculo para navegar a un URI, establezca la propiedad NavigateUri. Cuando un usuario hace clic o pulsa el hipervínculo, 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 obtener 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 del sistema para los tipos y esquemas de URI. A continuación, el sistema inicia la aplicación registrada para el esquema del URI proporcionado para NavigateUri.

Si no desea que el hipervínculo cargue contenido en un explorador web predeterminado (y no quiere que aparezca un explorador), no establezca un valor para NavigateUri. En su lugar, controle el evento Click y escriba código que haga lo que desee.

Control del evento Click

Use el evento Click para acciones distintas de iniciar un URI en un explorador, como la navegación dentro de la aplicación. Por ejemplo, si quiere cargar una nueva página de aplicación en lugar de abrir un explorador, llame a un método Frame.Navigate dentro del controlador de eventos Click para ir a la nueva página de la aplicación. Si desea que un URI externo y absoluto se cargue dentro de un control WebView que también exista en la aplicación, llame a WebView.Navigate como parte de la lógica del controlador de clics.

Normalmente no controla el evento Click ni especifica un valor NavigateUri, ya que representan dos formas diferentes de usar el elemento hyperlink. Si su intención es abrir el URI en el explorador predeterminado y ha especificado un valor para NavigateUri, no controle el evento Click. Por el contrario, si controla el evento Click, no especifique un NavigateUri.

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

De forma predeterminada, los hipervínculos se subrayan. Este subrayado es importante porque ayuda a cumplir los requisitos de accesibilidad. Los usuarios de color ciego usan el subrayado para distinguir entre hipervínculos y otro texto. Si deshabilita subrayados, debe considerar la posibilidad de agregar algún otro tipo de diferencia de formato para distinguir hipervínculos de otro texto, como FontWeight o FontStyle.

Elementos de texto Hyperlink

Puede establecer la propiedad UnderlineStyle para deshabilitar el subrayado. Si lo hace, considere la posibilidad de usar FontWeight o FontStyle para diferenciar el texto del vínculo.

HyperlinkButton

De forma predeterminada, HyperlinkButton aparece como texto subrayado cuando se establece una cadena como valor para la propiedad Content .

El texto no aparece subrayado en los casos siguientes:

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

Notas del elemento de texto Hyperlink

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

Eventos de entrada

Dado que un hipervínculo no es un UIElement, no tiene el conjunto de eventos de entrada de elementos de interfaz de usuario, como Tapped, PointerPressed, etc. En su lugar, un hyperlink tiene su propio evento Click, además del comportamiento implícito de la carga del sistema cualquier URI especificado como NavigateUri. El sistema controla todas las acciones de entrada que deben invocar las acciones Hyperlink y genera el evento Click en respuesta.

Contenido

El hipervínculo tiene restricciones en el contenido que puede existir en su colección Inlines . En concreto, un hipervínculo solo permite ejecutar y otros tipos de intervalo que no son otro hipervínculo. InlineUIContainer no puede estar en la colección Inlines de un Hyperlink. Si se intenta agregar contenido restringido, se produce una excepción de argumento no válida o una excepción de análisis XAML.

Hyperlink no hereda de Control, por lo que no tiene una propiedad Style ni una plantilla. Puede editar las propiedades que se heredan de TextElement, como Foreground o FontFamily, para cambiar la apariencia de un hipervínculo, pero no puede usar un estilo o plantilla comunes para aplicar cambios. En lugar de usar una plantilla, considere la posibilidad de usar recursos comunes para los valores de las propiedades Hyperlink para proporcionar coherencia. Algunas propiedades de Hyperlink usan valores predeterminados de una extensión de marcado {ThemeResource} proporcionada por el sistema. Esto permite que la apariencia de hipervínculo cambie de las maneras adecuadas cuando el usuario cambia el tema del sistema en tiempo de ejecución.

El color predeterminado del hipervínculo es el color de énfasis del sistema. Puede establecer la propiedad Foreground para invalidar esto.

Obtener el código de ejemplo