エクスポート (0) 印刷
すべて展開

チュートリアル: Windows Phone の連絡先およびカレンダー データにアクセスする

2012/02/09

このチュートリアルでは、連絡先とカレンダーを表示する単純なアプリケーションを作成します。このチュートリアルで作成するアプリケーションでは、連絡先と予定が表示され、さらにこれらのデータをどのアカウントから取得したかも表示されます。このアプリケーションの完成したバージョンはダウンロードとして提供されています。詳細については、「Windows Phone のコード サンプル」を参照してください。

注注:

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

このチュートリアルでは次のタスクを実行します。

  • 連絡先とカレンダーのデータにアクセスする。

  • 連絡先、予定、およびアカウントをユーザー インターフェイスにバインドする。

  • 各連絡先と予定の詳細情報 (連絡先の写真も) を表示する。

  • 連絡先の写真をユーザー インターフェイスにデータ バインドするために、カスタム データ コンバーターを作成する。

完成したアプリケーションは次のように見えます。

完成したソリューションには次のコンポーネントが含まれます。

アプリケーションのメイン ページアプリ用のソリューション エクスプローラー

このチュートリアルを最後まで行うには、Windows Phone SDK がインストールされている必要があります。詳細については、「Windows Phone SDK のインストール」を参照してください。

最初に、新しい Windows Phone アプリケーション プロジェクトを ContactsAndCalendarTestApp という名前で作成します。後の手順でアプリケーションに追加するコードは、アプリケーション名が ContactsAndCalendarTestApp であることを前提としています。アプリケーションに別の名前を選択する場合、コードの名前空間の参照を変更する必要があります。

