[UWP][連絡先] 複数の連絡先を取得する

今回は複数の連絡先を取得する方法を見ていきます。

まず連絡先ピッカーですがPickContactAsync ではなく PickContactsAsync を使用します。ぱっと見ただけでは違いがわかりませんが、よく見ると複数形になっていることがわかります。

ピッカーで複数の連絡先を取得した結果は IList<Contact> 型の変数へ格納します。リストなので取得はforeachを使用します。

以下にコード例を示します。

public IList<Contact> contacts;

private async void btnGetContact_Click(object sender, RoutedEventArgs e)
{
    var picker = new Windows.ApplicationModel.Contacts.ContactPicker();

    // 選択モードをFieldsに設定
    picker.SelectionMode = Windows.ApplicationModel.Contacts.ContactSelectionMode.Fields;

    // 連絡先ピッカーで取得するフィールドを指定
    picker.DesiredFieldsWithContactFieldType.Add(
        Windows.ApplicationModel.Contacts.ContactFieldType.Address);
    picker.DesiredFieldsWithContactFieldType.Add(
        Windows.ApplicationModel.Contacts.ContactFieldType.PhoneNumber);

    // 複数の連絡先を取得する
    contacts = await picker.PickContactsAsync();

    // 連絡先が選択されている場合
    if (contacts != null && contacts.Count > 0)
    {
        // 1件ずつ連絡先を取得する
        foreach (Contact contact in contacts)
        {
            if (contact.Emails.Count > 0)
            {
                textBlockEmail.Text = contact.Emails[0].Address;
            }
            else if (contact.Phones.Count > 0)
            {
                textBlockPhone.Text = contact.Phones[0].Number;
            }
        }
    }
}

 

[UWP][連絡先] 選択モードを指定する

今回は連絡先ピッカーで選択モードを指定する方法について見ていきます。

連絡先ピッカーは、既定でユーザーが選択した連絡先のすべての情報を取得します。

選択モードを指定することで、アプリで必要なデータのみを取得するように限定することができます。

選択モードを限定するにはピッカーの SelectionMode に Windows.ApplicationModel.Contacts.ContactSelectionMode.Fields を指定します。

続いて、ピッカーの DesiredFieldsWithContactFieldType.Add メソッドで限定して取得する項目を指定します。今回はメールアドレスを取得するようにコードを記述してみます(以下コード参照)。

ピッカー表示後のif文は、連絡先が選択されていなかった場合に備えるものです。

取得したメールアドレスは、Emailsオブジェクトに入っています。Emials[0].Addressとすることで、選択された1件目のアドレスを取得することができます。

private async void btnGetContact_Click(object sender, RoutedEventArgs e)
{
    var picker = new Windows.ApplicationModel.Contacts.ContactPicker();

    // 選択モードをFieldsに設定
    picker.SelectionMode = Windows.ApplicationModel.Contacts.ContactSelectionMode.Fields;

    // 連絡先ピッカーで取得するフィールドを指定
    picker.DesiredFieldsWithContactFieldType.Add(
        Windows.ApplicationModel.Contacts.ContactFieldType.Email);  

    Contact contact = await picker.PickContactAsync();

    if (contact != null)
    {
        textBlockEmail.Text = contact.Emails[0].Address;
    }
}

実行例を以下に示します。

連絡先の選択

選択されたアドレスを表示

 

 

 

[UWP][連絡先] 連絡先ピッカーを表示する

今回は連絡先ピッカーの表示方法について見ていきます。

連絡先ピッカーはWindows アプリのpeopleに登録されている連絡先を表示し、選択された人の連絡先情報を取得することができます。

連絡先ピッカーは Windows.ApplicationModel.Contacts 名前空間の ContactPicker クラスを使用します。

ContactPickerクラスのインスタンスを生成したらPickContactAsyncメソッドで表示することができます。

MainPage.xaml に Buttonコントロールを1つ配置し、名前をbtnGetContactにして、クリックイベントのコードを以下のように記述してください。

private async void btnGetContact_Click(object sender, RoutedEventArgs e)
{
    var picker = new Windows.ApplicationModel.Contacts.ContactPicker();

    Contact contact = await picker.PickContactAsync();
}

上記の通りコードを編集したら、実行してみましょう。

以下のように連絡先を選択するためのピッカーが表示されます。

もし、peopleアプリにデータがない場合は、登録後に実行してみてください。

連絡先の選択

 

 

[UWP][Flyout] Flyoutプロパティの内コントロールでFlyout表示する

今回はFlyoutプロパティのないコントロールでFlyout表示をしてみます。

例えばRectangleコントロールはFlyoutプロパティがありません。

Flyout表示をするには、<FlyoutBase.AttachedFlyout>を使用します。

例として以下のXamlを示します。

Rectangleコントロールに<FlyoutBase.AttachedFlyout>を配置しFlyoutmenuを表示するようにします。

<Button x:Name="button" Content="Button" HorizontalAlignment="Left" 
        Margin="40,40,0,0" VerticalAlignment="Top">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock>Flyout中のTextBlock</TextBlock>
                <Button>ボタン</Button>                       
            </StackPanel>

        </Flyout>
    </Button.Flyout>
</Button>

XamlによってFlyoutの配置ができましたが、これだけではダメで、タップされたときに表示されるよう、以下のようにコードを記述する必要があります。

private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout(sender as FrameworkElement);
}

実行例を以下に示します。

実行例

[UWP][Flyout] Flyoutプロパティを持つコントロールを使用する

Flyoutとは、一時的に表示されるUIです。画面の他の場所をタップやクリックをすると非表示になります。

Flyoutは、Flyoutプロパティを持つコントロールとそうでないコントロールとでは、表示方法が異なります。

今回はFlyoutプロパティを持つButtonコントロールを使用してみます。

最初にXamlを見てみましょう。以下はButtonコントロールのFlyoutプロパティにStackPanelを配置しています。

StackPanelを配置することでFlyout表示の中に複数のオブジェクトを配置することができます。もちろん、コンテナになるコントロールであればStackPanelでなくても構いません。

<Button x:Name="button" Content="Button" HorizontalAlignment="Left" 
        Margin="40,40,0,0" VerticalAlignment="Top">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock>Flyout中のTextBlock</TextBlock>
                <Button>ボタン</Button>                       
            </StackPanel>

        </Flyout>
    </Button.Flyout>
</Button>

上記の実行例を以下に示します。

ButtonをクリックするとFlyoutが表示され、TextBlockとButtonが表示されます。別の場所をクリックするとFlyoutは非表示になります。

実行例