Proposal: Badge Control for enabling badging in NavigationView

Proposal: Create Badge control

Summary

This proposal is based off of #2140. Thanks to @joshkoon for starting this discussion.

Badging is the least intrusive and most intuitive way to display notifications or bring focus to something within an app. A Badge control should be a small piece of UI that can be added into an app and customized to display a number, symbol, or a simple dot. This control would be its own entity, but could be easily integrated into a number of controls and control items, providing a wide variety of use cases.

Rationale

• There should be a built-in, Fluent way to show badge alerts
• Badge notifications are useful in most apps - they aren’t limited to representing “notifications” such as a new message, but can also be used to display alerts (“updates available”), indicate new content available (such as in a news app), and more.
• There currently exists an enumeration of approved Windows glyphs for badges. We could easily incorporate these into pre-defined values for a Badge control.

Scope

Capability	Priority
Easily integrate into the UI without being intrusive.	Must
Have the ability and flexibility to be used in or attached to any control	Must
Provide a consistent badging experience and interface across all WinUI apps	Must
Display one of the following: a dot, number, or one of the approved glyphs.	Should
Change based on user activity - badges should not be static, and should only be used if they change with user interaction (i.e. must disappear if items have been seen)	Should
This badge control won’t take over the current app-level badging/notification system.	Won’t

Important Notes

Design Considerations

The Badge control should be a simple enough design that it can be integrated into various controls and templates. The design has to be able to scale and support different use cases including but not limited to: general notifications, new content indication, update available, and error/issue/warning. It also has to be flexible enough so that it’s visually appealing for items/controls with and without icons.

Below are very rough outlines of what a Badge control might look like. This design will clearly need to be revised and iterated upon, but the design below represents a scalable Badge that’s integrated into different scenarios.

Thanks to @mdtauk who provided the original mockups for a Badge control in #2140.

In this example, badges are integrated into NavigationView items.

For TabView, the Badge can be integrated in multiple places within a tab. This will be up to the developer’s discretion as they include a Badge in their ItemTemplate.

The below examples shows a MenuBar where a nested item has a warning Badge.

The below example shows a command bar where the Badge could represent new sharing options available.

This example shows a TreeView with a Badge on a certain document. The Badge could indicate that there’s been activity or changes on the document.

Flexibility and guidance

The Badge control has three different options for what to display, as mentioned above: dot, numeric, and glyph. These three types allow for flexibility while still keeping the Badge visuals highly consistent across WinUI apps. With consistency as a core priority, the team would provide specific guidance on how and when to use a Badge. Some guidance topics would include:

• Using Badges in nested scenarios
• When to use what type of Badge
• Placement of a Badge within an item/control
• When to hide or increment a numerical Badge

Example Markup

Badge control should have Type and Value properties. Type would be one of three values: Dot, Numerical, or Glyph. Value would be a number for numerical badges or the corresponding name of the symbol to be used in a glyph badge.

A Badge can be created with the following markup:

<Badge Type="Numeric" Value="{x:Bind numUnread}"/>

Implementation notes

There are a few methods with which we could implement a Badge control:

1. Adorners This is an API that was available in WPF. This will require adding new APIs to WinUI to allow for the use of adorners.

Adorners will allow for the Badge to be added (“adorned”) onto another control without otherwise interfering with the control, and the Badge will render separately in a different layer. Using adorners will also make it easier for a developer to add a Badge control wherever they want, rather than editing a control template each time they want to add a Badge. Badge would be a built-in Adorner.

Here’s a basic example of how a Badge would be added to a “File” MenuBarItem via adorners:

var adorner = AdornerLayer.GetAdornerLayer(MenuFileBtn);
adorner.Add(new Badge(MenuFileBtn));

1. Decorators A common example of a decorator class in UWP is Border. In your markup, you wrap it around the element you’d like it to interact with. This wouldn’t require adding new APIs to WinUI as Adorners would, but it might be more tedious to use in the long run as the developer would have to drill down into the item that they’d like to put a Badge on and find the exact element on which the Badge should overlay.

