Previous month:
July 2011
Next month:
September 2011

August 2011

WPF ListBox Postioning using a Canvas

Recently I’ve been asked how a list of graphical elements can be positioned, and the elements should be selectable. What panel could be used for this – a list of elements, and an element should be selectable – usually that’s the job of a ListBox. However, how can the elements in the ListBox be positioned using X/Y coordinates? For this job a Canvas can be used. Using a Canvas element for the ListBox turned out to be really simple as this article describes.


First I’m creating an Item type that should be displayed and contains coordinate information:

public class Item { public double X { get; set; } public double Y { get; set; } public string Name { get; set; } public string Color { get; set; } }

The collection of sample items is created within the ItemsFactory class:

public class ItemsFactory { private List<Item> items; public IEnumerable<Item> Items { get { return items ?? (items = new List<Item>() { new Item { Name = "One", X = 33, Y = 25, Color="Red" }, new Item { Name = "Two", X = 88, Y = 11, Color="Green" }, new Item { Name = "Three", X = 44, Y = 99, Color="Blue" } }); } } }

To display the elements within the view, the ItemsFactory is defined within resources and this resource is accessed applying a DataContext. The ListBox is bound to the Items property of the ItemsFactory and thus displays the items. The default view of the ListBox is just a list of strings, in this case the Item class didn’t override the ToString method and thus only the name of the classes is displayed.

<Window x:Class="ObjectListSample.MainWindow" xmlns="" xmlns:x="" xmlns:local="clr-namespace:ObjectListSample" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <local:ItemsFactory x:Key="sampleItems" /> </Window.Resources> <Grid DataContext="{StaticResource sampleItems}"> <ListBox ItemsSource="{Binding Items}" /> </Grid> </Window>

The display can be changed by defining an ItemTemplate for the items of the ListBox. The items are displayed as an ellipse within a Canvas element. As it’s contained within a Canvas the Ellipse can be positioned with Canvas.Left and Canvas.Top. The position information is taken from the X and Y properties of the Item. Beside the position also the Color and Name properties of the Item are used for the display.

<Style x:Key="objectList" TargetType="ListBox"> <Setter Property="ItemTemplate"> <Setter.Value> <DataTemplate> <Canvas> <Grid Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}"> <Ellipse Fill="{Binding Color}" Width="50" Height="40" /> <ContentPresenter Content="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </Canvas> </DataTemplate> </Setter.Value> </Setter> </Style>

Applying the style for the ListBox the new display is ready.

<ListBox Style="{StaticResource objectList}" ItemsSource="{Binding Items}" />

As the screenshot shows, the items are shown according the values of the Item objects within a Canvas. Does this look lie a ListBox? It’s a ListBox! The items can also be selected. The screenshot shows element Two as selected element.



CN innovation

More information in my WPF workshops

WPF ListBox as BarChart

BASTA! 2011 in Mainz

Bei der diesjährigen Basta! in Mainz gibt es von mir gleich 4 Vorträge!


Umstieg von ASP.NET Web Forms auf ASP.NET MVC

Dienstag, 9:30

Dabei gibt es für ASP.NET Web Forms Entwickler Foundations zu ASP.NET MVC, welche Vor- und Nachteile MVC hat, wie Websites umgestellt werden können, und wie auch ASP.NET Web Forms und MVC gemeinsam verwendet werden kann.

The Secrets of Delegates

Dienstag, 17:15

Bei dieser Sessions wird einiges von Delegates aufgedeckt: delegates & events, asynchrone Features von delegates, Probleme und Lösungen zu strong references, anonyme methoden, Lambdas, Closures….

Storage mit Windows Azure

Mittwoch, 10:15

Relationale Daten oder… Diese Session gibt Einblicke neben dem Speichern von relationalen Daten in die Funktionsweise und Features von Azure Table, Blob, Queue, und Drive Storage.

C# und Dynamic

Mittwoch, 15:45

Mit C# 4 gibt es das dynamic Keyword. Hier wird dynamic im Einsatz mit COM, Reflection, der Integration zu JavaScript und Python gezeigt. Weiter geht’s mit ExpandoObject, DynamicObject…..


4 unterschiedliche Themen! Welche Session ist für dich am interessantesten?


See you in Mainz!


CN innovation

Real World .NET 4 and C#

While I’m already working on the next edition of Professional C#, my next book will be released in November: Real World .NET 4 and C# – Indispensable Experiences from 15 .NET and C# MVPs:


This book contains great information from 15 MVP’s. A lot of stuff is covered: ASP.NET, Silverlight, WPF, WCF, WF, User Stories, and Unit Testing.

On ASP.NET you can read about ethical hacking, getting the best performance out, and integration with JQuery. Silverligjht is shown in the light of writing real-world applications, MVVM patterns, and using Silverlight with the Windows Phone. Development driven by User Stories and Unit Testing is covered as well.

From the 15 MVPs, three of the book-MVPs are from thinktecture consultants. Christian Weyer covers pragmatic WCF, Dominick Baier gets into securing WCF services by using the Windows Identity Foundation (claims! claims! claims!), and I’m doing all aspects of WPF data binding.

I’m sure you’ll enjoy the book! Links to Amazon can be found on my new Webpage:

Real World .NET 4 and C#, get it from

Real World .NET 4 and C#, get it from


CN innovation