Skip to main content

Bubbles

BubbleNotification is an extender that puts a small numeric badge, a bubble, next to any Wisej.NET control or ToolBarButton. Use it for unread counts, pending tasks, validation errors per field, or anything the user should notice at a glance. A bubble with value 0 is hidden, so a single call both shows and clears it. Clicking a bubble raises a server-side Click event.

A group box of form fields with red numbered bubbles at their right edge: 4 on a text box, 2 on a numeric up-down, 1 on the Increment button and 1 on a combo box

Bubbles on text boxes, a numeric editor, a button and a combo box.

Installation​

Add the Wisej-4-Bubbles package to your Wisej.NET project:

dotnet add package Wisej-4-Bubbles

The package targets .NET Framework 4.8 and .NET 8 or later (including the -windows, Android, iOS and Mac Catalyst targets). After a rebuild, BubbleNotification shows up in the Visual Studio toolbox as a component.

Getting started​

Drop a BubbleNotification on a page or form. Every control and toolbar button then gets two extender properties in the Properties window: BubbleValue on bubbleNotification1 and BubbleStyle on bubbleNotification1. In code, use SetBubbleValue and SetBubbleStyle:

using Wisej.Web.Ext.Bubbles;

// Show 7 unread messages on the Inbox button.
this.bubbleNotification1.SetBubbleValue(this.buttonInbox, 7);

// Show it in the "warning" style instead of the default "alert".
this.bubbleNotification1.SetBubbleStyle(this.buttonInbox, BubbleStyle.Warning);

// Hide it again.
this.bubbleNotification1.SetBubbleValue(this.buttonInbox, 0);
Supported components

Bubbles work on any Control and on ToolBarButton components. SetBubbleValue throws for any other component type. When you're not sure what you're dealing with, check CanExtend first.

Properties and methods​

MemberDefaultWhat it does
SetBubbleValue(component, value) / GetBubbleValue0The number in the bubble. 0 hides it.
SetBubbleStyle(component, style) / GetBubbleStyleAlertThe bubble's style.
AlignmentTopRightWhere the bubble sits on its control, as a ContentAlignment.
Margin0Shifts the bubble away from the aligned position.
Clear()—Removes every bubble this extender shows.
TagnullYour own data.

Alignment and Margin apply to every bubble of that extender. To position some bubbles differently, for example on the left of labels but on the right of buttons, use two BubbleNotification components.

this.bubbleNotification1.Alignment = ContentAlignment.MiddleRight;
this.bubbleNotification1.Margin = new Padding(0, 0, 4, 0);

Styles​

BubbleStyle selects one of the states of the bubble appearance in the embedded BubbleNotifications.mixin.theme:

StyleTheme stateDefault colors
Alertdefault / alertWhite on red (#C70039)
WarningwarningBlack on amber (#FFC300)
CriticalcriticalWhite on purple (#9029AB)
CustomcustomNot defined by the mixin, so add it in your own.

To change the colors, override bubble-alert-background, bubble-alert-text, bubble-warning-background, bubble-warning-text, bubble-critical-background and bubble-critical-text in your own mixin. For Custom, add a custom state to the bubble appearance:

Themes/MyApp.mixin.theme
{
  "name": "MyApp.mixin",
  "appearances": {
    "bubble": {
      "states": {
        "custom": {
          "styles": { "backgroundColor": "#0EA5E9", "color": "#0EA5E9" },
          "properties": { "textColor": "white" }
        }
      }
    }
  }
}

See Theming.

Events​

EventWhen
ClickThe user clicks a bubble. BubbleEventArgs gives you the Control and the Value it showed.
private void bubbleNotification1_Click(object sender, BubbleEventArgs e)
{
    if (e.Control == this.buttonInbox)
        OpenInbox();
}
tip

Clicking a bubble doesn't clear it. Reset the value yourself once the user has seen what it pointed to.

API reference​