アプリケーション プロジェクトを作成するには

  1. Visual Studio で、[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログが表示されます。

  2. 左側のペインで [インストールされたテンプレート] をクリックし、[Visual C#] または [Visual Basic] を展開してから、[Silverlight for Windows Phone] をクリックします。

  3. プロジェクトの種類の一覧で、[Windows Phone アプリケーション] をクリックします。

  4. [名前] ボックスに「ContactsAndCalendarTestApp」と入力します。

  5. [OK] をクリックします。

    [新しい Windows Phone アプリケーション] ダイアログが表示されます。

  6. [対象の Windows Phone バージョン] ドロップダウン リストから [Windows Phone 7.1] を選択し、[OK] をクリックします。

    新しいアプリケーション プロジェクトが作成され、Visual Studio で開きます。

このアプリケーションのメイン ページには、3 つのピボット アイテムがあります (連絡先、予定、アカウントのそれぞれに 1 つずつ)。この他に 2 つのページがあり、連絡先と予定の詳細情報が表示されます。

アプリケーション構造を設定するには

  1. ソリューション エクスプローラーで MainPage.xaml を選択し、Del キーを押してこのファイルを削除します。

  2. ソリューション エクスプローラーで、プロジェクトを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。

    [新しい項目の追加] ダイアログが表示されます。

  3. [Windows Phone Pivot Page] を選択し、「MainPage.xaml」という名前を入力して [追加] をクリックします。

    新しいピボット ページがデザイナーに表示されます。

  4. XAML コードで、LayoutRoot という GRID 要素を見つけます。そこから、ファイルの末尾までのすべてのコードを次のコードに置き換えます。このコードによって 3 つのピボット アイテムが作成されます。これらの中のコードは、後で作成します。

        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
    
            <!--Pivot Control-->
            <controls:Pivot Title="Contacts and Calendar Test App" >
    
                <!--Pivot item one-->
                <controls:PivotItem Header="contacts">
                </controls:PivotItem>
    
    
                <!--Pivot item two-->
                <controls:PivotItem Header="accounts">
                </controls:PivotItem>
    
    
                <!--Pivot item three-->
                <controls:PivotItem Header="appointments">
                </controls:PivotItem>
    
            </controls:Pivot>
        </Grid>
    </phone:PhoneApplicationPage>
    
  5. ソリューション エクスプローラーで、プロジェクトを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。

    [新しい項目の追加] ダイアログが表示されます。

  6. [Windows Phone Portrait Page] を選択し、「AppointmentDetails.xaml」という名前を入力して [追加] をクリックします。

    新しいページがデザイナー内で開きます。

  7. ソリューション エクスプローラーで、プロジェクトを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。

    [新しい項目の追加] ダイアログが表示されます。

  8. [Windows Phone Portrait Page] を選択し、「ContactDetails.xaml」という名前を入力して [追加] をクリックします。

    新しいページがデザイナー内で開きます。

  9. [ソリューション エクスプローラー] で、App.xaml を右クリックしてから、[コードの表示] をクリックします。

    コード エディターに分離コード ファイルが開きます。

  10. クラスの先頭に次のコードを追加します。このコードによって作成される 2 つのグローバル静的変数は、メイン ページと詳細情報ページの間でデータを渡すために使用します。

    public static Microsoft.Phone.UserData.Contact con;
    public static Microsoft.Phone.UserData.Appointment appt;
    
  11. (省略可能) フレーム レート カウンターを無効にするために、次のコードをコメント アウトします。

    Application.Current.Host.Settings.EnableFrameRateCounter = true;
    

この手順では、アプリケーションを実行して進行状況をテストします。

アプリケーションをテストするには

  1. [ファイル] メニューの [すべてを保存] をクリックします。(Ctrl+Shift+S)

  2. [ビルド] (または Visual Studio 2010 Express for Windows® Phone 7.1 の [デバッグ] メニュー) の [ソリューションのビルド] をクリックします。(Ctrl+Shift+B)

  3. 標準のツール バーで、アプリケーションの配置対象を [Windows Phone エミュレーター] または [Windows Phone デバイス] に設定します。

    エミュレーターを選択している標準ツールバー上のターゲット またはデバイスを選択している標準ツールバー上のターゲット

  4. [デバッグ] メニューの [デバッグ開始] をクリックします。(F5)

    アプリケーションが起動し、メイン ページが表示されます。

  5. ピボット アイテムをスワイプします。ピボット アイテムが 3 つとも表示され、[contacts]、[accounts]、および [appointments] というヘッダーが付いているはずです。

  6. [デバッグ] メニューの [デバッグの停止] をクリックします。(F5)

連絡先データにアクセスするには、Contacts オブジェクトへの参照を取得し、SearchAsync を呼び出して非同期検索を実行してから、結果を Contact オブジェクトのコレクションとして SearchCompleted イベント ハンドラーでキャプチャします。

連絡先のピボット アイテム ユーザー インターフェイスを作成するには

  1. ソリューション エクスプローラーで、MainPage.xaml をダブルクリックし、デザイナーで開きます。

  2. 最初のピボット アイテムを、次に示すコードで置き換えます。このコードでは、連絡先の検索に使用されるテキスト ボックス、ラジオ ボタン、およびボタンを作成します。また、検索結果を表示するためのリスト ボックスも作成します。

    <controls:PivotItem Header="contacts">
        <StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
    
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
    
                <TextBox Grid.Row="0" Grid.ColumnSpan="2" Name="contactFilterString" />
                <RadioButton Grid.Row="1" Grid.Column="0" Checked="FilterChange" Name="name" Content="name" />
                <RadioButton Grid.Row="1" Grid.Column="1" Checked="FilterChange" Name="phone" Content="phone"/>
                <RadioButton Grid.Row="2" Grid.Column="0" Checked="FilterChange" Name="email" Content="email"/>
                <Button Grid.Row="2" Grid.Column="1" Content="search" Click="SearchContacts_Click" />
            </Grid>
    
            <TextBlock Name="ContactResultsLabel" Text="Search for contacts" TextWrapping="Wrap" Margin="12,0,0,0" />
    
            <ListBox Name="ContactResultsData" ItemsSource="{Binding}" Tap="ContactResultsData_Tap" Height="300" Margin="24,0,0,0" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Name="ContactResults" Text="{Binding Path=DisplayName, Mode=OneWay}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="18,8,0,0" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </controls:PivotItem>
    
    

連絡先データにアクセスするには

  1. ソリューション エクスプローラーで、MainPage.xaml を右クリックしてから、[コードの表示] をクリックします。

    コード エディターに分離コード ファイルが開きます。

  2. 次のコードに置き換えます。このコードでは、既定の連絡先検索フィルターを "なし" に設定し、既定の検索の種類を "名前" に設定します。また、ユーザーがラジオ ボタンを選択したときに検索フィルターを変更します。詳細については、「Windows Phone の連絡先のフィルターと適合」を参照してください。

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.UserData;
    
    namespace ContactsAndCalendarTestApp
    {
        public partial class MainPage : PhoneApplicationPage
        {
            FilterKind contactFilterKind = FilterKind.None;
    
            // Constructor
            public MainPage()
            {
                InitializeComponent();
    
                name.IsChecked = true;
            }
    
    
            private void FilterChange(object sender, RoutedEventArgs e)
            {
                String option = ((RadioButton)sender).Name;
    
                InputScope scope = new InputScope();
                InputScopeName scopeName = new InputScopeName();
    
                switch (option)
                {
                    case "name":
                        contactFilterKind = FilterKind.DisplayName;
                        scopeName.NameValue = InputScopeNameValue.Text;
                        break;
    
                    case "phone":
                        contactFilterKind = FilterKind.PhoneNumber;
                        scopeName.NameValue = InputScopeNameValue.TelephoneNumber;
                        break;
    
                    case "email":
                        contactFilterKind = FilterKind.EmailAddress;
                        scopeName.NameValue = InputScopeNameValue.EmailSmtpAddress;
                        break;
    
                    default:
                        contactFilterKind = FilterKind.None;
                        break;
                }
    
                scope.Names.Add(scopeName);
                contactFilterString.InputScope = scope;
                contactFilterString.Focus();
            }
        }//End page class
    }//End namespace
    
  3. コンストラクターの後に次のコードを追加します。このコードの内容は、検索ボタン クリック イベントであり、このコードの中で連絡先の非同期検索が開始します。

    private void SearchContacts_Click(object sender, RoutedEventArgs e)
    {
        ContactResultsLabel.Text = "results are loading...";
        ContactResultsData.DataContext = null;
    
        Contacts cons = new Contacts();
    
        cons.SearchCompleted += new EventHandler<ContactsSearchEventArgs>(Contacts_SearchCompleted);
    
        cons.SearchAsync(contactFilterString.Text, contactFilterKind, "Contacts Test #1");
    }
    
  4. クリック イベントの後に、次のコードを追加します。このコードには、非同期検索の完了イベントを処理するメソッドが含まれます。このコードは、検索の結果に等しいリスト ボックスのデータ コンテキストを設定することで、連絡先データをユーザー インターフェイスにバインドします。結果がない場合のエラー処理を含みます。さらに、コードは結果があるかどうかによって、リスト ボックス ラベルのテキストも変更します。

    void Contacts_SearchCompleted(object sender, ContactsSearchEventArgs e)
    {
        //MessageBox.Show(e.State.ToString());
    
        try
        {
            //Bind the results to the list box that displays them in the UI
            ContactResultsData.DataContext = e.Results;
        }
        catch (System.Exception)
        {
            //That's okay, no results
        }
    
        if (ContactResultsData.Items.Count > 0)
        {
            ContactResultsLabel.Text = "results (tap name for details...)";
        }
        else
        {
            ContactResultsLabel.Text = "no results";
        }
    }
    
  5. 検索完了イベントの後に、次のコードを追加します。結果リストに表示されている連絡先の 1 つをユーザーがタップしたときに、このコードによってその連絡先がグローバル変数に格納され、画面の表示がその連絡先の詳細情報ページに切り替わります。

    private void ContactResultsData_Tap(object sender, GestureEventArgs e)
    {
        App.con = ((sender as ListBox).SelectedValue as Contact);
    
        NavigationService.Navigate(new Uri("/ContactDetails.xaml", UriKind.Relative));
    }
    

メイン ページの結果リストに表示されている連絡先の 1 つをユーザーがタップすると、アプリケーション画面は連絡先の詳細情報ページに切り替わります。

連絡先の詳細情報を表示するには

  1. ソリューション エクスプローラーで、ContactDetails.xaml をダブルクリックしてデザイナーで開きます。

  2. LayoutRoot という名の Grid 要素を見つけます。そこから、ファイルの末尾までのすべてのコードを次のコードに置き換えます。このコードでは、連絡先の名前を表示するためのテキスト ブロックを作成し、さらに連絡先の写真を表示するためのイメージと、その他の連絡先データを表示するためのリスト ボックスを作成します。

        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,0">
                <TextBlock x:Name="ApplicationTitle" Text="Contacts and Calendar Test App" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="contact details" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    
                <TextBlock Text="{Binding Path=DisplayName, Mode=OneWay}" Foreground="{StaticResource PhoneAccentBrush}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" />
    
                <Border BorderThickness="2" HorizontalAlignment="Left" BorderBrush="{StaticResource PhoneAccentBrush}" >
                    <Image Name="Picture" Height="85" Width="85" HorizontalAlignment="Left" />
                </Border>
    
                <TextBlock Text="phone numbers" Margin="12,12,0,0"/>
                <ListBox ItemsSource="{Binding Path=PhoneNumbers}" Height="60"  Margin="36,0,0,0">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{Binding Path=Kind, Mode=OneWay}" />
                                <TextBlock Grid.Column="1" Text=":  " />
                                <TextBlock Grid.Column="2" Text="{Binding Path=PhoneNumber, Mode=OneWay}" />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
    
                <TextBlock Text="email addresses" Margin="12,12,0,0" />
                <ListBox ItemsSource="{Binding Path=EmailAddresses}" Height="60"  Margin="36,0,0,0">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{Binding Path=Kind, Mode=OneWay}" />
                                <TextBlock Grid.Column="1" Text=":  " />
                                <TextBlock Grid.Column="2" Text="{Binding Path=EmailAddress, Mode=OneWay}" />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
    
                <TextBlock Text="web sites" Margin="12,12,0,0" />
                <ListBox ItemsSource="{Binding Path=Websites}" Height="60"  Margin="36,0,0,0" />
    
                <TextBlock Text="company information" Margin="12,12,0,0" />
                <ListBox ItemsSource="{Binding Path=Companies}" Height="60"  Margin="36,0,0,0">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{Binding Path=CompanyName, Mode=OneWay}" />
                                <TextBlock Grid.Column="1" Text=":  " />
                                <TextBlock Grid.Column="2" Text="{Binding Path=JobTitle, Mode=OneWay}" />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
    
                <TextBlock Text="accounts" Margin="12,12,0,0" />
                <ListBox ItemsSource="{Binding Path=Accounts}" Height="60" Margin="36,0,0,0">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{Binding Path=Kind, Mode=OneWay}" />
                                <TextBlock Grid.Column="1" Text=":  " />
                                <TextBlock Grid.Column="2" Text="{Binding Path=Name, Mode=OneWay}" />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </Grid>
    </phone:PhoneApplicationPage>
    
    
  3. ソリューション エクスプローラーで、ContactDetails.xaml を右クリックして [コードの表示] をクリックします。

    コード エディターに分離コード ファイルが開きます。

  4. 次のコードに置き換えます。このコードでは、ページのデータ コンテキストを、メイン ページで選択された連絡先に設定します。また、GetPicture メソッドを呼び出し、その結果をイメージ コントロールに表示します。

    using System;
    using Microsoft.Phone.Controls;
    using System.Windows.Media.Imaging;
    
    namespace ContactsAndCalendarTestApp
    {
        public partial class ContactDetails : PhoneApplicationPage
        {
            public ContactDetails()
            {
                InitializeComponent();
            }
    
            protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
    
                //Set the data context for this page to the selected contact
                this.DataContext = App.con;
    
                try
                {
                    //Try to get a picture of the contact
                    BitmapImage img = new BitmapImage();
                    img.SetSource(App.con.GetPicture());
                    Picture.Source = img;
                }
                catch (Exception)
                {
                    //can't get a picture of the contact
                }
            }
        }
    }
    

この手順では、アプリケーションを実行して進行状況をテストします。

注注:

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

アプリケーションをテストするには

  1. エミュレーターまたはデバイス上でアプリケーションを起動します。必要に応じて、最初のチェックポイントの指示を使用します。

    アプリケーションが起動し、メイン ページが表示されます。

  2. テキスト ボックス内に「A」と入力して [検索] をクリックします。

    検索結果がリストに入ります。このアプリケーションを Windows Phone エミュレーターでテストした場合は、次のように表示されます。

    Andrew Hill

    Arturo Lopez

  3. 結果リストの名前の 1 つをタップします。

    連絡先の詳細ページに、その連絡先の詳細情報が表示されます。連絡先によっては、表示されないデータもあります。

  4. [デバッグ] メニューの [デバッグの停止] をクリックします。(F5)

カレンダー データにアクセスするには、Appointments オブジェクトへの参照を取得し、SearchAsync を呼び出して非同期検索を実行してから、この結果を Appointment オブジェクトのコレクションとして SearchCompleted イベント ハンドラーでキャプチャします。

予定のピボット アイテム ユーザー インターフェイスを作成するには

  1. ソリューション エクスプローラーで、MainPage.xaml をダブルクリックし、デザイナーで開きます。

  2. 3 番目のピボット アイテムを、次に示すコードで置き換えます。このコードでは、開始日および終了日のラベルと検索ボタンを作成し、さらに検索結果を表示するためのリスト ボックスを作成します。

    <controls:PivotItem Header="appointments">
        <StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
    
            <TextBlock Text="appointments between" Foreground="{StaticResource PhoneAccentBrush}" />
    
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
    
                <TextBlock Grid.Row="0" Grid.Column="0" Text="start date" />
                <TextBlock Grid.Row="0" Grid.Column="1" Text="end date" />
                <TextBlock Grid.Row="1" Grid.Column="0" Text="placeholder" Name="StartDate" />
                <TextBlock Grid.Row="1" Grid.Column="1" Text="placeholder" Name="EndDate" />
                <Button Grid.Row="2" Grid.ColumnSpan="2" Content="search" Click="SearchAppointments_Click" HorizontalAlignment="Center" />
            </Grid>
    
            <TextBlock Name="AppointmentResultsLabel" Text="search for appointments" TextWrapping="Wrap" />
    
            <ListBox Name="AppointmentResultsData" ItemsSource="{Binding}" Tap="AppointmentResultsData_Tap" Height="400"  ScrollViewer.ManipulationMode="Control" Margin="24,0,0,0" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=Subject, Mode=OneWay}"  FontSize="{StaticResource PhoneFontSizeExtraLarge}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </controls:PivotItem>
    

