정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

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

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

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

참고참고:

Windows Phone SDK 7.1 에서는 사용자의 여러 계정에서 집계된 사용자의 연락처 데이터에 읽기 전용으로 액세스할 수 있습니다. 대부분의 계정을 사용하여 사진에 액세스할 수 있습니다. 자세한 내용은 Windows Phone 8의 연락처 및 일정을 참조하세요.

Contact name and photo

이 항목에는 다음 단원이 포함되어 있습니다.

 

이 절차에서는 테스트 용도로만 버튼 클릭 이벤트에 코드를 추가합니다. 자체 응용프로그램에서 필요할 때마다 연락처 사진에 액세스할 수 있습니다. 다음 절차에서는 컨트롤을 추가할 수 있는 페이지가 포함된 Windows Phone 응용프로그램이 있다고 간주합니다.

중요중요:

Windows Phone Emulator에는 샘플 연락처는 있지만 사진은 없습니다. 실제 장치를 사용하여 이 절차를 테스트해야 합니다.

연락처 사진을 표시하려면

  1. 페이지의 XAML 편집기를 열고 다음 코드를 추가합니다. 콘텐츠 패널 또는 레이아웃 루트 GRID 요소에 코드를 추가할 수 있습니다. 이렇게 하면 사진과 버튼을 포함하는 빈 이미지 컨트롤이 만들어집니다. 또한 테마 인식 테두리가 사진 둘레에 추가됩니다.

    <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단계에서 추가한 이미지 컨트롤에 사진을 표시합니다.

    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 8의 연락처 필터링 및 일치를 참조하세요.

연락처 사진은 속성이 아니지만 대신 GetPicture 메서드를 호출하여 검색되므로, 바인딩하려면 사용자 지정 데이터 변환기가 필요합니다. 이 절차에서는 테스트 용도로만 버튼 클릭 이벤트에 코드를 추가합니다. 자체 응용프로그램에서는 필요하면 언제나 연락처 사진에 액세스할 수 있습니다. 다음 절차에서는 컨트롤을 추가할 수 있는 페이지가 포함된 Windows Phone 응용프로그램이 있다고 간주합니다.

중요중요:

Windows Phone Emulator에는 샘플 연락처는 있지만 사진은 없습니다. 실제 장치를 사용하여 이 절차를 테스트해야 합니다.

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

  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. 다음 코드를 추가합니다. 콘텐츠 패널 또는 레이아웃 루트 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을 사용하여 연락처 데이터에 바인딩하는 버튼과 목록 상자를 만듭니다. 목록 상자의 각 행에 대한 데이터 템플릿에는 연락처의 사진과 이름이 포함됩니다. 자세한 내용은 Windows Phone 8의 데이터 바인딩데이터 템플릿 개요를 참조하세요.

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

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

    연락처로 목록 상자가 채워집니다. 사진이 있는 연락처가 보일 때까지 스크롤합니다.

표시: