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

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

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

Это правильный контроль?

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

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

Recommendations

Советы являются временными и не должны содержать информацию или параметры, важные для работы приложения.
Старайтесь избегать слишком частого отображения советов по обучению. Советам по обучению, скорее всего, уделяется индивидуальное внимание, когда они распределяются на протяжении длинных сессий или нескольких сеансов.
Формируйте советы кратко, а тема была понятна. Исследование показало, что пользователи читают в среднем только 3–5 слов и воспринимают только 2–3 слова перед тем, как взаимодействовать с советом.
Доступность геймпада для совета по обучению не гарантируется. Приложения, которые определяют ввод с геймпада, см. в разделе Взаимодействие с помощью геймпада и пульта дистанционного управления. Рекомендуется проверять доступность геймпада для каждого совета по обучению, используя все возможные конфигурации для пользовательского интерфейса приложения.
При включении совета по обучению вне корневого элемента XAML рекомендуется также включить свойство IsLightDismissEnabled и установить режим PreferredPlacement максимально близко к центру корневого элемента XAML.

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

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

Примеры

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

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

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

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

Пример приложения с подсказкой в правом нижнем углу. Название подсказки гласит

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

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

Создать подсказку для преподавания

Важные API:класс TeachingTip

Откройте приложение коллекции WinUI 3 и посмотрите учебную подсказку в действии

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из 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>

Включить легкое закрытие

По умолчанию функция Light-dismiss отключена, но ее можно включить, установив свойство 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 снова станет истинным, однако он останется ложным во время отсрочки. Можно также отменить программное закрытие.

Замечание

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

<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();
            }
        }
    }
}

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

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-03-11