予定データにアクセスするには

  1. ソリューション エクスプローラーで、MainPage.xaml を右クリックしてから、[コードの表示] をクリックします。

    コード エディターに分離コード ファイルが開きます。

  2. MainPage クラスで、コンストラクターの後に、次のコードを追加します。このコードの内容は、検索ボタン クリック イベントであり、このコードの中で予定の非同期検索が開始します。このコードで検索するのは、向こう 1 週間の予定です。

    private void SearchAppointments_Click(object sender, RoutedEventArgs e)
    {
        AppointmentResultsLabel.Text = "results are loading...";
        AppointmentResultsData.DataContext = null;
        Appointments appts = new Appointments();
    
        appts.SearchCompleted += new EventHandler<AppointmentsSearchEventArgs>(Appointments_SearchCompleted);
    
        DateTime start = DateTime.Now;
        DateTime end = start.AddDays(7);
    
        appts.SearchAsync(start, end, 20, "Appointments Test #1");
    }
    
  3. クリック イベントの後に、次のコードを追加します。このコードには、非同期検索の完了イベントを処理するメソッドが含まれます。このコードは、リスト ボックスのデータ コンテキストを検索の結果と同じに設定して、予定データをユーザー インターフェイスにバインドします。結果がない場合のエラー処理を含みます。さらに、コードは結果があるかどうかによって、リスト ボックス ラベルのテキストも変更します。

    void Appointments_SearchCompleted(object sender, AppointmentsSearchEventArgs e)
    {
        StartDate.Text = e.StartTimeInclusive.ToShortDateString();
        EndDate.Text = e.EndTimeInclusive.ToShortDateString();
    
        try
        {
            //Bind the results to the list box that displays them in the UI
            AppointmentResultsData.DataContext = e.Results;
        }
        catch (System.Exception)
        {
            //That's okay, no results
        }
    
        if (AppointmentResultsData.Items.Count > 0)
        {
            AppointmentResultsLabel.Text = "results (tap for details...)";
        }
        else
        {
            AppointmentResultsLabel.Text = "no results";
        }
    }
    
    
  4. 検索完了イベントの後に、次のコードを追加します。結果リストに表示されている予定の 1 つをユーザーがタップしたときに、このコードによってその予定がグローバル変数に格納され、画面の表示がその予定の詳細ページに切り替わります。

    private void AppointmentResultsData_Tap(object sender, GestureEventArgs e)
    {
        App.appt = ((sender as ListBox).SelectedValue as Appointment);
    
        NavigationService.Navigate(new Uri("/AppointmentDetails.xaml", UriKind.Relative));
    }
    

