HipervínculosHyperlinks

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.Hyperlinks navigate the user to another part of the app, to another app, or launch a specific uniform resource identifier (URI) using a separate browser app. Existen dos formas mediante las que se puede agregar un hipervínculo a una aplicación XAML: el elemento de texto Hyperlink y el control HyperlinkButton.There are two ways that you can add a hyperlink to a XAML app: the Hyperlink text element and HyperlinkButton control.

API de plataforma: Elemento de texto Hyperlink, Control HyperlinkButtonPlatform APIs: Hyperlink text element, HyperlinkButton control

Botón de hipervínculo

¿Es este el control adecuado?Is this the right control?

Usa un hipervínculo cuando necesites texto que responda cuando se seleccione y dirija al usuario a más información sobre el texto que se ha seleccionado.Use a hyperlink when you need text that responds when selected and navigates the user to more information about the text that was selected.

Elige el tipo correcto de hipervínculo según tus necesidades:Choose the right type of hyperlink based on your needs:

  • Usa un elemento Hyperlink incluido dentro de un control de texto.Use an inline Hyperlink text element inside of a text control. Un elemento Hyperlink fluye con otros elementos de texto y se puede usar en cualquier elemento InlineCollection.A Hyperlink element flows with other text elements and you can use it in any InlineCollection. Usa un hipervínculo de texto si quieres ajuste de texto automático y no necesitas obligatoriamente un destino de gran alcance.Use a text hyperlink if you want automatic text wrapping and don't necessarily need a large hit target. El texto del hipervínculo puede ser pequeño y difícil de activar, especialmente con la entrada táctil.Hyperlink text can be small and difficult to target, especially for touch.
  • Usa un elemento HyperlinkButton para los hipervínculos independientes.Use a HyperlinkButton for stand-alone hyperlinks. Un elemento HyperlinkButton es un control Button especializado que puedes usar en cualquier lugar en que usarías un elemento Button.A HyperlinkButton is a specialized Button control that you can use anywhere that you would use a Button.
  • Usa un elemento HyperlinkButton con una imagen como su contenido para crear una imagen interactiva.Use a HyperlinkButton with an Image as its content to make a clickable image.

EjemplosExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Si tienes instalada la aplicación Galería de controles XAML, haz clic aquí para abrirla y ver HyperlinkButton en acción.If you have the XAML Controls Gallery app installed, click here to open the app and see the HyperlinkButton in action.

En este ejemplo se muestra cómo usar un elemento de texto Hyperlink dentro de un bloque TextBlock.This example shows how to use a Hyperlink text element inside of a 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:The hyperlink appears inline and flows with the surrounding text:

Ejemplo de un hipervínculo como elemento de texto

Sugerencia  Cuando uses una clase Hyperlink en un control de texto con otros elementos de texto en XAML, coloca el contenido en un contenedorSpan y aplica el atributo xml:space="preserve" a dicho contenedor para mantener el espacio en blanco entre Hyperlink y otros elementos.Tip  When you use a Hyperlink in a text control with other text elements in XAML, place the content in a Span container and apply the xml:space="preserve" attribute to the Span to keep the white space between the Hyperlink and other elements.

Crear un elemento HyperlinkButtonCreate a HyperlinkButton

Aquí se muestra cómo usar un elemento HyperlinkButton, tanto con texto como con una imagen.Here's how to use a HyperlinkButton, both with text and with an image.

<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.The hyperlink buttons with text content appear as marked-up text. La imagen del logotipo de Contoso también es un hipervínculo interactivo:The Contoso logo image is also a clickable hyperlink:

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.This example shows how to create a HyperlinkButton in code.

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

Controlar la navegaciónHandle navigation

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.For both kinds of hyperlinks, you handle navigation the same way; you can set the NavigateUri property, or handle the Click event.

Navegación a un identificador URINavigate to a URI