Here’s a basic example of how a Badge would be added to the icon of a NavigationViewItem if it was a decorator class:

<NavigationView>
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home"/>

        <NavigationViewItem Content="Inbox">
            <Badge Type="Numeric" Value="{x:Bind numUnread}">
                <NavigationViewItem.Icon>
                    <SymbolIcon Symbol="Mail"/>
                 </NavigationViewItem.Icon>
           </Badge>
       </NavigationViewItem>

    </NavigationView.MenuItems>
</NavigationView>

Use cases, control integration, and prioritization

There are lots of situations and controls in which a Badge control could be useful. To support these scenarios, it’s important that the Badge control remains a standalone entity that’s flexible enough to fit into lots of different templates.

Example Badge scenarios:

• NavigationView: perhaps the most popular scenario, apps can display alerts/indicators about certain pages of their app via the NavigationView.
• TabView: alert the user to unread content, notifications, or alerts that come up on a certain tab
• TreeView: to indicate alerts or unread content in a specific tree node
• MenuBar and CommandBar: to indicate new menu/command options, or indicate issues with certain commands (i.e. Save didn’t work)

Integrating Badge directly into NavigationView

Since NavigationView will likely be the most popular scenario in which a Badge will be used, I’m proposing that the Badge control be integrated into the control template of NavigationViewItem when the control is shipped. This will allow developers to get familiar with the control through NavigationView and continue to use it in other controls as they wish. If future feature requests come in for direct Badge integration into other controls, that can happen as well. Otherwise, the process of manually adding a Badge to an ItemTemplate or control template should be designed to be relatively pain-free.

The Badge control would be built into NavigationViewItem’s control template as an overlay on the item’s Icon. NavigationViewItem would have a Badge property that would take in a Badge with Type and Value properties. These Type and Value properties would be bound to the Badge in the control template.

From the developer’s side, they’d just have to set NavigationViewItem.Badge to a Badge object with the correct properties:

<NavigationView x:Name="NavView">
        <NavigationView.MenuItems>

            <!-- ... -->

            <NavigationViewItem Tag="inbox" Content="Inbox">
                <NavigationViewItem.Icon>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE715;"/>
                </NavigationViewItem.Icon>
                <NavigationViewItem.Badge>
                    <Badge Type="Numerical" Value="{x:Bind numUnread}"/>
                </NavigationViewItem.Badge>
            </NavigationViewItem>

            <!-- ... -->

        </NavigationView.MenuItems>
</NavigationView>

More details on how Badges would change states, increment, etc. will be covered in a spec. The implementation details for integrating a Badge into other controls will also be covered in a spec.

Questions and Answers

If we didn’t have this, how hard is it to do this yourself? Would be good to see how much simpler/easier/better we’re making it?

While it’s possible to manually add a badge into a NavigationView or other control, it’s not necessarily trivial. It’ll likely consist of re-templating the item so that the content presenter includes a Badge provided by a style resource. And that’s the bare minimum for the “dot” badge - for numerical or symbolic badges, there would be more binding involved and the process would get trickier.

Having a built-in Badge control simplifies this process, and also provides an important consistency across all WinUI apps. If every app that needs badging implements it manually, the badging look and experience will differ greatly across apps and interfere with the streamlined consistency provided by WinUI controls.

What would the type of the NavigationViewItem.Badge property be?

The current design is to have the Badge property be of type Badge rather than type Object. This allows the platform to offer the three approved kinds of badges - dot, symbol, or numeric. The three options give flexibility while also ensuring consistency across WinUI apps.

Open questions

• Since this control will be integrated into a variety of different controls, should Badge have a height and width property to set the appropriate size?
• What implementation method is best?

[gabbybilka]

As an FYI this is now in a 2.7 pre-release with NavView integration and preset styles 🎨

If you’d like to check out the control let us know how the integration went and any additional feedback you have for the control. If you find a bug, please feel free to open a new issue to track 🐞

[anawishnoff]

@michael-hawker Well that was easy enough! Thanks!