メイン ページの結果リストに表示されている予定の 1 つをユーザーがタップすると、アプリケーション画面は予定の詳細情報ページに切り替わります。

予定の詳細情報を表示するには

  1. ソリューション エクスプローラーで、AppointmentDetails.xaml をダブルクリックしてデザイナーで開きます。

  2. LayoutRoot という名の Grid 要素を見つけます。そこから、ファイルの末尾までのすべてのコードを次のコードに置き換えます。このコードでは、予定の件名を表示するためのテキスト ブロックと、その他の予定データを表示するためのスクロール ビューアーを作成します。

        <phone:PhoneApplicationPage.Resources>
    
            <DataTemplate x:Key="AttendeeTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{Binding Path=DisplayName, Mode=OneWay}" TextWrapping="Wrap" />
                    <TextBlock Grid.Column="1" Text=":  " />
                    <TextBlock Grid.Column="2" Text="{Binding Path=EmailAddress, Mode=OneWay}" TextWrapping="Wrap" />
                </Grid>
            </DataTemplate>
        </phone:PhoneApplicationPage.Resources>
    
    
        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,6">
                <TextBlock x:Name="ApplicationTitle" Text="Contacts and Calendar Test App" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="appt details" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <TextBlock Grid.Row="1" Text="{Binding Path=Subject, Mode=OneWay}" Foreground="{StaticResource PhoneAccentBrush}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" TextWrapping="Wrap" />
    
            <!--ContentPanel - place additional content here-->
            <ScrollViewer x:Name="ContentPanel" Grid.Row="2" Margin="12,0,12,0">
                <StackPanel>
    
                    <TextBlock Text="{Binding Path=Details, Mode=OneWay}"  Margin="12,0,0,0" TextWrapping="Wrap" />
                    
                    <TextBlock Text="{Binding Path=StartTime, Mode=OneWay}"  Margin="12,12,0,0"/>
                    <TextBlock Text="{Binding Path=EndTime, Mode=OneWay}"  Margin="12,0,0,0"/>
    
                    <TextBlock Text="{Binding Path=Location, Mode=OneWay}"  Margin="12,12,0,0"/>
    
                    <TextBlock Text="{Binding Path=Status, Mode=OneWay}"  Margin="12,12,0,0"/>
    
                    <TextBlock Text="organizer" Margin="12,12,0,0" />
                    <ListBox ItemsSource="{Binding Path=Organizer}" ItemTemplate="{StaticResource AttendeeTemplate}" Margin="24,0,0,0" />
    
                    <TextBlock Text="attendees" Margin="12,12,0,0" />
                    <ListBox ItemsSource="{Binding Path=Attendees}" ItemTemplate="{StaticResource AttendeeTemplate}" Margin="24,0,0,0" />
    
                    <TextBlock Text="accounts" Margin="12,12,0,0" />
                    <ListBox ItemsSource="{Binding Path=Accounts}" Margin="24,0,0,0">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Grid.Column="0" Text="{Binding Path=Kind, Mode=OneWay}" />
                                    <TextBlock Grid.Column="1" Text=":  " />
                                    <TextBlock Grid.Column="2" Text="{Binding Path=Name, Mode=OneWay}" />
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </phone:PhoneApplicationPage>
    
  3. ソリューション エクスプローラーで、AppointmentDetails.xaml を右クリックして [コードの表示] をクリックします。

    コード エディターに分離コード ファイルが開きます。

  4. 次のコードに置き換えます。このコードでは、ページのデータ コンテキストを、メイン ページで選択された予定に設定します。

    using Microsoft.Phone.Controls;
    
    namespace ContactsAndCalendarTestApp
    {
        public partial class AppointmentDetails : PhoneApplicationPage
        {
            public AppointmentDetails()
            {
                InitializeComponent();
            }
    
            protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
    
                //Set the data context for this page to the selected appointment
                this.DataContext = App.appt;
            }
        }
    }
    
    

