A WPF-Friendly Shell_NotifyIcon Wrapper Class - Part 3: Ad Blocker Front End

• Download demo project - 196 KB
• Download source - 221.9 KB

Introduction

This article provides an opportunity to learn about the range of topics I explored while building the front end of an ad blocker for the Windows 10 desktop. My next article will cover the back end of this ad blocker. My primary goal was to create an ad blocker that could be enabled or disabled by clicking on a notify icon.

This article (Part 3: Ad Blocker Front End) is a real-life example of NotifyIconLibrary in action.

Background

User Interface Goals

My goals for the UI were straightforward:

• Control the operation of the ad blocker from the context menu of a Notify Icon
• Provide the following commands:
  • Block
  • Unblock
  • About
  • Exit
• Provide support for keyboard navigation
• Provide multi-lingual support
• Use MVVM concepts:
  • Use view models to separate the "what" from the "how".
  • Use RelayCommand to eliminate as many event handlers in the views as possible.
  • Use EventToCommand to separate the "what" from the "how".
• Make the GUI readily testable by creating a back-end stub that can be directly debugged without elevation.

Using the Code

AdBlockerTest can be exercised under Visual Studio 2019 Preview or stand alone. You can use the debug version or the release version. I suggest running the debug version under the debugger so that you can interact with the running application to see what it is doing.

Execution begins in the Program Module and uses the AppWrapper project, the AdBlockingManager stub, and the AdBlockerLibrary project. The AdBlockerLibrary project, in turn, uses the NotifyIconWrapper project.

There is an interface called IAdBlockingManager in AdBlockingLibrary, that "defines the contract" between AdBlockingLibrary and its two possible clients: AdBlockingManager and AdBlockingManagerStub. This abstracts out the responsibilities that these two alternative clients assume relative to the AdBlockingLibrary.

Once the application starts, you will find a notify icon on the Task Bar. This icon will be a green traffic signal. After a few seconds, the notify icon will migrate to the Notification Area. That's the rectangular pop-up window that is displayed when you click on the "^" symbol on the Task Bar. You can left double click on the notify icon to reverse the setting of the traffic signal. Red (stop) means that ads are currently blocked. Green (go) means that ads are currently unblocked. You can also use the keyboard to navigate to the notify icon\ or the "^" symbol on the Task Bar by pressing Windows+B followed by some number of right arrows. If the notify icon is hidden, once you reach the "^" symbol, press the space bar to open the Notification Area. Then use the arrow keys to navigate to the notify icon. Now you can use the Context Menu key or the Enter key to open the application's Context Menu. You can navigate to the Context Menu by using the up and down arrow keys or close the Context Menu by using the escape key. You can also open the Context Menu by right clicking the notify icon. You can select an item from the Context Menu by using the Space key or the Enter key, or by left clicking the desired item. There are four items:

1. Block item blocks ads
2. Unblock option unblocks ads
3. About option opens the About dialog
4. Exit option closes the Context Menu, removes the notify icon and exits the application

You can close the About dialog by clicking the "X" or by pressing the escape key.

Points of Interest

One unusual aspect of this architectural design is that the main view is defined in a dll (AdBlockerLibrary) rather the usual exe (AdBlockerTest).

Rather than taking a dependency on MVVM Light, I chose to keep this application independent of such third-party code. One of the effects of this is that, rather than using EventToCommand as intended, I chose to use EventBindingExtension. It's a lot more elegant but, unfortunately a lot less portable. If you are going to use MVVM Light or some other alternative, you can readily retrofit it here. In fact, there are several classes here that can be readily replaced by equivalent features of MVVM Light.

The next article in this series will deal with the back end of the ad blocking application, itself.

History

• 1^st December, 2020: Initial version