Introduction

A while ago, one of my colleagues from WPF Disciples showed me a video about a WPF app that Billy Hollis had put together. This app was written in VB.NET, and had a very nice notes listbox. There was supposed to be some source code published somewhere, but I couldn't find it. As such, I tried the task myself and am pretty pleased with the results. This article represents the fruits of my investigation/trials.

It is a re-usable Notes ListBox that can be applied to your own project with not too much bother (I hope).

Contents

Well, it looks like this, by default, but as Josh Smith will probably point out, this may not suit people's schemes/tastes. I say, thanks Josh, but they have the code, they can change these within the XAML. The problem with Mr. Smith is that he's just a lot brighter than the rest of us. I personally am quite happy about that, he is normally right.

The red bounding shape is the main focus of this article. This is the part I intended to be re-used; the rest of the UI is really just to demo the re-usable notes listbox. Though, there are one or two details that I will have to go through with you that you need to know before you are able to re-use the attached notes listbox in your own app. There is like one or two rules you need to adhere to.

What I wanted to create was a nice looking notes system that could be re-used within someone else's app. I think I have managed to do this (OK, you may have to change colors etc.). What the attached NotesListBox allows is as follows:

Intended to work with a Type that has a ObservableCollection<Note> Notes property.

Auto focus when you type in a note.

Add/Removal of note.

Mouse navigate through notes.

Designed to be placed in the AdornerLayer using the NoteAdorner. This preserves your existing screen space.

NotesListBox is just a listbox, but I think it's a pretty funky one, that looks as follows:

There are a couple of things worth a mention. So I will stroll on and mention them. One of the things that I like is how each item gets its own rotation. This is achieved using a ValueConverter (I use this for several index based binding conversions) that works with the current ListBoxItem index. Here is an example:

It can be seen that this one ValueConverter is used for a number of purposes associated with indexes within the associated ListBox. For example, it provides a Top/ZIndex and a Rotate binding value based on the current ListBoxItem index within the original ListBox.

Other than that, it's all about Styles/Templates. So, I shall leave that as an exercise for the reader. We will now go on to look at the NoteAdorner object and what it does for us. The NoteAdorner is an Adorner that holds a single instance of a NotesListBox. For those of you who have not heard of AdornerLayer, you can think of it as a special layer that is on top of the current content.

MSDN states: "An Adorner is a custom FrameworkElement that is bound to a UIElement. Adorners are rendered in an AdornerLayer, which is a rendering surface that is always on top of the adorned element or a collection of adorned elements. Rendering of an adorner is independent from rendering of the UIElement that the adorner is bound to. An adorner is typically positioned relative to the element to which it is bound, using the standard 2D coordinate origin located at the upper-left of the adorned element.

So we can take advantage of this and use this layer to overlay items which don't affect the layout of anything else. This is what the NoteAdorner does. Its only job is to receive a ObservableCollection<Note> Notes from the current object (the one you want to store notes with), which it passes on to the hosted NotesListBox. The hosted NotesListBox actually then takes ownership of the ObservableCollection<Note> Notes that was passed to it, and will raise events when the user either adds/removes/changes a note. This gives the end user the opportunity to be alerted when one of these actions happens. This will be explained a bit further in the next section.

There is actually very little you need to be aware of when using this code, but you must follow the following two items if you wish to use this NotesListBox in your own code.

Provide a Custom AdornerDecorator

As the NotesListBox is intended to work with the AdornerLayer, you must use the custom AdornerDecorator (NotesAdornerDecorator) that I have made. This article had originally required the user to create an inline XAML AdornerDecorator which wrapped their original content, and the user had to put code in their own application to manage the Adorner, but Josh told me it would be better if you created a subclass of AdornerDecorator where it managed itself, and all the user had to do was put in their XAML and provide a property to it and wire up its events. So this is what I have now done. The result is that the NotesListBox is very easy to use in your own code now. You simply do the following:

Create a NotesAdornerDecorator somewhere in your main content element (this is normally a Grid):

