WPF : Using Adorner for overlaying Empty Collections

Adorners can be used for a number of things in WPF. Mostly they are used to provide feedbacks to indicate control states in response of certain events. You might have seen this for applications supporting drag and drop operations. They are also used to overlay visual decoration on top of an element e.g. control in error. You might have seen adorners when we allow users to manipulate elements including resizing, rotating and repositioning. Lastly, we can use them to mask a UIElement.

In this post, we will be using adorners for overlaying an empty items control. This is like ALT message in HTML image when the image is not loaded for any reason. This can be used to provide feedback to user why this ItemsControl is empty. We can also provide links to navigate to the application area which can be used to fix this. This may include some configurations, connecting to a network or whatever the case may be. Here we will be providing support for providing the details of DataTemplate and Content to be used in the adorner layer of an empty ItemsControl. This would give application developer complete control about the look and feel of the empty state.

For a brief introduction about the feature, you might want to skim through this post [WPF Adorners]. This post is specific to WPF as Microsoft removed adorners for Windows Phone and Windows Store applications.

Let's first create the adorner. The adorner creates a ContentPresenter using the DataTemplate and Content details. The ContentPresenter is then added to the adorner layer of the ItemsControl being adorned, which is expected to be defined under an AdornerDecorator element in the XAML.


Now let's define our behavior. It just keeps an instance of the adorner defined above and hooks up to event as the items are being changed in the ItemsControl being adorned. If the element count is ZERO, it just turns the Adorner as visible. It has two dependency properties to assign a DataTemplate and Content to the


Now we just need to add the behavior in the UI code. Here we are assigning the DataTemplate and Content to the behavior's properties.


Now we can run the application. As the ItemsControl becomes empty, it shows the following overlay. This is hidden as elements are added to the collection.



You can download the source code from here: