Creating a Small Overlay Window
       by kirupa  |  25 March 2010

While many of your applications probably look like a traidtional windows application, with WPF, you have the abiltity to make your applications look different easily. One such application that you will learn to create in this tutorial is a what I call a small overlay:

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

In this article, learn how to use Expression Blend to create a window 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 ]

  1. Once you have created your application, you will see an empty artboard with a silhouette of a Windows application border:
  2. 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 ]

  1. Use the adorners to resize your window to make it 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:

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

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

  1. 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:

  1. 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:

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

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

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

  1. 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:

  1. 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.

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. More technically, 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 following article on Events and Event Handlers first.

From inside Expression Blend, select your Window object again. Look in the Properties Inspector and clicking 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:

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:

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:

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

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:

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:

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:

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, 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! 😇

Kirupa's signature!

Need help?

Ask on the forums!

 

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):

Download Final Source

 

 

 



SUPPORTERS:
kirupa.com's fast and reliable hosting provided by Media Temple.