Para usar el hipervínculo para navegar a un URI, establece la propiedad NavigateUri.To use the hyperlink to navigate to a URI, set the NavigateUri property. Cuando un usuario hace clic en el hipervínculo o lo pulsa, el URI especificado se abre en el explorador predeterminado.When a user clicks or taps the hyperlink, the specified URI opens in the default browser. El explorador predeterminado se ejecuta en un proceso independiente de la aplicación.The default browser runs in a separate process from your app.

Nota

Un identificador URI se representa mediante la clase Windows.Foundation.Uri.A URI is represented by the Windows.Foundation.Uri class. Cuando se programa con .NET, esta clase está oculta y se debe usar la System.Uri.When programming with .NET, this class is hidden and you should use the System.Uri class. Para más información, consulta las páginas de referencia de estas clases.For more info, see the reference pages for these classes.

No es necesario usar esquemas http: o https: .You don't have to use http: or https: schemes. 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.You can use schemes such as ms-appx:, ms-appdata:, or ms-resources:, if there's resource content at these locations that's appropriate to load in a browser. Sin embargo, el esquema file: se bloquea específicamente.However, the file: scheme is specifically blocked. Para más información, consulta Esquemas de URI.For more info, see URI schemes.

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.When a user clicks the hyperlink, the value of the NavigateUri property is passed to a system handler for URI types and schemes. El sistema inicia entonces la aplicación que esté registrada para el esquema del URI proporcionado para NavigateUri.The system then launches the app that is registered for the scheme of the URI provided for 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.If you don't want the hyperlink to load content in a default Web browser (and don't want a browser to appear), then don't set a value for NavigateUri. En su lugar, controla el evento Click y escribe código que haga lo que quieres.Instead, handle the Click event, and write code that does what you want.

Control del evento ClickHandle the Click event

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.Use the Click event for actions other than launching a URI in a browser, such as navigation within the app. 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.For example, if you want to load a new app page rather than opening a browser, call a Frame.Navigate method within your Click event handler to navigate to the new app page. 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.If you want an external, absolute URI to load within a WebView control that also exists in your app, call WebView.Navigate as part of your Click handler logic.

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.You don't typically handle the Click event as well as specifying a NavigateUri value, as these represent two different ways of using the hyperlink element. 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.If your intent is to open the URI in the default browser, and you have specified a value for NavigateUri, don't handle the Click event. Por el contrario, si controlas el evento Click, no especifiques un valor de NavigateUri.Conversely, if you handle the Click event, don't specify a 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.There's nothing you can do within the Click event handler to prevent the default browser from loading any valid target specified for NavigateUri; that action takes place automatically (asynchronously) when the hyperlink is activated and can't be canceled from within the Click event handler.

De manera predeterminada, los hipervínculos aparecen subrayados.By default, hyperlinks are underlined. Este subrayado es importante porque ayuda a cumplir los requisitos de accesibilidad.This underline is important because it helps meet accessibility requirements. Los usuarios daltónicos se ayudan del subrayado para distinguir entre hipervínculos y otros tipos de texto.Color-blind users use the underline to distinguish between hyperlinks and other text. 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.If you disable underlines, you should consider adding some other type of formatting difference to distinguish hyperlinks from other text, such as FontWeight or FontStyle.

Elementos de texto HyperlinkHyperlink text elements

Puedes establecer la propiedad UnderlineStyle para deshabilitar el subrayado.You can set the UnderlineStyle property to disable the underline. Si lo haces, considera la posibilidad de usar FontWeight o FontStyle para diferenciar el texto de los vínculos.If you do, consider using FontWeight or FontStyle to differentiate your link text.

HyperlinkButtonHyperlinkButton

De manera predeterminada, el elemento HyperlinkButton aparece como texto subrayado cuando se establece una cadena como el valor de la propiedad Content.By default, the HyperlinkButton appears as underlined text when you set a string as the value for the Content property.