この手順では、アプリケーションを実行して進行状況をテストします。

重要な注重要な注:

Windows Phone Emulator にはサンプルの予定が含まれていません。Windows Phone エミュレーターを使用してこの手順をテストすることもできますが、予定が表示されるのは物理デバイス上のみです。

アプリケーションをテストするには

  1. エミュレーターまたはデバイス上でアプリケーションを起動します。必要に応じて、最初のチェックポイントの指示を使用します。

    アプリケーションが起動し、メイン ページが表示されます。

  2. スワイプして [appointments] ピボット アイテムを表示してから、[search] ボタンをクリックします。

    検索結果がリストに入ります。

  3. リストに表示されている予定の 1 つをタップします。

    予定の詳細ページに、その予定の詳細情報が表示されます。詳細情報が多い場合は、ページをスクロールするとすべての詳細を見ることができます。

  4. [デバッグ] メニューの [デバッグの停止] をクリックします。(F5)

Windows Phone は、ユーザーの複数のアカウント全体でユーザーの連絡先データを集約したビューを提供します。情報は、デバイス自体で入力されたデータ、ソーシャル ネットワーク サイト、その他のデータ サービス プロバイダーなどのソースから取得できます。ここで説明する手順では、連絡先とカレンダーのデータがどのアカウントからのものかを表示します。

