Implementation of InfoBadge component

[jbryknar]

Pull request type

Please check the type of change your PR introduces:

• Update
• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes

What is the current behavior?

Issue Number: #798

The current version of WpfUi does not have an InfoBadge implementation.

What is the new behavior?

Added implementation of InfoBadge component according to Win UI 3.

https://learn.microsoft.com/en-us/windows/apps/design/controls/info-badge

The component can be used as a standalone component:

<ui:InfoBadge Value="1" Severity="Attention" Opacity="1" Style="{DynamicResource ValueInfoBadgeStyle}>`

Supported PaneDisplayMode:

• Left (open and unopened panel, missing support for subitems in MenuItems yet)
• LeftMinimal (open and unopened panel)
• Fluent
• Top
• Bottom
• The component is implented into NavigationView, so it can be used in NavigationViewItem:

<ui:NavigationViewItem Content="Items" Icon="{ui:SymbolIcon Library24}">
     <ui:NavigationViewItem.InfoBadge>
         <ui:InfoBadge Severity="Attention" Value="{Binding ViewModel.Value, Mode=OneWay}" Style="{DynamicResource ValueInfoBadgeStyle}" />
     </ui:NavigationViewItem.InfoBadge>
</ui:NavigationViewItem>

Added InfoBadge page to Status & info section for component demonstration

Other information

Basic parameters

• Value (Gets or sets the string to be displayed in an InfoBadge)
• Icon (Gets or sets the icon to be used in an InfoBadge). Primarily set for use with ui:SymbolIcon.
• Severity (Gets or sets the severity to be used in an InfoBadge)
• Opacity
• Style (Gets or sets the style of component, options are available as listed below)

Severity

Severity Name	Brush Name	Light	Dark
Attention	SystemFillColorAttention	#0078d4	#4cc2ff
Informational	SystemFillColorInformational	#8a8a8a	#9d9d9d
Success	SystemFillColorSuccess	#0f7b0f	#6ccb5f
Caution	SystemFillColorCaution	#9d5d00	#fce100
Critical	SystemFillColorCritical	#c42b1c	#ff99a4

Styles

• IconInfoBadgeStyle (Icon is required parameter)
• ValueInfoBadgeStyle (Value is required parameter)
• DotInfoBadgeStyle

Preview

The component can definitely be implemented better and more happily, so I'll be glad for the review and any comments. The goal was to help the author of the project and to contribute a bit to the development of the component.

[jbryknar]

@niels9001 Thanks for the code review, theme files are not my cup of tea. 😁

[pomianowski]

Hey @jbryknar, thanks for your work and contribution to the project, the InfoBadge looks great