This allows NotesListBox to manage its own AdornerLayer. All you have to do then is set the NotesAdornerDecorator.DisplayNotes property and wire up the NotesAdornerDecorator events. This is shown below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using NotesListBox;
using System.Collections.ObjectModel;
namespace NotesListBoxTest
{
publicpartialclass Window1 : Window
{
#region Ctor
public Window1()
{
InitializeComponent();
#region Wire up Routed Events
//Wire up the Note Added Event, which will come from the
//NotesListBoxControl on the AdornerLayer
EventManager.RegisterClassHandler(
typeof(NotesListBoxControl),
NotesListBoxControl.NoteAddedEvent,
new NoteEventHandler(
(s, ea) =>
{
Console.WriteLine(CreateNoteMessage(ea.Note));
}));
//Wire up the Note Removed Event, which will come from the
//NotesListBoxControl on the AdornerLayer
EventManager.RegisterClassHandler(
typeof(NotesListBoxControl),
NotesListBoxControl.NoteRemovedEvent,
new NoteEventHandler(
(s, ea) =>
{
Console.WriteLine(CreateNoteMessage(ea.Note));
}));
//Wire up the Note Changed Event, which will come from the
//NotesListBoxControl on the AdornerLayer
EventManager.RegisterClassHandler(
typeof(NotesListBoxControl),
NotesListBoxControl.NoteChangedEvent,
new NoteEventHandler(
(s, ea) =>
{
Console.WriteLine(CreateNoteMessage(ea.Note));
}));
#endregionthis.Loaded +=new RoutedEventHandler(Window1_Loaded);
}
#endregion
.....
.....
.....
privatevoid lstPeople_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
notesAdornerDecorator.DisplayNotes = (lstPeople.SelectedItem as Person).Notes;
}
#endregion
}
}

It's that easy.

I think the bit of advise Josh Smith gave me has improved the re-usability a lot. So thanks for the idea Josh.

That's it

That's all I wanted to say this time, I hope it helps some of you. Could I just ask, if you liked this article, please vote for it.

I was wondering if it is possible to send events from NotesListBoxTest to NotesListBox? What I am trying to achieve is to select, focus on a note in lstNotes(NotesListBoxControl) based on which note's textblock is clicked in lstNotesForPerson(Window1).

I tried with EventManager.RegisterClassHandler on NotesListBox but it does not work. Is there any other way I can notify NotesListBoxControl about events coming from Window1?

I got it working by using OnPropertyChanged event inside a Note class. I know it is not the cleanest of solutions but it does the job just fine. Thanks to this project I really got into WPF and would like to spend more time learning it. At the moment I have a pretty functional SCRUM task board that persists data in DB So great job and 5 starts to you.

Dear Sacha Barber,
this is my first vote ever on CP. I am currently searching for examples what WPF is and what it can do. So I found this article and now I know this is the next thing I wanna learn. I rated this with 5 stars. Also I was searching the web for books and found a book and Apress with the author Sacha Barber that must be probably you

Unfortunately I cant find it anymore on Apress I hope they dont wanna release it. This would be the second book i wanted to buy but Apress canceled it.

I wish you luck on this one and I will follow your articles on my journey

As for the book, I actually cancelled on Apress, as the period they gave me to write a book was totally off. Too little time for too much work. I was actually going to write it with Daniel Vaughan and Marlon Grech both of whom I have a great deal of time for.

Sacha Barber

Microsoft Visual C# MVP 2008/2009

Codeproject MVP 2008/2009

Your best friend is you.
I'm my best friend too. We share the same views, and hardly ever argue

Mohammad, I'd expect more of you - you've been on the forums long enough. While I respect your right to dislike this article, I'd expect you to actually state why you think it's poor. A single bald statement does you and Sacha a disservice. Please elaborate what your problem actually is.

"WPF has many lovers. It's a veritable porn star!" - Josh Smith

As Braveheart once said, "You can take our freedom but you'll never take our Hobnobs!" - Martin Hughes.

Ok, please tell me what I am doing wrong. Let us take the basic scenario:

I run the test project and set a breakpoint on CreateNoteMessage. I expect it to stop at that breakpoint when a new note is added, ideally when the focus is lost from the newly created note. Am I missing something?