Over a million developers have joined DZone.

Windows Phone: Binding Contact Image to ListBox

DZone's Guide to

Windows Phone: Binding Contact Image to ListBox

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

In previous article Part 67 - Windows Phone - Get Contact Details I discussed how to get contact details. In this article I will explain how to get image from Contacts and bind it to ListBox.

Let's write code:

Step 1:  Add a ListBox and a Image below Listbox inside contentpanel of MainPage.xaml. ListBox will contain a image and textblock. Image inside listbox will hold the image of Contacts and textblock inside listbox will hold Contacts displayname. The image element outside ListBox will be used to show how to bind the Contacts image to individual image element.

<ListBox Grid.Row="1" Name="ContactResultsData" ItemsSource="{Binding}" Height="400" Margin="10,224,0,0" VerticalAlignment="Top">
         <StackPanel Orientation="Horizontal" >
            <Border BorderThickness="2" HorizontalAlignment="Left" VerticalAlignment="Center" BorderBrush="{StaticResource PhoneAccentBrush}" >
               <Image Source="{Binding Converter={StaticResource ContactPictureConverter}}" Width="48" Height="48" Stretch="Fill" />
            <TextBlock Name="ContactResults" Text="{Binding Path=DisplayName, Mode=OneWay}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="18,8,0,0" />

<Border BorderThickness="2" Height="60" Margin="10,-400,0,0" HorizontalAlignment="Left" BorderBrush="{StaticResource PhoneAccentBrush}" >
   <Image Name="Picture" Height="60" Width="60" HorizontalAlignment="Left" />

Step 2: Add namespace of application in phone:PhoneApplicationPage element in MainPage.xaml.


Step 3: Add below using directive in MainPage.xaml.cs


using Microsoft.Phone.UserData;
using System.Windows.Media.Imaging;

Step 4: Add below code inside constructor of MainPage.xaml.cs.


ContactResultsData.DataContext = null;
Contacts cons = new Contacts();
cons.SearchCompleted += new EventHandler<ContactsSearchEventArgs>(Contacts_SearchCompleted);
cons.SearchAsync("", FilterKind.None, "Contacts Image Test");

Step 5: Contacts_SearchCompleted method has two sections first section is to bind the first contact image to image element in MainPage.xaml and the second section is to bind the contact result to Listbox.

void Contacts_SearchCompleted(object sender, ContactsSearchEventArgs e)
      //Bind image to image element
      Contact con = e.Results.First();
      BitmapImage img = new BitmapImage();
      Picture.Source = img;

      //Bind the results to the list box that displays them in the UI
      ContactResultsData.DataContext = e.Results;
   catch (System.Exception)

Step 6: Create below class below MainPage class of MainPage.xaml.cs. ContactPictureConverter class bind the data.

public class ContactPictureConverter : System.Windows.Data.IValueConverter
   public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      Contact c = value as Contact;
      if (c == null) return null;
      System.IO.Stream imageStream = c.GetPicture();
      if (null != imageStream)
         return Microsoft.Phone.PictureDecoder.DecodeJpeg(imageStream);
      return null;

   public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      throw new NotImplementedException();

Step 7: Now run the appliction and you will notice the Contact image is binded to ListBox.

This ends the article of binding Contacts image to Listbox.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Published at DZone with permission of Sumit Dutta, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}