While many of your applications probably look like a traditional windows application, with WPF, you have the ability to make your applications look and behave differently with little effort. One such application that you will learn to create in this tutorial is a what I call a small overlay:

[ say hello everyone ]

The overlay application is something that is permanently fixated at one of your monitor's sides and is always visible over other applications:

[ hello again ]

In this article, learn how to use Expression Blend to create a window that looks and behaves just like this.

Getting Started

All you need to create this application is Expression Blend. Be sure to download and install the trial version if you don't have it yet.

1. First, launch Expression Blend and create a new WPF project. Give your project any name that you want:

[ create a new WPF application ]

2. Once you have created your application, you will see an empty artboard with a silhouette of a Windows application border:
3. From the Objects and Timeline panel, go ahead and select the Window object with your mouse. When Window is selected, you will see some resize adorners appear on your artboard:

[ the resize adorners allow you to drag to resize your window ]

4. Use the adorners to resize your window to make it really small:

[ make your window really small ]

If you do not want to use the adorners, you can always enter a width and height manually in the Width and Height properties found in Properties Inspector's Layout category:

[ if you don't like the adorners, maybe the properties are your calling ]

Regardless of how you make your window small...just make your window small.

5. Go ahead and hit F5 and run your application to see what things look like right now:

[ this looks too much like a traditional window ]

6. There are several things we need to change about what you see right now. Your application is resizable, displays a border, shows up in your taskbar, can be hidden behind other applications, and it displays the Windows minimize/maximize/close buttons. Let's remove all of those niceties for our particular application.
   
   From your Objects and Timeline panel, select your Window object:

[ the Objects and Timeline panel displays all the elements in your current scope ]

7. Once your Window object has been selected, go to your Properties Inspector. Let's make the changes to customize how our Window looks and behaves.

From the Appearance category, set AllowsTransparency to True and set WindowStyle to None:

[ these properties get you closer to having the ideal, overlay window ]

Next, move down to your Common Properties category. Set the ResizeMode property to NoResize,uncheck the ShowInTaskbar property, and check the Topmost propety:

[ you are almost getting there... ]

8. Your artboard should look very plain and boring right now:

[ there is almost nothing there! ]

To fix this, draw a colored rectangle and make sure its top edge is positioned towards the top edge of your window area:

[ draw a rectangle to make your application display something ]

9. Once you have drawn the small rectangle, go ahead and hit F5 to run your application now. After a few seconds, you will see your application appear:

[ what your application looks like right now...! ]

10. Yikes. This application looks pretty hideous right now. Let's fix that later, but don't worry - this tutorial won't be concluded without making our application look less hideous.

Instead, let's first go ahead and look at how to position our application at the top of our window...in the next section!

---

In the previous section, you spent all of your time creating your window. Now that your window looks sort of like what you want, let's look at positioning it correctly and making it look normal.

Positioning the Overlay Application

What we want to do is have your application appear on the top-right of your screen when it is launched. Right now it probably appears in some arbitrary location.

The way you address this is by writing some code that gets executed when your application loads. To go a bit deeper, you need to have some code execute when your Window's Loaded event is fired. If you are not familiar with events or event handlers, please read the short article on Event Handlers.

From inside Expression Blend, select your Window object again. Look in the Properties Inspector and click on the Events button (found near the top-right of your Properties panel):

[ click on the events button to to view your Window's events ]

You will see a list of events displayed. Scroll down until you find the Loaded event with a text field next to it where you can specify the name of your event handler. In that textfield, type in the word PositionAtTop:

[ give your Loaded event the event handler name PositionAtTop ]

Once you type in PositionAtTop, press Enter. You will be taken into code view where you will see your event handler displayed along with some additional code that is used to make your app start:

namespace OverlayApplication
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
  public MainWindow()
  {
  this.InitializeComponent();
  // Insert code required on object creation below this point.
  }
  private void PositionAtTop(object sender, System.Windows.RoutedEventArgs e)
  {
  // TODO: Add event handler implementation here.
  }
  }
}

Inside the PositionAtTop event handler, add the following lines of code:

private void PositionAtTop(object sender, System.Windows.RoutedEventArgs e)
{
  this.Top = 0;
  this.Left = System.Windows.SystemParameters.VirtualScreenWidth - 250;
}

These two lines of code are pretty self-explanatory. The first line sets the Top position of your Window to 0 where it appears at the very top of your screen. The second line sets the left position of your Window to be 250 pixels left of the right-most edge of your screen.

If you run your application now, notice that your app now loads at the top-right corner of your screen:

[ you would be done if the app didn't look hideous ]

Yay, success!

Making your Overlay Look Nice

As promised earlier, let's now take care of making the overlay look a bit nicer than what looks like a small rectangle stuck inside a larger white rectnagle.

What we are going to do is give your application a transparent background and give our rectangle a drop-shadow to make it feel more like a standard Windows window.

The current white color comes from a background specified on your Window object. Select your Window again from your Objects and Timeline panel, look in your Brushes category in the Properties Inspector, select the Background property, and click on the No brush tab:

[ remove the background color set on your application ]

When you click on No brush tab, the white color that was originally set will now be reset to something transparent:

[ what your application looks like on the artboard ]

The last thing we are going to do is add a drop shadow to our only visible rectangle. Go to your Assets panel and click on the Effects category. You will see a whopping two effects displayed - DropShadowEffect and BlurEffect:

[ go to the Effects category in the Assets panel ]

Select your DropShadowEffect and drag/drop it onto your rectangle. Once you have dropped the effect onto your rectangle, your Properties Inspector will display the properties on the effect that you can modify:

[ these properties affect what your drop shadow looks like ]

Change your BlurRadius to 18, and set the RenderingBias to Quality.

Once you have done this, press F5 to test your application. Notice that your application appears towards the top-right of your screen as you had specified earlier, but the difference now is that only your content rectangle is visible, and it has an awesome drop shadow as well:

[ your app is now done! ]

Conclusion

Well, there is nothing left to explain for this tutorial. Notice that I only covered the bare minimum of things needed to create an application that acts as a permanent overlay. For a real application, there are a few things you need to think about it such as making it easy to close this application, having visual states for Focus, and deciding whether your app needs to permanently be visible above all of your other applications all of the time.

With that said, here is the source code to a slightly enhanced version of the application that you created (and is shown in my initial screenshot):

---

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