내보내기(0) 인쇄
모두 확장

방법: Windows Phone의 연락처 사진 표시

2012-02-09

연락처의 사진을 표시하는 프로세스는 Contact 개체의 참조를 가져오고, 새 비트맵 이미지를 만들고, 그 소스를 GetPicture로 설정한 다음 사용자 인터페이스에 비트맵을 표시하는 것입니다. 또는 사용자 지정 데이터 변환기를 만들어 사진을 사용자 인터페이스에 데이터 바인딩할 수 있습니다. 연락처 데이터 액세스에 대한 자세한 내용은 방법: Windows Phone의 연락처 데이터 액세스를 참조하십시오.

참고참고:

Windows Phone SDK 7.1 에서는 사용자의 각기 다른 계정에서 취합된 사용자의 연락처 데이터에 대한 읽기 전용 액세스를 제공합니다. 대부분의 계정은 사진에 대한 액세스를 제공합니다. 자세한 내용은 Windows Phone의 연락처 및 일정을 참조하십시오.

이 항목은 다음 섹션으로 이루어져 있습니다.

연락처 이름 및 사진

이 프로시저에서는 테스트 용도로만 버튼 클릭 이벤트에 코드를 넣습니다. 응용프로그램 내에서 연락처 사진이 필요한 어디에서든 연락처 데이터에 액세스할 수 있습니다. 다음 프로시저에서는 컨트롤을 추가할 수 있는 페이지가 있는 Windows Phone 응용프로그램을 사용한다고 가정합니다.

중요중요:

Windows Phone 에뮬레이터에는 샘플 연락처가 있지만 사진은 포함하지 않습니다. 이 프로시저는 실제 단말기를 사용하여 테스트해야 합니다.

연락처의 사진을 표시하려면

  1. 페이지에 대한 XAML 편집기를 열고 다음 코드를 추가합니다. Content Panel 또는 Layout Root GRID 요소에 이 코드를 추가할 수 있습니다. 이렇게 하면 사진과 버튼을 넣을 수 있는 빈 Image 컨트롤이 생성됩니다. 또한 사진 주위로 테마 인식 테두리도 삽입됩니다.

    <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. 페이지에 대한 코드 숨김 파일을 엽니다. 맨 위에 다음 문을 추가합니다.

    using Microsoft.Phone.UserData;
    using System.Windows.Media.Imaging;
    
  3. 다음 코드를 페이지에 대한 클래스에 추가합니다. 이 코드는 버튼 클릭 이벤트를 포함하며, 비동기 연락처 검색을 시작합니다.

    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. 다음 코드를 페이지에 대한 클래스에 추가합니다. 이 코드는 완료된 비동기 검색 이벤트를 처리할 메서드를 포함합니다. 이 코드에서는 검색에 의해 반환된 첫 번째 연락처를 선택하고 새 비트맵 이미지를 만듭니다. 이 소스를 GetPicture로 설정한 다음 단계 1에서 추가한 Image 컨트롤에 사진을 표시합니다.

    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. 솔루션을 저장하고 빌드합니다.

  6. 응용프로그램을 시작하고 버튼을 클릭합니다.

    첫 번째 연락처의 사진이 표시됩니다. 사진이 표시되지 않으면 첫 번째 연락처에 사진이 없기 때문입니다. 모든 연락처 대신 시작 화면에 고정된 연락처를 반환하려면 연락처 검색을 변경해 보십시오. 그러기 위해서는 단계 3의 코드에서 마지막 줄의 주석 처리를 제거하고 두 번째 줄부터 마지막 줄까지 주석 처리합니다. 자세한 내용은 Windows Phone의 연락처 필터링 및 일치를 참조하십시오.

연락처 사진은 속성은 아니지만 대신 GetPicture 메서드를 호출하여 검색되므로 이를 바인딩하려면 사용자 지정 데이터 변환기가 필요합니다. 이 프로시저에서는 테스트 용도로만 버튼 클릭 이벤트에 코드를 넣습니다. 응용프로그램 내에서 연락처 사진이 필요한 어디에서든 연락처 사진에 액세스할 수 있습니다. 다음 프로시저에서는 컨트롤을 추가할 수 있는 페이지가 있는 Windows Phone 응용프로그램을 사용한다고 가정합니다.

중요중요:

Windows Phone 에뮬레이터에는 샘플 연락처가 있지만 사진은 포함하지 않습니다. 이 프로시저는 실제 단말기를 사용하여 테스트해야 합니다.

사진을 사용자 인터페이스에 데이터 바인딩하려면

  1. 페이지에 대한 코드 숨김 파일을 엽니다. 맨 위에 다음 문을 추가합니다.

    using Microsoft.Phone.UserData;
    using System.Windows.Media.Imaging;
    
  2. 다음 코드를 페이지에 대한 클래스에 추가합니다. 이 코드는 버튼 클릭 이벤트를 포함하며, 비동기 연락처 검색을 시작합니다.

    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. 다음 코드를 페이지에 대한 클래스에 추가합니다. 이 코드는 완료된 비동기 검색 이벤트를 처리할 메서드를 포함합니다. 이 코드에서는 검색 결과와 같은 단계 1에서 목록 상자의 데이터 컨텍스트를 설정하여 사진을 비롯한 연락처 데이터를 바인딩합니다.

    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. 다음 코드를 추가합니다. 코드는 네임스페이스 내 Page 클래스 뒤에 삽입해야 합니다. 이는 사용자 지정 인터페이스에 사진을 바인딩할 수 있는 사용자 지정 변환기입니다.

    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. 페이지에 대한 XAML 편집기를 엽니다. <phone:PhoneApplicationPage> 태그에서 나머지 네임스페이스 선언을 사용하여 다음 코드를 추가합니다. 자리 표시자 YOURSOLUTIONNAME을 파일 확장명을 제외한 솔루션 이름으로 바꿉니다. 그러면 사용자 지정 데이터 변환기에 액세스할 수 있습니다.

    xmlns:MyApp="clr-namespace:YOURSOLUTIONNAME"
    
  6. PHONE:PHONEAPPLICATIONPAGE 요소 뒤, 그리고 GRID 요소 앞에 다음 코드를 추가합니다. 그러면 데이터 바인딩에서 사용자 지정 데이터 변환기를 사용할 수 있습니다.

    <phone:PhoneApplicationPage.Resources>
        <MyApp:ContactPictureConverter x:Key="ContactPictureConverter" />
    </phone:PhoneApplicationPage.Resources>
    
  7. 다음 코드를 추가합니다. Content Panel 또는 Layout Root GRID 요소에 이 코드를 추가할 수 있습니다.

    <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>
    

    이 XAML은 연락처 데이터에 바인딩할 목록 상자 및 버튼을 만듭니다. 목록 상자의 각 행에 대한 데이터 템플릿에는 연락처의 사진과 이름이 들어 있습니다. 자세한 내용은 데이터 바인딩 개요데이터 템플릿 작성 개요를 참조하십시오.

  8. 솔루션을 저장하고 빌드합니다.

  9. 응용프로그램을 시작하고 버튼을 클릭합니다.

    연락처가 목록 상자에 채워집니다. 사진이 있는 연락처를 찾을 때까지 스크롤합니다.

표시:
© 2014 Microsoft