Совет по обучению

Статья
07/13/2023

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

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

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

Используйте элемент управления TeachingTip, чтобы обратить внимание пользователя на новые или важные обновления или функции, напомнить ему о второстепенных параметрах, которые улучшат их взаимодействие, или обучить пользователя выполнению задач.

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

Примеры

Совет по обучению может содержать несколько конфигураций, в том числе следующие конфигурации, которые следует отметить.

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

Пример приложения с советом по обучению, предназначенным для кнопки сохранения. Заголовок подсказки считывает

Если представленная информация не относится к определенному элементу пользовательского интерфейса, нецелевой совет по обучению можно создать путем удаления конечного фрагмента.

Пример приложения с советом по обучению в правом нижнем углу. Заголовок подсказки считывает

Тогда закрывать совет по обучению пользователю необходимо с помощью кнопки "X" в верхнем углу или кнопки "Закрыть" в нижней части экрана. Совет по обучению также может содержать функцию исчезновения. В этом случае кнопка "Закрыть"отсутствует и вместо этого совет по обучению закрывается, когда пользователь прокручивает другие элементы приложения или взаимодействует с ними. Благодаря этому способу советы с функцией исчезновения являются лучшим решением, когда совет нужно поместить в область с возможностью прокрутки.

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

UWP и WinUI 2

Внимание

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

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

Для приложений UWP для обучения требуется WinUI 2. Дополнительные сведения, включая инструкции по установке, см. в статье WinUI. API для этого элемента управления существуют в пространстве имен Microsoft.UI.Xaml.Controls .

Apis WinUI 2: класс TeachingTip
Откройте приложение коллекции WinUI 2 и просмотрите подсказку обучения в действии. Приложения из коллекции 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 включает интерактивные примеры большинства элементов управления, функций и функций 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();
            }
        }
    }
}

Диалоговые окна и всплывающие элементы

Поделиться через

Совет по обучению

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

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

Изменение конфигурации открытого совета по обучению

Примеры

UWP и WinUI 2

Создание совета по обучению

Нецелевые советы

Предпочтительное размещение

Добавление полей размещения

Добавление содержимого

Добавление кнопок

Содержимое главного имиджевого баннера

Добавление значка

Включение функции исчезновения

Переход границ корневого элемента XAML

Отмена и отложение закрытия

Дополнительные ресурсы

Поделиться через

Совет по обучению

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

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

Изменение конфигурации открытого совета по обучению

Примеры

UWP и WinUI 2

Создание совета по обучению

Нецелевые советы

Предпочтительное размещение

Добавление полей размещения

Добавление содержимого

Добавление кнопок

Содержимое главного имиджевого баннера

Добавление значка

Включение функции исчезновения

Переход границ корневого элемента XAML

Отмена и отложение закрытия

Связанные статьи

Дополнительные ресурсы