Video : ListBox Data Binding in Windows Phone


using System.Collections.Generic;
using Microsoft.Phone.Controls;

namespace PhoneApp1
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
this.DataContext = GetProducts();
}

private List<Product> GetProducts()
{
List<Product> lstProduct = new List<Product>
{
new Product { ProductName ="Pen" , ProductCat ="Education" , ProductPrice = 100 },
new Product { ProductName ="Pencil" , ProductCat ="Education" , ProductPrice = 200 },
new Product { ProductName ="Bat" , ProductCat ="Sports" , ProductPrice = 400 },
new Product { ProductName ="Ball" , ProductCat ="Sprots" , ProductPrice = 90 },
new Product { ProductName ="Eraser" , ProductCat ="Education" , ProductPrice = 10 },
new Product { ProductName ="Shoes" , ProductCat ="Sports" , ProductPrice = 790 },
new Product { ProductName ="NoteBook" , ProductCat ="Education" , ProductPrice = 345 },
new Product { ProductName ="Cycle" , ProductCat ="Sports" , ProductPrice = 5000 },
new Product { ProductName ="Gel Pen" , ProductCat ="Education" , ProductPrice = 130 },
new Product { ProductName ="Football" , ProductCat ="Sports" , ProductPrice = 440 },
new Product { ProductName ="Hockey Stick" , ProductCat ="Sports" , ProductPrice = 320 },
new Product { ProductName ="Drwaing  Book" , ProductCat ="Education" , ProductPrice = 480 },
new Product { ProductName ="Novel" , ProductCat ="Education" , ProductPrice = 180 },
new Product { ProductName ="Tenis Bat" , ProductCat ="Sports" , ProductPrice = 340 },
new Product { ProductName ="Tenis Ball" , ProductCat ="Sports" , ProductPrice = 46 }

};
return lstProduct;

}
}

public class Product
{
public string ProductName { get; set; }
public string ProductCat { get; set; }
public int ProductPrice { get; set; }
}
}


<ListBox x:Name="lstProduct" ItemsSource="{Binding}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding ProductName}" Style="{StaticResource PhoneTextTitle2Style}" />
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{Binding ProductCat}" Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock Text="{Binding ProductPrice}" Style="{StaticResource PhoneTextAccentStyle }" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Select ListBox Item on the Hold event in Windows Phone

I was working on an application and I had to select a List Box Item on the hold event. My List Box was as below,

image

You see in the List Box, I have put an Image control and binding Source and Tag dependency property of the image to the data source.

At the code behind, I got an entity class Photo as below,

image

Finally, I am setting ItemsSource of ListBox as below. lstPhotos is list of Photo.

image

Now question comes that how to set a particular image from list of images in ListBox on the hold event. When user hold a particular image in ListBox that image should get selected. For that I have raised a hold event on the Image control in List Box and in the hold event need to fetch the selected image as data context.

image

In above code you cans see that I am getting data context of selected image in instance of entity class photo. In this way you can select a ListBox item on the hold event.

Before I conclude one point keep in mind that you need to raise Hold event on the container inside the ListBox. For example, if you have a StackPanel inside DataTemplate then you need to raise the Hold event on StackPanel. In my case there is no container but an Image so I am raising Hold event on the Image control. Avoid raising hold event on ListBox itself else you will get NullReference exception.

I hope this quick post is useful. Thanks for reading.