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

Значок сведений

  • Статья

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

Он info badge встроен в XAML navigation view, но также может быть помещен в виде автономного элемента в дереве XAML, что позволяет поместить его в любой info badge элемент управления или элемент пользовательского интерфейса выбранного элемента. Если вы используете где-то другое info badge navigation view, вы несете ответственность за программное определение того, когда показывать и закрывать info badge, а также место размещения info badge.

Пример InfoBadge в NavigationView

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

info badge Следует использовать, если вы хотите привлечь внимание пользователя к определенной области приложения непреднамеренно. info badge Когда появится, оно предназначено для привлечения фокуса к области, а затем позволить пользователю вернуться в свой поток, давая им выбор того, следует ли изучить подробности того, почему info badge появился. Значки сведений должны представлять только сообщения, которые являются закрытыми и неизменяемыми, — info badge должны иметь определенные правила, касающиеся того, когда он может отображаться, исчезать и изменяться.

Примеры соответствующего info badge использования:

  • Чтобы указать, что появились новые сообщения.
  • Чтобы указать, что новые статьи доступны для чтения.
  • Чтобы указать, что на странице доступны новые параметры.
  • Чтобы указать, что на определенной странице может возникнуть проблема с элементом, который не блокирует работу приложения.

Когда лучше использовать другой элемент управления?

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

Примеры недопустимого info badge использования:

  • Чтобы указать срочный вопрос на странице в приложении, которое необходимо устранить перед продолжением использования приложения. В этом сценарии используйте content dialog.
  • Отображение в приложении без способа, чтобы пользователь уволил его info badge. Для постоянного оповещения, подобного этому, используйте .info bar
  • info badge Использование в качестве постоянного способа привлечения фокуса пользователя к области без способа, чтобы пользователь уволил.info badge
  • info badge Использование в качестве обычного значка или изображения в приложении. Вместо этого используйте соответствующий образ или значок (см . значок IconElement и IconSource).

info badgeТипы s

Существует три стиляinfo badge, из которых можно выбрать пункт, значок и числовой знак, как показано ниже.

Элементы InfoBadge для точки, значка и числа

Точка info badge

Точка info badge — это простой многоточие с диаметром 4px. Он не имеет границы, и не предназначен для хранения текста или ничего другого внутри него.

Следует использовать точку info badge для общих сценариев, в которых вы хотите направить фокус пользователя на info badge сторону ( например, чтобы указать, что доступно новое содержимое или обновления).

Икона info badge

Значок является многоточием с диаметром 16px, который содержит значок info badge внутри него. Свойство info badge IconSource обеспечивает гибкость для типов поддерживаемых значков.

Значок info badge следует использовать для отправки быстрого сообщения вместе с получением внимания пользователя, например, чтобы предупредить пользователя о том, что что-то неблокирующее произошло неправильно, доступно дополнительное важное обновление или что-то конкретное в приложении в настоящее время включено (например, таймер отсчета).

Если вы хотите использовать BitmapIconSource для IconSource вашего объектаinfo badge, вы несете ответственность за обеспечение соответствия растрового изображения внутри info badge (изменение размера значка или изменение размераinfo badge).

Числовой info badge

Числовое info badge значение совпадает с фигурой и размером значка info badge, но содержит ряд внутри него, определяемое свойством Value . Числа должны быть целыми целыми числами и должны быть больше или равно нулю. Ширина info badge автоматически расширяется по мере увеличения числа до нескольких цифр с гладкой анимацией.

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

Предустановленные info badge стили

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

Для s доступны info badgeследующие предустановки стилей:

Внимание

  • AttentionDotInfoBadgeStyle
  • AttentionIconInfoBadgeStyle
  • AttentionValueInfoBadgeStyle

Стили InfoBadge внимания

Информационный

  • InformationalDotInfoBadgeStyle
  • InformationalIconInfoBadgeStyle
  • InformationalValueInfoBadgeStyle

Информационные стили InfoBadge

Удачное завершение

  • SuccessDotInfoBadgeStyle
  • SuccessIconInfoBadgeStyle
  • SuccessValueInfoBadgeStyle

Стили Success InfoBadge

Внимание

  • CautionDotInfoBadgeStyle
  • CautionIconInfoBadgeStyle
  • CautionValueInfoBadgeStyle

