情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

方法: Windows Phone の連絡先の写真を表示する

2012/02/09

連絡先の写真を表示するためのプロセスは、Contact オブジェクトへの参照を取得し、新しいビットマップ イメージを作成し、そのソースを GetPicture に設定して、ユーザー インターフェイスにビットマップを表示します。また、カスタムのデータ コンバーターを作成し、写真をユーザー インターフェイスにデータバインドすることもできます。連絡先データへのアクセスの詳細については、「方法: Windows Phone の連絡先データにアクセスする」を参照してください。

注注:

Windows Phone SDK 7.1 では、ユーザーの複数のアカウント全体で集約されたユーザーの連絡先データに読み取り専用でアクセスできます。ほとんどのアカウントで写真にアクセスできます。詳細については、「Windows Phone の連絡先とカレンダー」を参照してください。

このトピックは、次のセクションで構成されています。

連絡先の名前と写真

この手順では、テストの目的でのみボタン クリック イベントにコードを配置します。自分が作成するアプリケーションから、必要に応じて連絡先の写真にアクセスできます。次の手順では、コントロールを追加できるページが含まれる Windows Phone アプリケーションがあるという前提で説明します。

重要な注重要な注:

Windows Phone エミュレーターにはサンプルの連絡先が含まれていますが、それらには写真がありません。この手順は物理デバイスを使用してテストする必要があります。

連絡先の写真を表示するには

  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 で一番下の行のコメントを解除し、下から 2 番目の行をコメント化します。詳細については、「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. 次のコードを追加します。コードをコンテンツ パネルまたはレイアウト ルート 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