• Bio
• @sumitdutta21

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}" "400" Margin="10,224,0,0" VerticalAlignment="Top">
   <ListBox.ItemTemplate>
      <DataTemplate>
         <StackPanel Orientation="Horizontal" >
            <Border BorderThickness="2" HorizontalAlignment="Left" VerticalAlignment="Center" BorderBrush="{StaticResource PhoneAccentBrush}" >
               <Image Source="{Binding Converter={StaticResource ContactPictureConverter}}" "48" "48" Stretch="Fill" />
            </Border>
            <TextBlock Name="ContactResults" Text="{Binding Path=DisplayName, Mode=OneWay}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="18,8,0,0" />
         </StackPanel>
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>


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

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

xmlns:MyApp="clr-namespace:WP_Display_Contacts_Photo"

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)
{
   try
   {
      //Bind image to image element
      Contact con = e.Results.First();
      BitmapImage img = new BitmapImage();
      img.SetSource(con.GetPicture());
      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.

• Windows Phone