Осторожность стилей InfoBadge

Критически важно

  • CriticalDotInfoBadgeStyle
  • CriticalIconInfoBadgeStyle
  • CriticalValueInfoBadgeStyle

Критически важные стили InfoBadge

Если для стиля задано info badge и конфликтующее свойство также задано, свойство перезаписывает конфликтующую часть стиля, но не конфликтующие элементы стиля останутся примененными.

Например, если применить CriticalIconInfoBadgeStyle к объекту info badge, но также задать InfoBadge.Value = "1", вы в конечном итоге info badge будете использовать цвет фона "Критически важный", но отображает номер 1 внутри него, а не отображение значка предустановки.

В этом примере создается цвет info badge и значок предустановленного стиля значка внимания.

<InfoBadge Style="{ThemeResource AttentionIconInfoBadgeStyle}"/>

Blue InfoBadge с символом звездочки

Специальные возможности

Элемент info badge управления не имеет встроенных функций средства чтения с экрана или автоматизации пользовательского интерфейса (UIA), так как элемент управления не может быть фокусируемым и не может взаимодействовать с ним.

Если вы используете info badge внутри, navigation viewnavigation view предоставляет встроенную поддержку средства чтения с экрана и вспомогательных технологий. При переходе navigation view на вкладку и вы приземлились на navigation view элемент с info badge ним, средство чтения с экрана объявит, что на этом элементе есть info badge . Если вопрос info badge имеет числовое значение, средство чтения с экрана также объявит info badgeзначение.

Если вы используете вне нее info badge navigation view, рекомендуется убедиться, что ваше приложение полностью доступно:

  • Родительский элемент элемента info badge должен быть фокусируемым и доступным по вкладке.
  • Родительский элемент объявляет info badge средства чтения с экрана.
  • Приложение отправляет уведомление UIA при info badge первом появлении.
  • Приложение отправляет уведомление UIA, когда info badge исчезает из пользовательского интерфейса.
  • Приложение отправляет уведомление UIA, когда произошло значительное изменение существующего info badge.
    • Определение "значительного изменения" заключается в том, чтобы вы были отдельным разработчиком. Ниже приведены примеры: info badge переключение между различными типами, info badge изменение цвета для представления его состояния или info badgeзначение, превышающее определенное значительное число.

Чтобы управлять тем, что родительский элемент объявляет средствам чтения с экрана, можно использовать присоединенные свойства класса AutomationProperties . info badgeДля родительского элемента рекомендуется задать либо присоединенные AutomationProperties.FullDescription AutomationProperties.ItemStatus свойства.

Чтобы отправить уведомления UIA при info badgeпоявлении или увольнении, можно использовать метод AutomationPeer.RaiseAutomationEvent .

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

UWP и WinUI 2

Внимание

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

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

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

Чтобы использовать код в этой статье с WinUI 2, используйте псевдоним в XAML (мы используем muxc), чтобы представить API библиотеки пользовательского интерфейса Windows, включенные в проект. Дополнительные сведения см. в статье "Начало работы с WinUI 2 ".

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:InfoBadge/>

Создание InfoBadge

Внимание

Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.

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

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

InfoBadge можно создать в XAML или коде. Создаваемый тип InfoBadge определяется заданными свойствами.

Точки

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

<InfoBadge />

Dot InfoBadge

Icon

Чтобы создать значок InfoBadge, задайте свойство IconSource .

<InfoBadge x:Name="SyncStatusInfoBadge">
    <InfoBadge.IconSource>
        <SymbolIconSource Symbol="Sync"/>
    </InfoBadge.IconSource>
</InfoBadge>

Значок InfoBadge

Числовое

Чтобы создать числовое значение InfoBadge, задайте свойство Value .

<InfoBadge x:Name="EmailInfoBadge" Value="{x:Bind numUnreadMail}"/>

Числовой InfoBadge

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

Примечание.

Если заданы оба Icon Value свойства, свойство имеет приоритет, Value а InfoBadge отображается как числовой InfoBadge.

Использование InfoBadge в NavigationView

Если вы используете NavigationView в приложении, рекомендуется использовать InfoBadge в NavigationView для отображения уведомлений и оповещений на уровне приложения. Чтобы поместить InfoBadge в NavigationViewItem, назначьте объект InfoBadge свойству NavigationViewItem.InfoBadge .

