Click here to Skip to main content
11,804,574 members (89,852 online)
Click here to Skip to main content

Adding Balloon Windows to a .NET Application

, 13 Jul 2003 375.8K 2.7K 317
Rate this:
Please Sign up or sign in to vote.
Introduction to the BalloonWindow class which allows .NET applications to implement balloon windows similar to what is available in Windows XP. Complete customization allows both the appearence and shape to be configured as well as projecting an alpha-blended shadow.

Sample screen demonstrating the BalloonWindow class.


Operating system balloon window anchored to notify icon.This article introduces the BalloonWindow class. The design goal for BalloonWindow was to allow any .NET application to display balloons that function like those that are part of the operating system such as the one shown in Figure 2.

Written in C#, BalloonWindow exposes the necessary functionality to fully customize the balloon’s appearance. Examples of customizations include, setting the background style or color; defining the balloon layout by adjusting the anchor placement, corner curvature, or shadow effects; and placing controls within the balloon like all other Form classes.

Calculating the Shape

The shape of a balloon is maintained by a GraphicsPath object and calculated by the RecalcLayout method.

private GraphicsPath RecalcLayout(Rectangle rect, Point target)
   GraphicsPath gp = new GraphicsPath();

Anchor quadrant and offset.Two independent components control the anchor’s shape and placement: The anchor quadrant indicating one of the four sides, and the anchor offset indicating the increasing distance along the specified anchor quadrant. Figure 3 shows the relation between these two components and the balloon as a whole.

Anchor appearance changes depending on quadrant and offset.An important design consideration was for these to be independent because, as evident in Figure 4, there are twelve anchor permutations. Along any quadrant, the anchor’s position can be pre-center, center, or post-center. Center is the exact location between the minimum and maximum offsets. When the anchor is centered, its sweep angle is 90-degrees while the angle for all other positions is 45-degrees with the perpendicular edge always facing away from center.

The code snippet below calculates necessary adjustments for the anchor quadrant. Calculating the quadrant is simple and only requires the use of the matrix and anchorFlipped variables, which are explained shortly. This coding is based on a rotation from the “top” of the balloon in order to determine the placement of any other anchors, i.e. if he anchor is required at one of the three “top” anchor locations, no rotation would be utilized, whereas, if the anchor is required on the right or left sides of the balloon, a 90- or -90-degree rotation, respectively, would be used.

   case AnchorQuadrant.Top:
   case AnchorQuadrant.Bottom:
      matrix.Translate(balloonBounds.Width, balloonBounds.Height);

      anchorFlipped = true;
   case AnchorQuadrant.Left:
      balloonBounds.Size = 
         new Size(balloonBounds.Height, balloonBounds.Width);

      matrix.Translate(0, balloonBounds.Width);

      anchorFlipped = true;
   case AnchorQuadrant.Right:
      balloonBounds.Size =
         new Size(balloonBounds.Height, balloonBounds.Width);

      matrix.Translate(balloonBounds.Height, 0);


Anchor position after rotation.As previously mentioned, when building the path, all calculations are assumed to be with the anchor on the top quadrant. This was done to make the calculations simple and predictable. Once the path is complete, it is adjusted using the matrix variable which rotates the balloon so the anchor is on the correct quadrant. However, using a base anchor quadrant of the top posed an interesting problem. When the balloon is rotated either 180- or 270-degrees, the anchor offset ends up on the opposite side of center then required. Figure 5 demonstrates this situation. The anchorFlipped variable flags this condition allowing the anchor offset to be recalculated as shown below. As can be seen from Figure 5, when the anchor is rotated 180-degrees, the anchor is brought down to the “bottom-right.” A subsequent shift needs to happen before the anchor is placed at the correct location, in this case the “bottom-left.”

   anchorOffset =

Regardless if the offset is pre-center, center, or post-center an anchor always has three points. The following code calculates these three points.