アカウント データにアクセスするには

  1. ソリューション エクスプローラーで、MainPage.xaml をダブルクリックし、デザイナーで開きます。

  2. 2 番目のピボット アイテムを、次に示すコードで置き換えます。このコードでは、2 つのリスト ボックスを作成します。1 つは連絡先のアカウント用で、もう 1 つは予定のアカウント用です。このコードでは項目テンプレートも使用されていますが、これはこの後で追加します。

    <controls:PivotItem Header="accounts">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
    
            <StackPanel Grid.Row="0" >
    
                <TextBlock Text="contact accounts" Foreground="{StaticResource PhoneAccentBrush}" Style="{StaticResource PhoneTextLargeStyle}" />
                <ListBox Name="ContactAccounts" ItemsSource="{Binding}" ItemTemplate="{StaticResource AccountTemplate}" Height="200" Margin="24,0,0,0" />
            </StackPanel>
    
            <StackPanel Grid.Row="1" >
    
                <TextBlock Text="appointment accounts" Foreground="{StaticResource PhoneAccentBrush}" Style="{StaticResource PhoneTextLargeStyle}" />
                <ListBox Name="CalendarAccounts" ItemsSource="{Binding}" ItemTemplate="{StaticResource AccountTemplate}" Height="200" Margin="24,0,0,0" />
            </StackPanel>
        </Grid>
    </controls:PivotItem>
    
  3. PHONE:PHONEAPPLICATIONPAGE 要素の後の GRID 要素の前に、次のコードを追加します。このテンプレートは、アカウントの名前と種類を、リストのエントリごとに 1 行で表示するものです。

    <phone:PhoneApplicationPage.Resources>
    
        <DataTemplate x:Key="AccountTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="{Binding Path=Name, Mode=OneWay}" />
                <TextBlock Grid.Column="1" Text=" account: " />
                <TextBlock Grid.Column="2" Text="{Binding Path=Kind, Mode=OneWay}" />
            </Grid>
        </DataTemplate>
    
    </phone:PhoneApplicationPage.Resources>
    
  4. ソリューション エクスプローラーで、MainPage.xaml を右クリックしてから、[コードの表示] をクリックします。

    コード エディターに分離コード ファイルが開きます。

  5. コンストラクターに次のコードを追加します (既存のコードがある場合はその後に追加します)。このコードでは、アカウント データをユーザー インターフェイスにバインドするために、連絡先リスト ボックスのデータ コンテキストを Accounts プロパティに設定し、予定リスト ボックスのデータ コンテキストを Accounts プロパティに設定します。

    ContactAccounts.DataContext = (new Contacts()).Accounts;
    CalendarAccounts.DataContext = (new Appointments()).Accounts;
    

