Friday, December 24, 2010

Balloon Pop-ups and Toaster Pops

Recently I was looking into balloons, toaster-pops, and general system tray messages.  There's nothing much WPF gives you out of the box to give you a leg up. So I turned to Google to search for either code samples or control libraries.  I found a fantastic free open-source all-in-one framework for all things balloons, system-tray and toaster-pops.

Check it out here:
http://www.hardcodet.net/projects/wpf-notifyicon



So it looks cool, but how hard is it to make a quick and dirty sample application that shows a custom balloon pop-up out of the system tray? (and yes it follows the tray if you move your task bar).


  1. Create a new WPF project and reference the one Hardcodet.Wpf.TaskbarNotification DLL.
  2. Add this code to the MainWindow.Xaml
    <TextBlock Text="Wait 5 seconds for the ring balloon popup to appear." />
    <tb:TaskbarIcon x:Name="tb" VerticalAlignment="Top" Visibility="Hidden" />
    
    
  3. Add this to the code behind:
    private DispatcherTimer timer;
    
            public MainWindow()
            {
                InitializeComponent();
                Loaded += OnLoaded;
            }
    
            private void OnLoaded(object sender, System.Windows.RoutedEventArgs e)
            {
                this.timer = new DispatcherTimer(new TimeSpan(0, 0, 6), DispatcherPriority.Normal, OnTimerTick, Dispatcher);
                this.timer.Start();
            }
    
            private void OnTimerTick(object sender, EventArgs e)
            {
                var balloon = new FancyBalloon { BalloonText = "Ring Ring" };
                tb.ShowCustomBalloon(balloon, PopupAnimation.Scroll, 3000);
            }
  4. Add a user control to define what you want your custom pop-up to look like.
    <UserControl x:Class="WpfBasicBalloon.FancyBalloon"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 Height="300" Width="300">
        <Grid>
            <Border 
                Opacity="0.5"
                Background="Pink" 
                BorderBrush="Red"
                BorderThickness="2"
                CornerRadius="10"
                Margin="10">
                <Border.BitmapEffect>
                    <DropShadowBitmapEffect />
                </Border.BitmapEffect>
                <StackPanel Margin="10">
                <TextBlock Text="Hello World - in pink just for Jo. :-)" />
                <TextBlock Text="{Binding BalloonText}" />
            </StackPanel>
            </Border>
        </Grid>
    </UserControl>

Easy.


Its so little code, given a few days of my cat walking randomly across my keyboard, there's a good chance he will come up with this code on his own. Better chances of winning the lottery over the holiday break any way!

Happy holidays.

No comments:

Post a Comment