В левом развернутом режиме InfoBadge отображается по правому краю NavigationViewItem.

Развернутый влево элемент NavigationView с infoBadge

В режиме Left-Compact infoBadge отображается наложения в правом верхнем углу значка.

Навигация слева с помощью InfoBadge

В верхнем режиме InfoBadge выровнен по правому верхнему углу общего элемента.

Представление навигации верхнего режима с infoBadge

Рекомендуется не использовать различные типы InfoBadges в одном элементе NavigationView, например присоединение числовых InfoBadge к одному Элементу NavigationViewItem и точке InfoBadge к другому NavigationViewItem в том же navigationViewItem.

Пример. Увеличение числового infoBadge в NavigationView

В этом примере показано, как почтовое приложение может использовать InfoBadge в NavigationView для отображения числа новых сообщений в папке "Входящие" и увеличения числа, показанного в InfoBadge при получении нового сообщения.

<NavigationView SelectionChanged="NavigationView_SelectionChanged">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home"/>
        <NavigationViewItem Content="Account" Icon="Contact"/>
        <NavigationViewItem x:Name="InboxPage" Content="Inbox" Icon="Mail">
            <NavigationViewItem.InfoBadge>
                <InfoBadge x:Name="bg1"
                                Value="{x:Bind mailBox.NewMailCount, Mode=OneWay}"
                                Visibility="{x:Bind mailBox.HasNewMail, Mode=OneWay}"/>
            </NavigationViewItem.InfoBadge>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame x:Name="contentFrame" />
</NavigationView>

public sealed partial class MainWindow : Window
{
    MailBox mailBox = new MailBox();

    public MainWindow()
    {
        this.InitializeComponent();

    }

    private void NavigationView_SelectionChanged(NavigationView sender,
                               NavigationViewSelectionChangedEventArgs args)
    {
        if (args.SelectedItem == InboxPage)
        {
            mailBox.ResetNewMailCount();
        }
        else
        {
            mailBox.CheckMail();
        }
    }
}

public class MailBox : DependencyObject
{
    DispatcherQueueTimer timer;

    // Dependency Properties for binding.
    public int NewMailCount
    {
        get { return (int)GetValue(NewMailCountProperty); }
        set { SetValue(NewMailCountProperty, value); }
    }
    public static readonly DependencyProperty NewMailCountProperty =
        DependencyProperty.Register("NewMailCount", typeof(int), typeof(MailBox), new PropertyMetadata(0));

    public bool HasNewMail
    {
        get { return (bool)GetValue(HasNewMailProperty); }
        set { SetValue(HasNewMailProperty, value); }
    }
    public static readonly DependencyProperty HasNewMailProperty =
        DependencyProperty.Register("HasNewMail", typeof(bool), typeof(MailBox), new PropertyMetadata(false));

    public MailBox()
    {
        timer = this.DispatcherQueue.CreateTimer();
        timer.Interval = new TimeSpan(15000000);
        timer.Tick += (s, e) =>
        {
            NewMailCount++;
            if (HasNewMail == false) { HasNewMail = true; }
        };
        timer.Start();
    }

    public void ResetNewMailCount()
    {
        NewMailCount = 0;
        HasNewMail = false;
        timer.Stop();
    }

    public void CheckMail()
    {
        timer.Start();
    }
}

NavigationView с infoBadge в элементе папки

Иерархия в NavigationView

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

Родительский элемент NavigationViewItem и дочерний navigationViewItems будут иметь собственное свойство InfoBadge. Можно привязать значение InfoBadge родительского объекта к факторам, определяющим значения InfoBadge дочерних элементов, например сумму числовых infoBadge дочерних элементов в InfoBadge родительского элемента.

На этом изображении показан иерархический элемент NavigationView со значением "ПанельDisplayMode", где элемент верхнего уровня (родительский) отображает числовой InfoBadge. Приложение установило для родительского элемента InfoBadge представление того, что отображается в infoBadge дочерних элементов, так как дочерние элементы в настоящее время не развернуты (и поэтому не отображаются).

Иерархический элемент NavigationView с infoBadge

Использование InfoBadge в другом элементе управления

