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

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

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

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.

    Imports Microsoft.Phone.UserData
    imports 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 Sub ButtonOnePicture_Click(sender As System.Object, e As System.Windows.RoutedEventArgs)
    
        Dim cons As Contacts = New Contacts()
    
        'Identify the method that runs after the asynchronous search completes.
        AddHandler cons.SearchCompleted, AddressOf 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")
    End Sub
    
  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.

    Private Sub Contacts_SearchCompleted_One(sender As Object, e As ContactsSearchEventArgs)
    
        Try
            'We are using the first contact only.
            Dim con As Contact = e.Results.First()
    
            Dim img As BitmapImage = new BitmapImage()
            img.SetSource(con.GetPicture())
            Picture.Source = img
    
        Catch ex As System.Exception
    
            'We can't get a picture of the contact.
        End Try
    End Sub
    
  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.

    Imports Microsoft.Phone.UserData
    imports 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 Sub ButtonManyPictures_Click(sender As System.Object, e As System.Windows.RoutedEventArgs)
    
        Dim cons As Contacts = New Contacts()
    
        'Identify the method that runs after the asynchronous search completes.
        AddHandler cons.SearchCompleted, AddressOf Contacts_SearchCompleted_Many
    
        'Start the asynchronous search
        cons.SearchAsync(String.Empty, FilterKind.None, "Contacts Test #3 Picture")
    End Sub
    
  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.

    Private Sub Contacts_SearchCompleted_Many(sender As Object, e As ContactsSearchEventArgs)
    
        Try
            'Bind the results to the user interface.
            ContactResultsData.DataContext = e.Results
    
        Catch ex As System.Exception
    
            'No results
        End Try
    End Sub
    
  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
        Implements System.Windows.Data.IValueConverter
    
        Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object _
            Implements System.Windows.Data.IValueConverter.Convert
    
            Dim c as Contact = CType(value, Contact)
                    
            If c Is Nothing Then
                 Return Nothing
            End If
            
            Dim imageStream as System.IO.Stream = c.GetPicture()
    
            If imageStream IsNot Nothing Then
    
                Return Microsoft.Phone.PictureDecoder.DecodeJpeg(imageStream)
            End If
    
            Return Nothing
        End Function
    
        Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object _
            Implements System.Windows.Data.IValueConverter.ConvertBack
    
            throw new NotImplementedException()
        End Function
    End Class
    
  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:
© 2017 Microsoft