El texto no aparece subrayado en los siguientes casos:The text does not appear underlined in the following cases:

  • Se establece un bloque TextBlock como el valor para la propiedad Content y se establece la propiedad Text en el bloque TextBlock.You set a TextBlock as the value for the Content property, and set the Text property on the TextBlock.
  • Se modifica la plantilla del elemento HyperlinkButton y se cambia el nombre de la parte de la plantilla ContentPresenter.You re-template the HyperlinkButton and change the name of the ContentPresenter template part.

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.If you need a button that appears as non-underlined text, consider using a standard Button control and applying the built-in TextBlockButtonStyle system resource to its Style property.

Esta sección se aplica únicamente al elemento de texto Hyperlink, no al control HyperlinkButton.This section applies only to the Hyperlink text element, not to the HyperlinkButton control.

Eventos de entradaInput events

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.Because a Hyperlink is not a UIElement, it does not have the set of UI element input events such as Tapped, PointerPressed, and so on. 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.Instead, a Hyperlink has its own Click event, plus the implicit behavior of the system loading any URI specified as the NavigateUri. El sistema controla todas las acciones de entrada que deberían invocar las acciones Hyperlink y genera como respuesta el evento Click.The system handles all input actions that should invoke the Hyperlink actions and raises the Click event in response.

ContenidoContent

El elemento Hyperlink tiene restricciones respecto al contenido que puede existir en su colección de elementos Inline.Hyperlink has restrictions on the content that can exist in its Inlines collection. En concreto, un elemento Hyperlink solo permite la clase Run y otros tipos de Span que no sean otro elemento Hyperlink.Specifically, a Hyperlink only permits Run and other Span types that aren't another Hyperlink. InlineUIContainer no puede estar en la colección de elementos Inlines de un elemento Hyperlink.InlineUIContainer can't be in the Inlines collection of a 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.Attempting to add restricted content throws an invalid argument exception or XAML parse exception.

Comportamiento de Hyperlink y el tema y estiloHyperlink and theme/style behavior

Hyperlink no hereda de Control, de modo que no tiene una propiedad Style ni una Template.Hyperlink doesn't inherit from Control, so it doesn't have a Style property or a 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.You can edit the properties that are inherited from TextElement, such as Foreground or FontFamily, to change the appearance of a Hyperlink, but you can't use a common style or template to apply changes. 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.Instead of using a template, consider using common resources for values of Hyperlink properties to provide consistency. Algunas propiedades de Hyperlink usan valores predeterminados de un valor de extensión de marcado {ThemeResource} que proporciona el sistema.Some properties of Hyperlink use defaults from a {ThemeResource} markup extension value provided by the system. 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.This enables the Hyperlink appearance to switch in appropriate ways when the user changes the system theme at run-time.

El color predeterminado del hipervínculo es el color de énfasis del sistema.The default color of the hyperlink is the accent color of the system. Puedes establecer la propiedad Foreground para reemplazar este comportamiento.You can set the Foreground property to override this.

RecomendacionesRecommendations

  • Usa los hipervínculos solo para la navegación; no los uses para otras acciones.Only use hyperlinks for navigation; don't use them for other actions.
  • Usa el estilo Body de la tabla de tipos para los hipervínculos basados en texto.Use the Body style from the type ramp for text-based hyperlinks. Obtén información acerca de las fuentes y la tabla de tipos de Windows 10.Read about fonts and the Windows 10 type ramp.
  • Mantén los hipervínculos discretos y suficientemente separados para que el usuario pueda diferenciarlos y seleccionarlos con facilidad.Keep discrete hyperlinks far enough apart so that the user can differentiate between them and has an easy time selecting each one.
  • Agrega información sobre herramientas a los hipervínculos que indican dónde se dirigirá al usuario.Add tooltips to hyperlinks that indicate to where the user will be directed. 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.If the user will be directed to an external site, include the top-level domain name inside the tooltip, and style the text with a secondary font color.

Obtención del código de ejemploGet the sample code

Para desarrolladores (XAML)For developers (XAML)