Beware, NotifyIcon for WPF Is Out! Now, Let’s Play a Game!

Join us on our quest to get to know the new Notify Icon in Telerik UI for WPF—officially out of beta and ready to play.

The R3 2020 release of Telerik UI for WPF is out and is full of spoils waiting for you to loot. One of these treasures is the notify icon which is now out of beta and officially ready to play.

The notify icon has been a main character in the Windows universe ever since Windows 95. There are probably very few if any Windows users that have not interacted with one when they have ventured into the notification area of their desktop. There you can find the coats of arms of all the apps you have running in the form of icons. Each icon signaling the status of the app through its sigil or giving you control of its abilities through popup(s) and/or context menu(s). In other situations when an app needs your attention it will send its messenger to wave a banner at you. This banner will be next to the notification area in the form of a balloon notification or next to the icon as a tooltip or a popup.

Now that you are familiar with the main character of today’s game, get ready player one for we are about to embark on a journey through the world of Notify Icon for WPF and its features. You choose whether it’s a speed run or a thorough scavenger hunt into every corner of the map. Now let’s jump straight into pops, tips and balloons.

Every Game Starts with a Tutorial (tooltips)

It is a potential make it or break it situation. You might have the best game with the best mechanics but if no one understands how to use them it’s no fun in the park. A smoother start would be to introduce them one by one and build the relationship between the player and the game. This same approach can be taken when introducing your application to the customer. You start with an icon in the tray area and when the user dares to come near the icon, you show a tooltip. What type of tooltip should you show? Well, that is entirely up to you. You just know that whatever you choose you can implement it with the WPF Notify Icon. You can go from the standard tooltip which is just an elegant text on a colored background, all the way up to a full-blown custom tooltip with as rich of a UI as you can muster.

        <telerik:RadNotifyIcon

            x:Name="icon"

            GuidItem="<Your Guid here>"

            DataContext="{Binding ElementName=viewModel}"

            UseNativeTooltip="False"

            TrayIconSource="/Icons/ProgressGreen.ico"

            TooltipContent="{Binding}">

            <telerik:RadNotifyIcon.TooltipContentTemplate>

                <DataTemplate>

                ...

                </DataTemplate>

            </telerik:RadNotifyIcon.TooltipContentTemplate>

        </telerik:RadNotifyIcon>

Main Menu and Controllers (input)

Every game needs some sort of input and some sort of feedback to that input. Naturally, you can have that with Notify Icon, no worries. You can react to mouse clicks and double clicks from any and every mouse button as well as selection with either keyboard or mouse. You can give more controls to play with to your users through the context menu. Why not put the whole main menu in there?

        <telerik:RadNotifyIcon

            x:Name="icon"

            GuidItem=" <Your Guid here> "

            DataContext="{Binding ElementName=viewModel}"

            TrayIconSource="/Icons/ProgressGreen.ico"

            TrayContextMenu="{Binding ElementName=contextMenu}"

            ContextMenuActivationMouseEvent = "RightClick"/>

        <telerik:RadContextMenu.ContextMenu>

            <telerik:RadContextMenu x:Name="contextMenu" ItemsSource="{Binding ContextMenuItems}"/>

        </telerik:RadContextMenu.ContextMenu>

Whack-a-Mole (popups)

In this classic game, moles stick out of holes and you smack them over the head with a mallet to make them go away. Now imagine that all the moles had something to tell you and they deliver their message as they crawl out of their hole. All is well then except, as the game demonstrates, moles are a bit hectic and the format of the messages they can deliver is very limited. Therefore, we decided against moles and instead we implemented popups which can display any combination of components. You have control over the open and close animation through the PopupShowAnimation and PopupHideAnimation. Additionally, you can change when the popup closes—when the user moves the focus away from it, after a set timeout or only when you call the API to close it. You can also combine any of these close modes using the enum property PopupCloseMode. To get the whack-a-mole experience you will need the Timeout value together with a programmatic reaction to the mouse which is also known as the “virtual mallet.”

If you are eager to start, go grab the Telerik UI for WPF R3 2020 bits and give it a whack.

        <telerik:RadNotifyIcon

            x:Name="icon"

            GuidItem=" <Your Guid here> "

            DataContext="{Binding ElementName=viewModel}"

            TrayIconSource="/Icons/ProgressGreen.ico"

            PopupActivationMouseEvent = "LeftClick"

            PopupCloseMode="None"

            PopupContent="{Binding}">

            <telerik:RadNotifyIcon.PopupContentTemplate>

                <DataTemplate>

                  ...

                </DataTemplate>

            </telerik:RadNotifyIcon.PopupContentTemplate>

        </telerik:RadNotifyIcon>

High Scores—That’s Why We Play, Right? (balloons)

Some things in life and in game deserve recognition and celebration. In those moments, balloons are a guaranteed win. You can have balloons flying out and away into the sky on every cool game event such as combos, high point tallies, cool moves, crashes, explosions, you name it. You can also have balloons to inform your users of any event that occurred within your app. These notifications come in the familiar Windows format and have a deep OS integration with the notification area and user’s quiet hours.

string balloonTitle = "Congratulations, Player 1! You made it to the highscore board.";

string balloonText = "HIGHSCORE!";

Icon balloonIcon = new Icon(@"..\..\Icons\Progress.ico"); 

this.icon.ShowBalloonTip(balloonTitle, balloonText, balloonIcon);

Flawless Victory!

You have completed this little quest. You are now well prepared to tackle the challenges of delivering great applications with stunning UI and cool notifications. Just one final thing left. In the world of high user expectations and short deadlines, it’s dangerous to go alone so take one of these:  Telerik UI for WPF