BASTA! 2011 in Mainz
Reserve the date! Developer Day 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


Feed You can follow this conversation by subscribing to the comment feed for this post.


the following is not working

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.


Post a comment

Your Information

(Name and email address are required. Email address will not be displayed with the comment.)