Bubble Control

Wrap it round anything – a button, a tile, an image, a whole panel – to give the user an immediate, visible answer to a click. It is especially useful on touch screens and kiosks, in software demonstrations and screen recordings, where the audience needs to see where the presenter clicked, and on large tiles whose own response might otherwise go unnoticed.

How it works

A press of the left mouse button anywhere over the content starts a bubble at the pointer. The bubble grows over 0.55 seconds to a diameter of BubbleExpansionFactor times twice the control's longer side, fading out as it grows, and is clipped to the control's bounds. The click still reaches the content as normal – the control only watches it.

Appearance

The bubble is three concentric rings: BubbleOuterLayerBrush on the outside, BubbleInnerLayerBrush at half the diameter and BubbleChildLayerBrush at a quarter. ShouldRunOnTop chooses whether it is drawn over the content or behind it. The default style gives the control a transparent Control.Background, so the whole of its area answers the pointer, not only the parts the content paints.

Which gestures raise a bubble

Add other routed events – a right-button release, a touch, a stylus tap – to BubbleInvocationEvents. Events that carry a pointer position start the bubble there.

A grid of dashboard tiles, each wrapped so that a click or a right-click ripples in the company's colours.

<Window x:Class="Dashboard.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cv="clr-namespace:Binarymission.WPF.Controls.CommandVisuals;assembly=Binarymission.WPF.Controls.BubbleControl"
        Title="Sales dashboard" Width="640" Height="360">

    <UniformGrid Columns="2" Margin="12">
        <cv:BubbleControl BubbleExpansionFactor="0.3"
                          BubbleOuterLayerBrush="#552196F3"
                          BubbleInnerLayerBrush="#882196F3"
                          BubbleChildLayerBrush="#FF1565C0">
            <Border Margin="6" Background="#F3F7FC" BorderBrush="#C9D6E6" BorderThickness="1"
                    MouseLeftButtonUp="OnOpenOrders">
                <TextBlock Margin="16" FontSize="18" Text="Open orders: 128" />
            </Border>
        </cv:BubbleControl>

        <cv:BubbleControl BubbleExpansionFactor="0.3">
            <Border Margin="6" Background="#F3F7FC" BorderBrush="#C9D6E6" BorderThickness="1">
                <TextBlock Margin="16" FontSize="18" Text="Overdue invoices: 7" />
            </Border>
        </cv:BubbleControl>
    </UniformGrid>
</Window>

The same in code, with the right mouse button raising a bubble too.

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using Binarymission.WPF.Controls.CommandVisuals;

BubbleControl tile = new BubbleControl
{
    BubbleExpansionFactor = 0.3,
    BubbleOuterLayerBrush = new SolidColorBrush(Color.FromArgb(0x55, 0x21, 0x96, 0xF3)),
    Content = new TextBlock { Margin = new Thickness(16), FontSize = 18, Text = "Open orders: 128" }
};
tile.BubbleInvocationEvents.Add(UIElement.MouseRightButtonUpEvent);