Гиперссылки

  • Статья

Гиперссылки используются для перехода в другую часть приложения, в другое приложение либо по указанному универсальному коду ресурса (URI) в отдельном приложении браузера. Существует два способа добавления гиперссылки в приложение XAML: текстовый элемент гиперссылки и элемент управления HyperlinkButton.

Кнопка с гиперссылкой

Выбор правильного элемента управления

Используйте гиперссылку, если вам нужен текст, который отвечает при нажатии, и переход пользователя к дополнительным сведениям о нажатом тексте.

Выбирайте необходимый тип гиперссылки в зависимости от своих потребностей.

  • Используйте текстовый элемент встроенной гиперссылки внутри элемента управления текстом. Элемент гиперссылки сочетается с другими текстовыми элементами, и его можно использовать в любом InlineCollection. Используйте текстовую гиперссылку, если нужно, чтобы обтекание текстом осуществлялось автоматически, и если нет необходимости в большом элементе управления. Текст гиперссылки может быть небольшим, и на него бывает трудно попасть, особенно на устройствах с сенсорным экраном.
  • Для отдельных гиперссылок можно использовать HyperlinkButton. HyperlinkButton — это специализированный элемент управления "кнопка", который можно использовать везде, где вы бы добавили кнопку.
  • Используйте элемент HyperlinkButton с Image в качестве содержимого этого элемента, чтобы создать гиперизображение.

Рекомендации

  • Используйте гиперссылки только для навигации. Не используйте их для других действий.
  • Используйте стиль текста из набора шрифтов для гиперссылок на основе текста. Ознакомьтесь со шрифтами и набором шрифтов Windows.
  • Располагайте отдельные гиперссылки на значительном расстоянии друг от друга, чтобы пользователю было удобно отличать их и делать выбор между ними.
  • Добавляйте к гиперссылкам подсказки, которые информируют о том, куда будет перенаправлен пользователь. Если пользователь будет перенаправляться на внешний сайт, включите в подсказку указание доменного имени верхнего уровня и выделите текст с помощью дополнительного цвета шрифта.

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

Этот раздел содержит сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

Создание текстового элемента гиперссылки

В этом примере продемонстрировано использование текстового элемента гиперссылки в 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>

Гиперссылка отображается внутри текстового блока, окружающий текст обтекает ее.

Пример гиперссылки в виде текстового элемента

Совет

При использовании гиперссылки в текстовом элементе управления с другими текстовыми элементами в XAML поместите содержимое в контейнер Span и примените xml:space="preserve" атрибут к Span, чтобы сохранить пробелы между гиперссылкой и другими элементами.

Создание HyperlinkButton

Откройте приложение коллекции WinUI 3 и просмотрите гиперссылки в действии.

Приложение коллекции WinUI 3 содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

Далее приведен пример использования HyperlinkButton, как с текстом, так и с изображением.

<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>

Кнопки-гиперссылки с текстовым содержимым отображаются в виде размеченного текста. Изображение логотипа Contoso также является доступной для нажатия гиперссылкой.

Пример гиперссылки в виде кнопки

Этот пример демонстрирует, как создать HyperlinkButton в коде.

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

Обработка навигации

Для обоих типов гиперссылок навигация обрабатывается одним способом; вы можете установить свойство NavigateUri или обработать событие Click.

Чтобы использовать гиперссылку для перехода к URI, задайте свойство NavigateUri. Когда пользователь нажимает на гиперссылку, указанный URI открывается в браузере по умолчанию. Браузер по умолчанию запускается в виде отдельного процесса из приложения.

Примечание

Идентификатор URI представлен классом Windows.Foundation.Uri. При программировании с помощью .NET этот класс скрывается. Вам нужно использовать класс System.Uri. См. подробнее на страницах справочной документации по этим классам.

Использовать схемы http: или https: не обязательно. Можно использовать такие схемы, как ms-appx:, ms-appdata: или ms-resources:, если содержимое ресурса в этих расположениях подходит для загрузки в браузере. При этом схема file: блокируется. Подробнее см. в разделе Схемы URI.

Когда пользователь нажимает на гиперссылку, значение свойства NavigateUri передается в обработчик системы для получения типов и схем URI. После этого система запускает приложение, которое зарегистрировано для схемы URI, предоставляемой для NavigateUri.

