Совет по обучению
Совет по обучению является частично перманентным и многофункциональным всплывающим элементом, который предоставляет контекстную информацию. Он часто используется для информирования, напоминания пользователям о важных и новых функциях, которые могут улучшить их взаимодействие, а также для обучения пользователей.
Совет по обучению может иметь функцию исчезновения или требовать явного действия для закрытия. Совет по обучению может выбирать определенный элемент пользовательского интерфейса с его конечным фрагментом или же использоваться без конечного фрагмента или цели.
Выбор правильного элемента управления
Используйте элемент управления TeachingTip, чтобы обратить внимание пользователя на новые или важные обновления или функции, напомнить ему о второстепенных параметрах, которые улучшат их взаимодействие, или обучить пользователя выполнению задач.
Поскольку совет по обучению является временным элементом, не рекомендуется использовать его, чтобы запрашивать пользователей по поводу ошибок или важных изменений состояния.
Рекомендации
- Советы являются временными и не должны содержать информацию или параметры, важные для работы приложения.
- Старайтесь избегать слишком частого отображения советов по обучению. Советы по обучению наиболее востребованные для получения отдельного внимания, когда они располагаются на протяжении длительного времени или в нескольких сеансах.
- Формируйте советы кратко, а их тему понятно. Исследование показало, что пользователи читают в среднем только 3–5 слов и воспринимают только 2–3 слова перед тем, как взаимодействовать с советом.
- Доступность геймпада для совета по обучению не гарантируется. Приложения, которые определяют ввод с геймпада, см. в разделе Взаимодействие с помощью геймпада и пульта дистанционного управления. Рекомендуется проверять доступность геймпада для каждого совета по обучению, используя все возможные конфигурации для пользовательского интерфейса приложения.
- При включении совета по обучению для перехода корневого элемента XAML мы рекомендуем включить свойство IsLightDismissEnabled и задать режим PreferredPlacement как можно ближе к центру корневого элемента XAML.
Изменение конфигурации открытого совета по обучению
Некоторое содержимое и свойства можно изменить во время того, как совет по обучению открыт. Эти изменения вступят в силу немедленно. Другое содержимое и свойства, такие как свойство значка, кнопки "Действие" и "Закрыть" и повторная настройка между функцией исчезновения и явным закрытием, требуют закрыть совет по обучению и повторно открыть его, чтобы изменения этих свойств вступили в силу. Обратите внимание, что изменение способа исчезновения с ручной настройки на автоматическое исчезновение во время того, как совет по обучению открыт, произведет к тому, что кнопка "Закрыть" будет удалена перед включением автоматического исчезновения и совет на экране может зависнуть.
Примеры
Совет по обучению может содержать несколько конфигураций, в том числе следующие конфигурации, которые следует отметить.
Совет по обучению может выбирать определенный элемент пользовательского интерфейса с его конечным фрагментом, чтобы повысить контекстную ясность информации о том, что он представляет.
Если представленная информация не относится к определенному элементу пользовательского интерфейса, нецелевой совет по обучению можно создать путем удаления конечного фрагмента.
Тогда закрывать совет по обучению пользователю необходимо с помощью кнопки "X" в верхнем углу или кнопки "Закрыть" в нижней части экрана. Совет по обучению также может содержать функцию исчезновения. В этом случае кнопка "Закрыть"отсутствует и вместо этого совет по обучению закрывается, когда пользователь прокручивает другие элементы приложения или взаимодействует с ними. Благодаря этому способу советы с функцией исчезновения являются лучшим решением, когда совет нужно поместить в область с возможностью прокрутки.
UWP и WinUI 2
Важно!
Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.
В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.
Для обучения для приложений UWP требуется библиотека пользовательского интерфейса Windows 2. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. API для этого элемента управления существуют в пространстве имен Microsoft.UI.Xaml.Controls .
- Класс WinUI 2 Apis:TeachingTip
- Откройте приложение "Коллекция WinUI 2" и просмотрите подсказку TeachingTip в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.
Чтобы использовать код из этой статьи с WinUI 2, используйте псевдоним в XAML (мы используем muxc) для представления API библиотеки пользовательского интерфейса Windows, включенных в проект. Дополнительные сведения см. в статье Начало работы с WinUI 2 .
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:TeachingTip />
Создание совета по обучению
- Важные API:Класс TeachingTip
Приложение "Коллекция WinUI 3" содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или исходный код на сайте GitHub
Ниже приведен XAML для элемента управления целевого совета по обучению, который демонстрирует стандартный вид TeachingTip с названием и субтитром. Обратите внимание, что совет по обучению может отображаться в любом месте дерева элементов или кода за его пределами. В поданном ниже примере он расположен в ResourceDictionary.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Save automatically"
Subtitle="When you save your file to OneDrive, we save your changes as you go - so you never have to.">
</TeachingTip>
</Button.Resources>
</Button>
public MainPage()
{
this.InitializeComponent();
if(!HaveExplainedAutoSave())
{
AutoSaveTip.IsOpen = true;
SetHaveExplainedAutoSave();
}
}
Здесь представлен результат при отображении страницы, которая содержит кнопку и совет по обучению.
В приведенном выше примере для указания заголовка и подзаголовка совета по обучению используются свойства Title и Subtitle. Свойству Target присваивается значение SaveButton, чтобы визуально связать его с кнопкой. Чтобы отобразить совет по обучению, свойству IsOpen присваивается значение true.
Нецелевые советы
Не все советы являются связанными с элементом на экране. В таких случаях целевой объект не задается. Вместо этого советы по обучению отображаются относительно краев корневого элемента XAML. Но совет по обучению может содержать удаленный конечный фрагмент, сохраняя размещение относительно элемента пользовательского интерфейса, если задано свойство TailVisibility со значением Collapsed. Следующий пример совета по обучению является нецелевым советом по обучению.
<Button x:Name="SaveButton" Content="Save" />
<TeachingTip x:Name="AutoSaveTip"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to.">
</TeachingTip>
Обратите внимание, что в этом примере TeachingTip содержится в дереве элементов, а не в ResourceDictionary или в коде программной части. Это не влияет на поведение; TeachingTip отображается только при открытии и не занимает место в структуре хранилища.
Предпочтительное размещение
Совет по обучению выполняет репликацию способа расположения всплывающего элемента FlyoutPlacementMode со свойством PreferredPlacement. Стандартный режим размещения попробует разместить целевой совет по обучению над его целевым объектом, а нецелевой совет по обучению — по центру в нижней части корневого элемента XAML. Если режим предпочтительного размещения не оставит места для представления совета по обучению, как и в случае со всплывающим элементом, автоматически будет выбран другой режим размещения.
Приложения, которые определяют ввод с геймпада, см. в разделе Взаимодействие с помощью геймпада и пульта дистанционного управления. Рекомендуется проверять доступность геймпада для каждого совета по обучению, используя все возможные конфигурации для пользовательского интерфейса приложения.
Целевой совет по обучению, для которого в свойстве PreferredPlacement задано значение BottomLeft, отобразится с конечным блоком по центру в нижней части экрана его целевого объекта с основным текстом совета по обучению, сдвинутым влево.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
PreferredPlacement="BottomLeft">
</TeachingTip>
</Button.Resources>
</Button>
Нецелевой совет по обучению, для которого в свойстве PreferredPlacement задано значение BottomLeft, отобразится в левом нижнем углу корневого элемента XAML.
<Button x:Name="SaveButton" Content="Save" />
<TeachingTip x:Name="AutoSaveTip"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
PreferredPlacement="BottomLeft">
</TeachingTip>
На схеме ниже показан результат всех 13 режимов PreferredPlacement, которые можно установить для целевых советов по обучению.
На схеме ниже показан результат всех 13 режимов PreferredPlacement, которые можно установить для нецелевых советов по обучению.
Добавление полей размещения
С помощью свойства PlacementMargin вы можете настроить, насколько далеко расположен совет по обучению от его целевого объекта, а нецелевой совет по обучению — от краев корневого элемента XAML. Как и свойство Margin, свойство PlacementMargin имеет четыре значения — слева, справа, сверху и снизу. Таким образом, используются только соответствующие значения. Например, PlacementMargin.Left применяется, когда совет размещается слева от целевого объекта или у левого края корневого элемента XAML.
В следующем примере показан нецелевой совет с PlacementMargin влево/верх или вправо/низ со значением 80 для всех.
<Button x:Name="SaveButton" Content="Save" />
<TeachingTip x:Name="AutoSaveTip"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
PreferredPlacement="BottomLeft"
PlacementMargin="80">
</TeachingTip>
Добавление содержимого
Содержимое в совет по обучению можно добавить, используя свойство Content. Если содержимое, которое нужно отобразить, превышает размер дозволенного для совета по обучению, автоматически будет включено полосу прокрутки, чтобы позволить пользователю прокрутить содержимое области.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to.">
<StackPanel>
<CheckBox x:Name="HideTipsCheckBox" Content="Don't show tips at start up" IsChecked="{x:Bind HidingTips, Mode=TwoWay}" />
<TextBlock>You can change your tip preferences in <Hyperlink NavigateUri="app:/item/SettingsPage">Settings</Hyperlink> if you change your mind.</TextBlock>
</StackPanel>
</TeachingTip>
</Button.Resources>
</Button>
Добавление кнопок
По умолчанию стандартная кнопка "X", то есть "Закрыть", отображается рядом с заголовком совета по обучению. Кнопку закрытия можно настроить с помощью свойства CloseButtonContent. В этом случае кнопка перемещается в нижнюю часть совета по обучению.
Примечание. Для советов с функцией исчезновения кнопка "Закрыть" не будет отображаться
Кнопку настраиваемого действия можно добавить, задав свойство ActionButtonContent (и при необходимости свойства ActionButtonCommand и ActionButtonCommandParameter).
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
ActionButtonContent="Disable"
ActionButtonCommand="{x:Bind DisableAutoSaveCommand}"
CloseButtonContent="Got it!">
<StackPanel>
<CheckBox x:Name="HideTipsCheckBox" Content="Don't show tips at start up" IsChecked="{x:Bind HidingTips, Mode=TwoWay}" />
<TextBlock>You can change your tip preferences in <Hyperlink NavigateUri="app:/item/SettingsPage">Settings</Hyperlink> if you change your mind.</TextBlock>
</StackPanel>
</TeachingTip>
</Button.Resources>
</Button>
Содержимое главного имиджевого баннера
Содержимое во всю ширину можно добавить к совету по обучению, задав свойство HeroContent. Содержимое главного имиджевого баннера можно расположить в верхней или нижней части совета по обучению, задав свойство HeroContentPlacement.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to.">
<TeachingTip.HeroContent>
<Image Source="Assets/cloud.png" />
</TeachingTip.HeroContent>
</TeachingTip>
</Button.Resources>
</Button>
Добавление значка
Рядом с заголовком и субтитром можно добавить значок, используя свойство IconSource. Рекомендуемые размеры значка — 16 пикселей, 24 пикселя и 32 пикселя.
<Button x:Name="SaveButton" Content="Save">
<Button.Resources>
<TeachingTip x:Name="AutoSaveTip"
Target="{x:Bind SaveButton}"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
<TeachingTip.IconSource>
<SymbolIconSource Symbol="Save" />
</TeachingTip.IconSource>
</TeachingTip>
</Button.Resources>
</Button>
Включение функции исчезновения
По умолчанию функция исчезновения отключена, но ее можно включить, указав свойство IsLightDismissEnabled, чтобы совет по обучению исчезал, например, при прокручивании пользователем других элементов приложения или взаимодействии с ними. Благодаря этому способу советы с функцией исчезновения являются лучшим решением, когда совет нужно поместить в область с возможностью прокрутки.
Кнопка "Закрыть" будет автоматически удалена с совета по обучению с функцией исчезновения, чтобы указать пользователю на автоматическое исчезновение совета.
<Button x:Name="SaveButton" Content="Save" />
<TeachingTip x:Name="AutoSaveTip"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
IsLightDismissEnabled="True">
</TeachingTip>
Переход границ корневого элемента XAML
Начиная с Windows 10 версии 1903 (сборка 18362), совет по обучению может переходить через границы корневого элемента XAML и экрана. Для этого нужно задать свойство ShouldConstrainToRootBounds. Если это свойство включено, совет по обучению не будет оставаться в пределах корневого элемента XAML или экрана и всегда будет позиционирован в заданном режиме PreferredPlacement. Мы рекомендуем включить свойство IsLightDismissEnabled и задать режим PreferredPlacement как можно ближе к центру корневого элемента XAML, чтобы обеспечить максимальное удобство для пользователей.
В более ранних версиях Windows это свойство не учитывается и совет по обучению всегда остается в пределах границ корневого элемента XAML.
<Button x:Name="SaveButton" Content="Save" />
<TeachingTip x:Name="AutoSaveTip"
Title="Saving automatically"
Subtitle="We save your changes as you go - so you never have to."
PreferredPlacement="BottomRight"
PlacementMargin="-80,-50,0,0"
ShouldConstrainToRootBounds="False">
</TeachingTip>
Отмена и отложение закрытия
Событие Closing можно использовать, чтобы отменить и (или) отложить закрытые совета по обучению. Функцию можно использовать, чтобы содержать совет по обучению открытым или дождаться действия или "оживления" пользователя. При отмене закрытия совета по обучению IsOpen вернется к значению true, но, тем не менее, будет оставаться false во время отложения. Можно также отменить программное закрытие.
Примечание
Если полное отображение совета по обучению не поддерживается никаким параметром размещения, совет по обучению будет переработан с помощью жизненного цикла его события, чтобы принудительно его закрыть, вместо того чтобы отображать без наличия доступной кнопки "Закрыть". Если приложение отменяет событие закрытия, совет по обучению может оставаться открытым при отсутствии доступной кнопки "Закрыть".
<TeachingTip x:Name="EnableNewSettingsTip"
Title="New ways to protect your privacy!"
Subtitle="Please close this tip and review our updated privacy policy and privacy settings."
Closing="OnTipClosing">
</TeachingTip>
private void OnTipClosing(muxc.TeachingTip sender, muxc.TeachingTipClosingEventArgs args)
{
if (args.Reason == muxc.TeachingTipCloseReason.CloseButton)
{
using(args.GetDeferral())
{
bool success = UpdateUserSettings(User thisUsersID);
if(!success)
{
// We were not able to update the settings!
// Don't close the tip and display the reason why.
args.Cancel = true;
ShowLastErrorMessage();
}
}
}
}
Похожие статьи
Windows developer
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по