この手順では、アプリケーションを実行して進行状況をテストします。

アプリケーションをテストするには

  1. エミュレーターまたはデバイス上でアプリケーションを起動します。必要に応じて、最初のチェックポイントの指示を使用します。

    アプリケーションが起動し、メイン ページが表示されます。

  2. スワイプしてアカウントのピボット アイテムを表示します。

    結果がリストに格納されます。このアプリケーションを Windows Phone エミュレーターでテストした場合は、両方のリストに次のように表示されます。

    Phone account: Phone

  3. [デバッグ] メニューの [デバッグの停止] をクリックします。(F5)

前の手順では、1 人の連絡先の写真を連絡先の詳細情報ページに表示しました。この手順では、複数の連絡先の写真を、メイン ページの結果リストに直接データ バインドします。連絡先の写真はプロパティではないので (写真は GetPicture メソッドの呼び出しによって返されます)、写真をデータ バインドできるようにするには、まずカスタム データ コンバーターを作成する必要があります。

連絡先の写真をユーザー インターフェイスにデータ バインドするには

  1. ソリューション エクスプローラーで、MainPage.xaml を右クリックしてから、[コードの表示] をクリックします。

    コード エディターに分離コード ファイルが開きます。

  2. 次に示すコードを見つけます。この次の手順で、この行の後に新しいコードを追加します。

    }//End page class
    
  3. MainPage クラスのコードの後に、次の新しいクラスを追加します。これがカスタム データ コンバーターです。

    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();
        }
    }//End converter class
    
  4. ソリューション エクスプローラーで、MainPage.xaml をダブルクリックし、デザイナーで開きます。

  5. <phone:PhoneApplicationPage> タグで、他の名前空間の宣言と一緒に、次のコードを追加します。これにより、カスタム データ コンバーターにアクセスできます。

    xmlns:MyApp="clr-namespace:ContactsAndCalendarTestApp"
    
  6. これまでの手順で追加した PHONE:PHONEAPPLICATION.RESOURCES 要素を見つけます。データ テンプレートの後、</phone:PhoneApplicationPage.Resources> 終了タグの前に、次のコードを追加します。

    <MyApp:ContactPictureConverter x:Key="ContactPictureConverter" />
    
  7. 最初のピボット アイテムの連絡先検索結果 (contact results) の中にある、次のデータ テンプレートを見つけます。

    <DataTemplate>
        <TextBlock Name="ContactResults" Text="{Binding Path=DisplayName, Mode=OneWay}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="18,8,0,0" />
    </DataTemplate>
    
  8. この既存のデータ テンプレートを次のコードで置き換えます。このコードによって、連絡先の写真が追加され、写真がカスタム データ コンバーターを使用してデータ バインドされます。

    <DataTemplate>
        <StackPanel Orientation="Horizontal" >
            <Border BorderThickness="2" HorizontalAlignment="Left" VerticalAlignment="Center" 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}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="18,8,0,0" />
        </StackPanel>
    </DataTemplate>
    

この手順では、アプリケーションを実行して進行状況をテストします。

注注:

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

アプリケーションをテストするには

  1. エミュレーターまたはデバイス上でアプリケーションを起動します。必要に応じて、最初のチェックポイントの指示を使用します。

    アプリケーションが起動し、メイン ページが表示されます。

  2. テキスト ボックス内に「A」と入力して [検索] をクリックします。

    検索結果がリストに入ります。このアプリケーションを物理デバイス上でテストする場合は、連絡先によって写真があることもないこともあります。写真のある連絡先が表示されるまで、リストをスクロールしてください。

  3. [デバッグ] メニューの [デバッグの停止] をクリックします。(F5)

次の方法でアプリケーションの機能を拡張できます。

  • 予定を検索するときに開始日と終了日をユーザーに入力させるように変更します。

  • 連絡先の詳細ページで、予定の詳細ページと同様にスクロール ビューアーを使用できるように変更します。

  • 連絡先を検索するときに、ユーザーが実行する検索の種類に応じて連絡先の名前、電子メール、または電話番号を表示するように変更します。

  • スタート画面に固定された連絡先をすべて検索する機能を追加します。詳細については、「Windows Phone の連絡先のフィルターと適合」を参照してください。

表示:
© 2014 Microsoft