Может потребоваться отобразить оповещения или уведомления об элементах в приложении, отличных от NavigationView. У вас может быть ListViewItem , который требует особого внимания, или элемент меню, отображающий уведомление. В этих случаях вы можете интегрировать InfoBadge непосредственно в пользовательский интерфейс с другими элементами управления.

InfoBadge — это UIElement , поэтому его нельзя использовать как общий ресурс.

Для этого используйте InfoBadge, как и любой другой элемент управления, просто добавьте разметку InfoBadge, где она будет отображаться. Так как InfoBadge наследует от Control, он имеет все встроенные свойства размещения, такие как поля, выравнивание, заполнение и многое другое, которое можно использовать для размещения InfoBadge именно там, где вы хотите.

Если поместить InfoBadge внутри другого элемента управления, например Button или ListViewItem, он, скорее всего, будет обрезанным, если он находится за пределами ограничивающего поля родительского элемента управления. Если infoBadge находится внутри другого элемента управления, он не должен располагаться за углами общего ограничивающего поля элемента управления.

Пример. Размещение InfoBadge внутри другого элемента управления

Вот кнопка, которая содержит InfoBadge, размещенную в правом верхнем углу, с индикатором индикатора, наложенным сверху содержимого. Этот пример можно применить ко многим элементам управления, отличным от button, — он просто показывает, как размещать, позицию и отображать InfoBadge внутри другого элемента управления WinUI.

<Button Width="200" Height="60" Padding="4"
        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid>
        <SymbolIcon Symbol="Sync"/>
        <InfoBadge x:Name="buttonInfoBadge"
                        Background="#C42B1C"
                        HorizontalAlignment="Right" 
                        VerticalAlignment="Top"
                        Width="16" Height="16">
            <InfoBadge.IconSource>
                <FontIconSource Glyph="&#xEA6A;"/>
            </InfoBadge.IconSource>
        </InfoBadge>
    </Grid>
</Button>

Кнопка со значком InfoBadge

Управление InfoBadge

InfoBadge обычно отображает временное оповещение, поэтому обычно он отображает или скрывает его, а также периодически изменяет его стиль во время работы приложения.

Отображение и скрытие InfoBadge

Свойство Видимости или свойство Opacity можно использовать для отображения и скрытия InfoBadge на основе действий пользователей, логики программы, счетчиков и т. д.

Как и в других uiElements, параметр Visibility.Collapsed сделает InfoBadge не занимает место в макете, поэтому может привести к перемещению других элементов при отображении и скрытии.

Если элементы, которые перемещаются, является проблемой, можно использовать Opacity свойство для отображения и скрытия InfoBadge. Opacity Значение по умолчанию задано 1.0 ; его можно задать для 0 скрытия InfoBadge. При использовании Opacity свойства InfoBadge по-прежнему занимает место в макете, даже если он в настоящее время скрыт.

Изменение стиля InfoBadge

Вы можете изменить значок или номер, отображаемый в InfoBadge во время отображения. Уменьшение или увеличение числа InfoBadge на основе действия пользователя можно добиться путем изменения значения InfoBadge.Value. Изменение значка InfoBadge можно достичь, задав InfoBadge.IconSource новый IconSource объект. При изменении значков убедитесь, что новый значок имеет тот же размер, что и старый значок, чтобы избежать визуального эффекта jarring.

Поведение по умолчанию

Если значение InfoBadge.Value не InfoBadge.IconSource задано, infoBadge по умолчанию отображает точку (в частности, если Value -1 задано значение и IconSource имеет значение null, которые являются значениями по умолчанию). Если заданы Value оба IconSource свойства, InfoBadge будет учитывать Value свойство и отображать числовое значение.

Вы также можете изменить тип InfoBadge во время отображения. Чтобы изменить тип InfoBadge, убедитесь, что соответствующее свойство текущего типа (или) имеет значение по умолчанию (Value-1илиIconSourcenull), а свойство нового типа равно соответствующему значению. Чтобы изменить тип InfoBadge с числовых или значков на тип dot InfoBadge, убедитесь, что InfoBadge.Value задано -1 значение и InfoBadge.IconSource имеет nullзначение .

В зависимости от того, как вы позиционировали InfoBadge, помните, что это может привести к смене элементов по мере изменения размера и формы InfoBadge.