Если вы не хотите, чтобы гиперссылка загружала содержимое в браузере по умолчанию (и не хотите, чтобы отображался браузер), не устанавливайте значение для NavigateUri. Вместо этого обработайте событие нажатия и напишите код, обеспечивающий ваш желаемый результат.

Обработка события Click

Используйте событие Click для действий, отличных от запуска URI в браузере, например для навигации внутри приложения. Например, чтобы загрузить новую страницу приложения вместо открытия браузера, вызовите метод Frame.Navigate в обработчике события Click для перехода к новой странице приложения. Чтобы внешний абсолютный URI загружался в элементе управления WebView, который также присутствует в приложении, вызовите WebView.Navigate как часть логики обработчика нажатия.

События Click обычно не обрабатываются, если указывается значение NavigateUri, поскольку они представляют два разных способа использования элемента гиперссылки. Чтобы открыть URI в браузере по умолчанию, если указано значение для NavigateUri, не обрабатывайте событие Click. И наоборот, если нужно обработать событие Click, не задавайте NavigateUri.

В обработчике события Click невозможно предотвратить загрузку какого-либо допустимого целевого элемента, указанного для NavigateUri, в браузере по умолчанию; это действие выполняется автоматически (асинхронно) при активации гиперссылки, и его нельзя отменить в обработчике события Click.

По умолчанию гиперссылки подчеркиваются. Подчеркивание имеет большое значение, поскольку это помогает удовлетворить требованиям специальных возможностей. Страдающие дальтонизмом пользователи по подчеркиванию отличают гиперссылки от другого текста. Если вы хотите отключить подчеркивание, рекомендуется добавить другой тип отличительного форматирования, чтобы гиперссылка выделялась на фоне остального текста, например это может быть FontWeight или FontStyle.

Текстовые элементы гиперссылки

Чтобы отключить подчеркивание, можно задать свойство UnderlineStyle. В таком случае рассмотрите возможность использования FontWeight или FontStyle для выделения текста ссылки.

HyperlinkButton

По умолчанию элемент HyperlinkButton отображается как подчеркнутый текст, если для значения свойства Content задать строку.

Текст отображается без подчеркивания в следующих случаях.

  • В качестве значения для свойства Content указано значение TextBlock, а в TextBlock задано свойство Text.
  • Шаблон HyperlinkButton и имя части шаблона ContentPresenter изменились.

Если необходимо, чтобы кнопка отображалась как текст без подчеркивания, воспользуйтесь стандартным элементом управления Button и примените встроенный ресурс системы TextBlockButtonStyle к его свойству Style.

Примечания по использованию текстового элемента гиперссылки

Сведения, приведенные в этом разделе, относятся только к текстовым элементам гиперссылки и не относятся к элементу управления HyperlinkButton.

События ввода

Поскольку гиперссылки не являются элементами UIElement, они не содержат набор событий ввода элементов пользовательского интерфейса, например Tapped, PointerPressed и т.д. Вместо этого гиперссылки содержат собственные события Click, а также неявно указанное поведение системы при загрузке какого-либо URI как элемента NavigateUri. Система обрабатывает все действия ввода, которые должны вызывать действия Hyperlink, и вызывает в ответ событие Click.

Содержимое

Гиперссылка имеет ограничения относительно содержимого, которое существует в его коллекции Inlines. В частности, гиперссылка разрешает только Run и другие типы Span, которые не являются другим элементом Hyperlink. InlineUIContainer не может находиться в коллекции Inlines гиперссылки. Попытка добавления содержимого с ограничениями вызовет исключение недопустимого аргумента или исключение анализа XAML.

Гиперссылка не наследуется из Control, поэтому она не содержит свойства Style или Template. Можно редактировать свойства, унаследованные из TextElement, такие как Foreground или FontFamily, чтобы изменить внешний вид гиперссылки, но нельзя использовать общий стиль или шаблон, чтобы применить изменения. Вместо шаблона используйте общие ресурсы для значений свойств гиперссылки, чтобы обеспечить согласованность. Некоторые свойства гиперссылки используют значения по умолчанию из значения расширения разметки {ThemeResource}, предоставляемого системой. Это позволяет изменять внешний вид гиперссылки, если пользователь изменяет системную тему во время выполнения.

По умолчанию для цвета гиперссылки используется цвет элементов системы. Для переопределения этой настройки можно использовать свойство Foreground.

Получение примера кода