Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

How to display the photo of a contact for Windows Phone 8

August 19, 2014

Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

The process for displaying the photo of a contact is to get a reference to the Contact object, create a new bitmap image, set its source to GetPicture, and then display the bitmap in the user interface. You can also create a custom data converter and data-bind the photo to the user interface. For more information about accessing contact data, see How to access contact data for Windows Phone 8.

NoteNote:

Windows Phone SDK 7.1 gives you read-only access to the user’s contact data, aggregated across the user's different accounts. Most accounts provide access to photos. For more information, see Contacts and Calendar for Windows Phone 8.

Contact name and photo

This topic contains the following sections.

In this procedure, you put the code in a button click event for testing purposes only. In your own applications, you can access a contact photo wherever you need it. The following procedure assumes that you have a Windows Phone application that has a page that you can add controls to.

Important noteImportant Note:

Windows Phone Emulator contains sample contacts; however, they do not have photos. You should test this procedure using a physical device.

To display the photo of a contact

  1. Open the XAML editor for your page and add the following code. You can add the code to the Content Panel or Layout Root GRID element. This creates a blank image control to hold the photo and a button. It also puts a theme-aware border around the photo.

    <StackPanel Orientation="Horizontal">
        <Border BorderThickness="2" HorizontalAlignment="Left" BorderBrush="{StaticResource PhoneAccentBrush}" >
    
            <Image Name="Picture" Height="85" Width="85" HorizontalAlignment="Left" />
        </Border>
        <Button Content="Get One Picture" Width="Auto" Click="ButtonOnePicture_Click" />
    </StackPanel>
    
  2. Open the code-behind file for your page. At the top, add the following statements.

    using Microsoft.Phone.UserData;
    using System.Windows.Media.Imaging;
    
  3. Add the following code to the class for your page. This code contains the button click event, and starts the asynchronous contact search.

    private void ButtonOnePicture_Click(object sender, RoutedEventArgs e)
    {
        Contacts cons = new Contacts();
    
        //Identify the method that runs after the asynchronous search completes.
        cons.SearchCompleted += new EventHandler<ContactsSearchEventArgs>(Contacts_SearchCompleted_One);
    
        //Start the asynchronous search.
        cons.SearchAsync(String.Empty, FilterKind.None, "Contacts Test #2 Picture");
    
        //cons.SearchAsync(String.Empty, FilterKind.PinnedToStart, "Contacts Test #2 Picture");
    }
    
  4. Add the following code to the class for your page. This code contains the method to handle the completed event of the asynchronous search. In this code, you take the first contact returned by the search, create a new bitmap image, set its source to GetPicture, and display the photo in the image control that you added in step 1.

    void Contacts_SearchCompleted_One(object sender, ContactsSearchEventArgs e)
    {
        try
        {
            //We are using the first contact only.
            Contact con = e.Results.First();
    
            BitmapImage img = new BitmapImage();
            img.SetSource(con.GetPicture());
            Picture.Source = img;
        }
        catch (Exception)
        {
            //We can't get a picture of the contact.
        }
    }
    
  5. Save and build your solution.

  6. Start your application and click the button.

    The photo of the first contact should appear. If the photo does not appear, it may be because the first contact does not have a photo. Try changing the contact search to return the contacts pinned to the Start screen instead of all contacts. To do that, in the code for step 3, uncomment the last line and comment out the second-to-last line. For more information, see Contact filtering and matching for Windows Phone 8.

Because contact photos are not properties, but instead are retrieved by calling the GetPicture method, you need a custom data converter to bind them. In this procedure, you put the code in a button click event for testing purposes only. In your own applications, you can access contact photos wherever you need them. The following procedure assumes that you have a Windows Phone application that has a page that you can add controls to.

Important noteImportant Note:

Windows Phone Emulator contains sample contacts; however, they do not have photos. You should test this procedure using a physical device.

To data-bind a photo to the user interface

  1. Open the code-behind file for your page. At the top, add the following statements.

    using Microsoft.Phone.UserData;
    using System.Windows.Media.Imaging;
    
  2. Add the following code to the class for your page. This code contains the button click event, and starts the asynchronous contact search.

    private void ButtonManyPictures_Click(object sender, RoutedEventArgs e)
    {
        Contacts cons = new Contacts();
    
        //Identify the method that runs after the asynchronous search completes.
        cons.SearchCompleted += new EventHandler<ContactsSearchEventArgs>(Contacts_SearchCompleted_Many);
    
        //Start the asynchronous search.
        cons.SearchAsync(String.Empty, FilterKind.None, "Contacts Test #3 Picture");
    }
    
  3. Add the following code to the class for your page. This code contains the method to handle the completed event of the asynchronous search. In this code, you bind the contact data, including the photo, by setting the data context of the list box from step 1 equal to the results of the search.

    void Contacts_SearchCompleted_Many(object sender, ContactsSearchEventArgs e)
    {
        try
        {
            //Bind the results to the list box that displays them in the UI.
            ContactResultsData.DataContext = e.Results;
        }
        catch (System.Exception)
        {
            //No results
        }
    }
    
  4. Add the following code. The code should go inside the namespace, but after the Page class. This is the custom data converter that enables you to bind the photo to the user interface.

    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();
        }
    }
    
  5. Open the XAML editor for your page. In the <phone:PhoneApplicationPage> tag, with the other namespace declarations, add the following code. Replace the placeholder YOURSOLUTIONNAME with the name of your solution, without the file extension. This allows you to access the custom data converter.

    xmlns:MyApp="clr-namespace:YOURSOLUTIONNAME"
    
  6. After the PHONE:PHONEAPPLICATIONPAGE element and before the GRID element, add the following code. This enables you to use the custom data converter in the data binding.

    <phone:PhoneApplicationPage.Resources>
        <MyApp:ContactPictureConverter x:Key="ContactPictureConverter" />
    </phone:PhoneApplicationPage.Resources>
    
  7. Add the following code. You can add the code to the Content Panel or Layout Root GRID element.

    <StackPanel Orientation="Vertical">
                        
        <Button Content="Get Many Pictures" Width="Auto" Click="ButtonManyPictures_Click" />
    
        <ListBox Grid.Row="1" Name="ContactResultsData" ItemsSource="{Binding}" Height="300" Margin="24,24,0,0" VerticalAlignment="Top">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Border BorderThickness="2" HorizontalAlignment="Left" BorderBrush="{StaticResource PhoneAccentBrush}" >
                            <Image Source="{Binding Converter={StaticResource ContactPictureConverter}}" Width="48" Height="48" Stretch="Fill" />
                        </Border>
                        <TextBlock Name="ContactResults" Text="{Binding Path=DisplayName, Mode=OneWay}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
    

    This XAML creates a button and a list box that you bind to the contact data. The data template for each row of the list box contains the photo and the name of the contact. For more information, see Data binding for Windows Phone 8 and Data Templating Overview.

  8. Save and build your solution.

  9. Start your application and click the button.

    The contacts fill the list box. Scroll until you see a contact that has a photo.

Show:
© 2014 Microsoft