if(anchorOffset < balloonEdgeCenter)
   anchorPoints[0] =
      new Point(anchorOffset+offsetFromEdge,
   anchorPoints[1] =
      new Point(anchorOffset+offsetFromEdge,
   anchorPoints[2] =
      new Point(anchorOffset+anchorMargin+offsetFromEdge,
else if(anchorOffset > balloonEdgeCenter)
   anchorPoints[0] =
      new Point(anchorOffset-anchorMargin+offsetFromEdge,
   anchorPoints[1] =
      new Point(anchorOffset+offsetFromEdge,
   anchorPoints[2] =
      new Point(anchorOffset+offsetFromEdge,
   anchorPoints[0] =
      new Point(anchorOffset-anchorMargin+offsetFromEdge,
   anchorPoints[1] =
      new Point(anchorOffset+offsetFromEdge,
   anchorPoints[2] =
      new Point(anchorOffset+anchorMargin+offsetFromEdge,

With the calculations complete, the path can finally be constructed as shown below.

gp.AddArc(balloonBounds.Left, balloonBounds.Top+anchorMargin,
   cornerDiameter, cornerDiameter,180, 90);

gp.AddLine(anchorPoints[0], anchorPoints[1]);
gp.AddLine(anchorPoints[1], anchorPoints[2]);

   cornerDiameter, cornerDiameter, -90, 90);
   cornerDiameter, cornerDiameter, 0, 90);
gp.AddArc(balloonBounds.Left, balloonBounds.Bottom-cornerDiameter,
   cornerDiameter, cornerDiameter, 90, 90);

One final issue; adjust the path so the anchor is located on the correct quadrant.


Constraining the Region

Support for the non-standard window shape is provided by the GraphicsPathWindow class. This class, itself, does not know anything about the shape of the window; rather, a call to the virtual PreparePath method is invoked when needed as shown below. Here the GetPath method checks to see if a path is cached, if not it asks the derived class to provide the path.

public GraphicsPath GetPath()
   GraphicsPath gp = __graphicsPath;

   if(gp == null) gp = PreparePath();

   return gp;

This provides all derived classes the ability to define the path as needed. Below is the code that BalloonWindow uses to define its path.

protected override GraphicsPath PreparePath()
   return __layout.Path;

A window defines a region which instructs the operating system to draw only within the region. The following code constrains the region and ensures the window looks like a balloon. When a Region is defined from a GraphicsPath object, the region is defined as the inner area of the path. This code below includes adjustment to include the path border.

private Region RegionFromPath(GraphicsPath gp)
   if(gp == null) throw(new ArgumentNullException("gp"));
   Region region = new Region(gp);

   float inflateBy = 1F+2F/(float)Width;
   Matrix matrix = new Matrix();
   matrix.Scale(inflateBy, inflateBy);
   matrix.Translate(-1, -1);

   return region;

Projecting a Shadow

Windows 2000 introduced layer-windows. Layer-windows allow the operating system to alpha-blend the contents of a window with the background. An example of this would be the shadows projected from the balloon windows available in Windows 2000 and XP.

Shows the overlapping content and shadow.A design goal for BalloonWindow was to support this same shadowing effect. Several design considerations were researched and ultimately the best approach was to implement shadows in a separate window positioned behind the content window as shown in Figure 6.

The class ShadowedWindow maintains the shadow effect which BalloonWindow inherits. When a shadow is first displayed, CreateShadowProjection creates a Projection object. Keep in mind that ShadowedWindow is not the shadow itself. The shadow window itself is actually encapsulated by the Projection object maintained by ShadowedWindow.

private Projection CreateShadowProjection()
   Projection shadow = new Projection(this);
              shadow.BackColor = Color.White;

   BindShadowToOwner(shadow, this);

   return shadow;

The projected shadow always lies behind the content window and has the same dimensions. Because of this, the shadow needs to be offset slightly so it is visible.

public void ShowShadow()
   GraphicsPathWindow shadow = __shadow;

   if(shadow == null) shadow = __shadow = CreateShadowProjection();

   int shadowMargin = ShadowMargin;
   Point shadowLocation =
      new Point(Location.X+shadowMargin, Location.Y+shadowMargin);
   Size shadowSize = Size;

   shadow.Location = shadowLocation;
   shadow.Size = shadowSize;


A shadow is created on an off-screen bitmap rendered with a gradient pattern.

Bitmap img = new Bitmap(Width, Height);
GraphicsPath path = GetPath();
Graphics grx = Graphics.FromImage(img);
float scaleFactor = 1F-((float)__owner.ShadowMargin*2/(float)Width);

PathGradientBrush backStyle = new PathGradientBrush(path);
                  backStyle.CenterPoint = new Point(0, 0);
                  backStyle.CenterColor = __owner.ShadowColor;
                  backStyle.FocusScales = 
                      new PointF(scaleFactor, scaleFactor);
                  backStyle.SurroundColors = 
                      new Color[]{Color.Transparent};

Region region = new Region(path);
       region.Translate(-__owner.ShadowMargin, -__owner.ShadowMargin);

grx.SetClip(region, CombineMode.Xor);

grx.FillPath(backStyle, path);

The SetBitmap method initializes and updates the layer-window using code provided by Rui Godinho Lopes which is explained in his document “Per Pixel Alpha Blend in C#.”



BalloonWindow is a powerful library for generating a simple UI element.

Class Structure

BalloonWindow is designed to be a robust and essential component for any application. Figure 7 shows the public object model available for BalloonWindow.

Object model for the BalloonWindow class structure.

Build History

For information about each build, please refer to the BalloonWindow Library for .NET portal.


Copyright © 2002-2003 by Peter Rilling

The source file(s) and binaries may be redistributed unmodified by any means PROVIDING they are not sold for profit without the authors expressed written consent, and providing that this notice and the authors name and all copyright notices remain intact.

Any use of the software in source or binary forms, with or without modification, must include, in the user documentation ("About" box and printed documentation) and internal comments to the code, notices to the end user as follows:

"Portions Copyright © 2002-2003 Peter Rilling"

An email letting me know that you are using it would be nice as well. That's not much to ask considering the amount of work that went into this.



    This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

    A list of licenses authors might use can be found here


    About the Author

    Peter Rilling
    Web Developer
    United States United States
    No Biography provided

    You may also be interested in...

    Comments and Discussions

    GeneralMy vote of 5 Pin
    TheCardinal30-Sep-12 14:37
    memberTheCardinal30-Sep-12 14:37 
    GeneralWanna use your code. Need your email Id. Pin
    ismusidhu6-Jan-11 20:29
    memberismusidhu6-Jan-11 20:29 
    GeneralNOT correctly HIDE method! Pin
    redwolf_5-Jul-09 23:13
    memberredwolf_5-Jul-09 23:13 
    Generalstop the shutdown process Pin
    kkataoka27-Nov-08 13:18
    memberkkataoka27-Nov-08 13:18 
    GeneralCannot Adust the Form Size Pin
    dc_chant6-Jun-08 7:30
    memberdc_chant6-Jun-08 7:30 
    QuestionWin bound Pin
    miamiman2117-Aug-07 5:13
    membermiamiman2117-Aug-07 5:13 
    AnswerRe: Win bound Pin
    Peter Rilling17-Aug-07 7:54
    memberPeter Rilling17-Aug-07 7:54 
    QuestionSigned assembly requirement to use BalloonWindow.dll Pin
    psystems14-Jun-07 9:15
    memberpsystems14-Jun-07 9:15 
    AnswerRe: Signed assembly requirement to use BalloonWindow.dll Pin
    Peter Rilling25-Jun-07 6:34
    memberPeter Rilling25-Jun-07 6:34 
    GeneralTake a look at this Pin
    yaip25-May-07 5:03
    memberyaip25-May-07 5:03 
    QuestionI'd like to use your component Pin
    holon12-Feb-07 10:31
    memberholon12-Feb-07 10:31 
    QuestionAny way to make it not to show in the taskbar? Pin
    CryptingCrunch16-Oct-06 5:30
    memberCryptingCrunch16-Oct-06 5:30 
    AnswerRe: Any way to make it not to show in the taskbar? Pin
    ignacioxd8-Jul-10 8:17
    memberignacioxd8-Jul-10 8:17 
    GeneralWindows Service Pin
    Wilson Reddy G (Vamsi)9-Oct-06 0:02
    memberWilson Reddy G (Vamsi)9-Oct-06 0:02 
    GeneralRe: Windows Service Pin
    Peter Rilling24-Feb-07 12:35
    memberPeter Rilling24-Feb-07 12:35 
    GeneralASP.NET Pin
    Mark Ibanez26-Jun-06 23:40
    memberMark Ibanez26-Jun-06 23:40 
    GeneralRe: ASP.NET Pin
    Peter Rilling21-Sep-06 12:45
    memberPeter Rilling21-Sep-06 12:45 
    QuestionShadow Problem? Pin
    FinallyInSeattle7-Dec-05 10:50
    memberFinallyInSeattle7-Dec-05 10:50 
    AnswerRe: Shadow Problem? Pin
    FinallyInSeattle7-Dec-05 11:20
    memberFinallyInSeattle7-Dec-05 11:20 
    GeneralRe: Shadow Problem? Pin
    Peter Rilling7-Dec-05 11:45
    memberPeter Rilling7-Dec-05 11:45 
    GeneralFocus problem Pin
    pichamp2-Nov-05 2:59
    memberpichamp2-Nov-05 2:59 
    GeneralRe: Focus problem Pin
    jake0725-Aug-08 4:35
    memberjake0725-Aug-08 4:35 
    GeneralRewriting library classes. Pin
    Peter Rilling6-Aug-05 21:01
    memberPeter Rilling6-Aug-05 21:01 
    GeneralRe: Rewriting library classes. Pin
    FinallyInSeattle10-Aug-05 14:51
    memberFinallyInSeattle10-Aug-05 14:51 
    GeneralRe: Rewriting library classes. Pin
    Peter Rilling10-Aug-05 19:31
    memberPeter Rilling10-Aug-05 19:31 
    GeneralRe: Rewriting library classes. Pin
    Bob-ish23-Aug-05 8:41
    memberBob-ish23-Aug-05 8:41 
    GeneralRe: Rewriting library classes. Pin
    Peter Rilling26-Aug-05 11:00
    memberPeter Rilling26-Aug-05 11:00 
    GeneralRe: Rewriting library classes. Pin
    Bob-ish26-Aug-05 13:13
    memberBob-ish26-Aug-05 13:13 
    GeneralRe: Rewriting library classes. Pin
    udvranto2-Nov-05 15:28
    memberudvranto2-Nov-05 15:28 
    Generalbug with close box on 120 dpi Pin
    vad2393-Sep-04 5:41
    membervad2393-Sep-04 5:41 
    Generallink don't work Pin
    ArtemL25-Aug-04 21:45
    memberArtemL25-Aug-04 21:45 
    GeneralRe: link don't work Pin
    Peter Rilling26-Aug-04 5:16
    memberPeter Rilling26-Aug-04 5:16 
    GeneralRe: link don't work Pin
    ArtemL26-Aug-04 5:23
    memberArtemL26-Aug-04 5:23 
    GeneralFocus fix Pin
    ejohnson05476-Aug-04 8:17
    memberejohnson05476-Aug-04 8:17 
    GeneralRe: Focus fix Pin
    noxa18-Nov-04 18:22
    membernoxa18-Nov-04 18:22 
    GeneralTaskbar Issue, and Focus Fix Pin
    MightyBatgar25-Jun-04 9:16
    memberMightyBatgar25-Jun-04 9:16 
    GeneralRe: Taskbar Issue, and Focus Fix Pin
    jordiga20-Jul-04 10:46
    memberjordiga20-Jul-04 10:46 
    GeneralRe: Taskbar Issue, and Focus Fix Pin
    vavra7-Jun-06 21:28
    membervavra7-Jun-06 21:28 
    Generalthe mainForm will be lose active Pin
    interim10-Apr-04 1:25
    memberinterim10-Apr-04 1:25 
    GeneralRe: the mainForm will be lose active Pin
    Peter Rilling10-Apr-04 19:19
    memberPeter Rilling10-Apr-04 19:19 
    GeneralAnnouncement: Moved project portal to Pin
    Peter Rilling12-Aug-03 19:25
    memberPeter Rilling12-Aug-03 19:25 
    Generalit Balloon Position Pin
    kuerbis11-Aug-03 8:30
    memberkuerbis11-Aug-03 8:30 
    GeneralRe: it Balloon Position Pin
    Peter Rilling11-Aug-03 13:05
    memberPeter Rilling11-Aug-03 13:05 
    GeneralPossible bug and enhancement Pin
    charliedurrant6-Aug-03 4:25
    membercharliedurrant6-Aug-03 4:25 
    GeneralRe: Possible bug and enhancement Pin
    Peter Rilling6-Aug-03 9:23
    memberPeter Rilling6-Aug-03 9:23 
    GeneralPortal now available for this project. Pin
    Peter Rilling7-Jul-03 19:55
    memberPeter Rilling7-Jul-03 19:55 
    QuestionProblem With Shadow? Pin
    Omer van Kloeten2-Jun-03 22:23
    memberOmer van Kloeten2-Jun-03 22:23 
    AnswerRe: Problem With Shadow? Pin
    Peter Rilling15-Jun-03 13:38
    memberPeter Rilling15-Jun-03 13:38 
    GeneralMessage Balloon... Pin
    andy_tacker2-Jun-03 2:53
    memberandy_tacker2-Jun-03 2:53 
    GeneralRe: Message Balloon... Pin
    Peter Rilling13-Jun-03 20:49
    memberPeter Rilling13-Jun-03 20:49 

    General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

    Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

    | Advertise | Privacy | Terms of Use | Mobile
    Web01 | 2.8.151002.1 | Last Updated 14 Jul 2003
    Article Copyright 2002 by Peter Rilling
    Everything else Copyright © CodeProject, 1999-2015
    Layout: fixed | fluid