Ryan, I you read this, please shout a small advert for my 2Day todo-list application, thanks 😀

Tonight while listening to the Windows Developer Show podcast, a nice challenge came up as a listener had a question about usage of events in a ListBox on the Windows Phone platform. Ryan had the good idea to suggest that a listener could write a blog post before the end of the show to help this guy, and here we are 🙂

Background

In the sample app, because of lack of time, I go straight to the point. In the XAML, I have a ListBox databound to an ObservableCollection. I use code-behind and I’m not using MVVM pattern but for the point of this article, I guess it’s good enough. So here is the XAML:

and here is the code-behing:

public partial class MainPage : PhoneApplicationPage
{
    private readonly ObservableCollection dataSource;

    public MainPage()
    {
        this.InitializeComponent();

        this.dataSource = new ObservableCollection { new Item { Name = "Ryan" }, new Item { Name = "Travis" }, new Item { Name = "Jeremy " } };

        // no MVVM for this sample...
        this.DataContext = this;
    }

    public ObservableCollection DataSource
    {
        get { return this.dataSource; }
    }
}

public class Item 
{
    public string Name { get; set; }
}

Wiring events

So now the question is: how I can use events for the items inside the ListBox. Here are the options you have:

Options 1: use event handlers

The idea is just to setup an event handler in the XAML of the DataTemplate. Here is the XAML:

and here is the associated C#:

private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    // option 1
    // sender is the Border
    // navigate the visual tree up to find the ListBoxItem if needed
    // datacontext is the instance of the Item objects
}

Option 2: use commands

Another option is to use command which is very common for MVVM apps. The trick you might need is to wire an command on something that is not a button. But the problem is that it’s the Button type which has a Command property. A possible trick is to style the button to make it looks like a standard control, here is an example:

Option 3: use attached properties

Another option, use attached properties. See this blog post about the way to achieve that. The blog post is old and targets WPF but the same principles are valid for a Windows Phone 7 app.

Option 4: use MVVM Light’s EventToCommand

MVVMLight is a very nice MVVM framework. EventToCommand is an extension of the previously described attached properties and can help you attach a command to an event.

Hope it helps 🙂