Walkthrough: Accessing contact and calendar data for Windows Phone 8

Article
05/20/2016

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

In this walkthrough, you build a simple contacts and calendar app. The app that you create in this walkthrough displays contacts, appointments, and the accounts that the data comes from. To download a completed version of this app, see Contacts and Calendar Sample.

This topic discusses read-only access to user’s contact data. For information on creating a custom contact store for your app that provides read and write access, see Custom contact store for Windows Phone 8.

In this walkthrough, you perform the following tasks.

Access contact and calendar data.
Bind contacts, appointments, and accounts to the user interface.
Display details for individual contacts (including photo) and appointments.
Data-bind contact photos to the user interface by creating a custom data converter.

The completed app looks like the following.

This topic contains the following sections.

Prerequisites

To complete this walkthrough, you must have the Windows Phone SDK installed. For more information, see Windows Phone 8 SDK tools.

Creating the app project

First, you create a new Windows Phone app project named ContactsAndCalendarTestApp. In later steps, you will add code to your app that assumes the app name is ContactsAndCalendarTestApp. If you choose a different name for your app, you must change the namespace references in the code.

To create the app project

In Visual Studio, on the File menu, point to New and then click Project.

The New Project dialog appears.
In the left pane, click Installed Templates, expand Visual C# or Visual Basic, and then click Windows Phone.
In the list of project types, click **Windows Phone App **.
In the Name box, type ContactsAndCalendarTestApp.
Click OK.

The Windows Phone platform selection dialog box appears.
In the Target Windows Phone Version drop-down list, select Windows Phone OS 7.1 and then click OK.

The new app project is created and opens in Visual Studio.

Setting Up the app structure

This app contains a main page with three pivot items, one each for contacts, appointments, and accounts. There are also two additional pages for the contact and appointment details.

To set up the app structure

In Solution Explorer, select MainPage.xaml and then press the Delete key to delete it.
In Solution Explorer, right-click the project, point to Add, and then click New Item.

The Add New Item dialog appears.
Select Windows Phone Pivot Page, enter the name MainPage.xaml, and then click Add.

The new pivot page opens in the designer.

In the XAML code, locate the GRID element named LayoutRoot. Replace everything from there to the end of the file with the following code. This creates the three pivot items that you will fill in later.

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

In Solution Explorer, right-click the project, point to Add, and then click New Item.

The Add New Item dialog appears.
Select Windows Phone Portrait Page, enter the name AppointmentDetails.xaml, and then click Add.

The new page opens in the designer.
In Solution Explorer, right-click the project, point to Add, and then click New Item.

The Add New Item dialog appears.
Select Windows Phone Portrait Page, enter the name ContactDetails.xaml, and then click Add.

The new page opens in the designer.
In Solution Explorer, right-click App.xaml and then click View Code.

The code-behind file opens in the code editor.

At the top of the class, add the following code. This code creates two global static variables that you use to pass data between the main page and the detail pages.

public static Microsoft.Phone.UserData.Contact con;
public static Microsoft.Phone.UserData.Appointment appt;

Public Shared con As Microsoft.Phone.UserData.Contact
Public Shared appt As Microsoft.Phone.UserData.Appointment

(Optional) Disable the frame rate counters by commenting out the following code.

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

Application.Current.Host.Settings.EnableFrameRateCounter = True

Checkpoint 1

In this procedure, you run the app to test your progress.

To test the app

On the File menu, click Save All. (Ctrl+Shift+S)
On the Build (or the Debug menu), click Build Solution. (Ctrl+Shift+B)
On the standard toolbar, set the deployment target of the app to Windows Phone Emulator or Windows Phone Device.

Or
On the Debug menu, click Start Debugging. (F5)

The app starts and the main page appears.
Swipe the pivot items. All three pivot items should appear with the headers contacts, accounts, and appointments.
On the Debug menu, click Stop Debugging. (F5)

Accessing contact data

The process for accessing contact data is to get a reference to the Contacts object, perform an asynchronous search on it by calling SearchAsync, and then capture the results as a collection of Contact objects in the SearchCompleted event handler.

To create the contact pivot item UI

In Solution Explorer, double-click MainPage.xaml to open it in the designer.

Locate the first pivot item and replace it with the following code. This code creates the text box, radio buttons, and button that are used to search for contacts. It also creates the list box that contains the results of the search.

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

To access contact data

In Solution Explorer, right-click MainPage.xaml and then click View Code.

The code-behind file opens in the code editor.

Replace the code with the following. This code sets the default contact search filter to none, and sets the default contact search type to name. It also contains the code to change the search filter when you select the radio buttons. For more information, see Contact filtering and matching for Windows Phone 8.

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

Imports Microsoft.Phone.UserData

Partial Public Class MainPage
    Inherits PhoneApplicationPage

    Dim contactFilterKind As FilterKind = FilterKind.None


    Public Sub New()
        InitializeComponent()

        name.IsChecked=True
    End Sub


    Private Sub FilterChange(sender As System.Object, e As System.Windows.RoutedEventArgs)

        Dim opt As String = (CType(sender,RadioButton)).Name

        Dim scope As InputScope = new InputScope()
        Dim scopeName As InputScopeName = new InputScopeName()

        Select Case opt

            Case "name"
                contactFilterKind = FilterKind.DisplayName
                scopeName.NameValue = InputScopeNameValue.Text

            Case "phone"
                contactFilterKind = FilterKind.PhoneNumber
                scopeName.NameValue = InputScopeNameValue.TelephoneNumber

            Case "email"
                contactFilterKind = FilterKind.EmailAddress
                scopeName.NameValue = InputScopeNameValue.EmailSmtpAddress    

            Case Else
                contactFilterKind = FilterKind.None
        End Select

        scope.Names.Add(scopeName)
        contactFilterString.InputScope = scope
        contactFilterString.Focus()
    End Sub

End Class'End page class

After the constructor, add the following code. This code contains the search button click event, and starts the asynchronous contact search.

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");
}

Private Sub SearchContacts_Click(sender As System.Object, e As System.Windows.RoutedEventArgs)

    ContactResultsLabel.Text = "results are loading..."
    ContactResultsData.DataContext = Nothing

    Dim cons As Contacts = New Contacts()

    AddHandler cons.SearchCompleted, AddressOf Contacts_SearchCompleted

    cons.SearchAsync(contactFilterString.Text, contactFilterKind, "Contacts Test #1")
End Sub

After the click event, add the following code. This code contains the method to handle the completed event of the asynchronous search. This code binds the contact data to the user interface by setting the data context of the list box equal to the results of the search. It includes error handling in case there are no results. The code also changes the text of the list box label depending on whether there are results or not.

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";
    }
}

Private Sub Contacts_SearchCompleted(sender As Object, e As ContactsSearchEventArgs)

    Try
        'Bind the results to the list box that displays them in the UI
        ContactResultsData.DataContext = e.Results

    Catch ex As System.Exception

        'That's okay, no results
    End Try

    If ContactResultsData.Items.Count > 0 Then

        ContactResultsLabel.Text = "results (tap name for details...)"
    Else
        ContactResultsLabel.Text = "no results"
    End If
End Sub

After the search completed event, add the following code. When you tap a contact in the results list, this code stores the contact in a global variable, and then navigates to the contact details page.

private void ContactResultsData_Tap(object sender, GestureEventArgs e)
{
    App.con = ((sender as ListBox).SelectedValue as Contact);

    NavigationService.Navigate(new Uri("/ContactDetails.xaml", UriKind.Relative));
}

Private Sub ContactResultsData_Tap(sender As System.Object , e As System.Windows.Input.GestureEventArgs)

    App.con = CType((CType(sender,ListBox)).SelectedValue, Contact)

    NavigationService.Navigate(new Uri("/ContactDetails.xaml", UriKind.Relative))
End Sub

Displaying the contact details

When you tap a contact in the results list on the main page, the app navigates to the contact details page.

To display the contact details

In Solution Explorer, double-click ContactDetails.xaml to open it in the designer.

Locate the GRID element named LayoutRoot. Replace everything from there to the end of the file with the following code. This creates a text block for the contact’s name, an image for the contact’s photo, and list boxes to hold other contact data.

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

In Solution Explorer, right-click ContactDetails.xaml and then click View Code.

The code-behind file opens in the code editor.

Replace the code with the following. This code sets the data context of the page to the contact that was selected on the main page. It also calls the GetPicture method and displays the result in the image control.

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

Imports System.Windows.Media.Imaging

Partial Public Class ContactDetails
    Inherits PhoneApplicationPage

    Public Sub New()
        InitializeComponent()
    End Sub

    Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)

        MyBase.OnNavigatedTo(e)

        'Set the data context for this page to the selected contact
        Me.DataContext = App.con

         Try
            Dim img As BitmapImage = new BitmapImage()
            img.SetSource(App.con.GetPicture())
            Picture.Source = img

        Catch ex As System.Exception

            'can't get a picture of the contact.
        End Try
    End Sub
End Class

Checkpoint 2

In this procedure, you run the app to test your progress.

Note

Windows Phone Emulator contains sample contacts. You can test this procedure using Windows Phone Emulator or a physical device. However, the sample contacts do not have photos.

To test the app

Start your app in the emulator or on a device. If necessary, use the instructions from the first checkpoint.

The app starts and the main page appears.
In the text box, enter the letter A, and then click search.

The results populate the list. If you test the app on Windows Phone Emulator, you see the following.

Andrew Hill

Arturo Lopez
Tap a name in the result list.

The contact details page opens with the contact details displayed. Not all data is available for all contacts.
On the Debug menu, click Stop Debugging. (F5)

Accessing appointment data

The process for accessing calendar data is to get a reference to the Appointments object, perform an asynchronous search on it by calling SearchAsync, and then capture the results as a collection of Appointment objects in the SearchCompleted event handler.

To create the appointment pivot item UI

In Solution Explorer, double-click MainPage.xaml to open it in the designer.

Locate the third pivot item and replace it with the following code. This code creates labels for the start and end dates, the search button, and the list box that contains the results of the search.

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

To access appointment data

In Solution Explorer, right-click MainPage.xaml and then click View Code.

The code-behind file opens in the code editor.

In the MainPage class, after the constructor, add the following code. This code contains the search button click event, and starts the asynchronous appointment search. This code searches for appointments during the upcoming week.

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");
}

Private Sub SearchAppointments_Click(sender As System.Object, e As System.Windows.RoutedEventArgs)

    AppointmentResultsLabel.Text = "results are loading..."
    AppointmentResultsData.DataContext = Nothing

    Dim appts As Appointments = new Appointments()

    AddHandler appts.SearchCompleted, AddressOf Appointments_SearchCompleted

    Dim start As DateTime = new DateTime.Now
    Dim endTime As DateTime = start.AddDays(7)

    appts.SearchAsync(start, endTime, 20, "Appointments Test #1")
End Sub

After the click event, add the following code. This code contains the method to handle the completed event of the asynchronous search. This code binds the appointment data to the user interface by setting the data context of the list box equal to the results of the search. It includes error handling in case there are no results. The code also changes the text of the list box label depending on whether there are results or not.

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";
    }
}

Private Sub Appointments_SearchCompleted(sender As Object, e As AppointmentsSearchEventArgs)

    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 ex As System.Exception

        'That's okay, no results
    End Try

    If AppointmentResultsData.Items.Count > 0 Then

        AppointmentResultsLabel.Text = "results (tap for details...)"
    Else
        AppointmentResultsLabel.Text = "no results"
    End If
End Sub

After the search completed event, add the following code. When you tap an appointment in the results list, this code stores the appointment in a global variable, and then navigates to the appointment details page.

private void AppointmentResultsData_Tap(object sender, GestureEventArgs e)
{
    App.appt = ((sender as ListBox).SelectedValue as Appointment);

    NavigationService.Navigate(new Uri("/AppointmentDetails.xaml", UriKind.Relative));
}

Private Sub AppointmentResultsData_Tap(sender As System.Object , e As System.Windows.Input.GestureEventArgs)

    App.appt = CType((CType(sender, ListBox)).SelectedValue, Appointment)

    NavigationService.Navigate(new Uri("/AppointmentDetails.xaml", UriKind.Relative))
End Sub

Displaying the appointment details

When you tap an appointment in the results list on the main page, the app navigates to the appointment details page.

To display the appointment details

In Solution Explorer, double-click AppointmentDetails.xaml to open it in the designer.

Locate the GRID element named LayoutRoot. Replace everything from there to the end of the file with the following code. This creates a text block for the appointment subject, and a scroll viewer to hold the other appointment data.

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

In Solution Explorer, right-click AppointmentDetails.xaml and then click View Code.

The code-behind file opens in the code editor.

Replace the code with the following. This code set the data context of the page to the appointment that was selected on the main page.

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

Partial Public Class AppointmentDetails
    Inherits PhoneApplicationPage

    Public Sub New()
        InitializeComponent()
    End Sub

    Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)

        MyBase.OnNavigatedTo(e)

        'Set the data context for this page to the selected appointment
        Me.DataContext = App.appt
    End Sub
End Class

Checkpoint 3

In this procedure, you run the app to test your progress.

Important Note:
Windows Phone Emulator does not contain sample appointments. You can test this procedure using Windows Phone Emulator, but you will see appointments only on a physical device.

To test the app

Start your app in the emulator or on a device. If necessary, use the instructions from the first checkpoint.

The app starts and the main page appears.
Swipe to the appointments pivot item, and then click the search button.

The results populate the list.
Tap an appointment in the list.

The appointment details page opens with the appointment details displayed. If the details are long, scroll the page to see all the details.
On the Debug menu, click Stop Debugging. (F5)

Accessing account data

Windows Phone provides an aggregated view of the user’s contact data across the user's different accounts. Information can come from sources such as data entered in the phone itself, social networking sites, and other data service providers. In this procedure, you display the accounts that the contacts and calendar data comes from.

To access account data

In Solution Explorer, double-click MainPage.xaml to open it in the designer.

Locate the second pivot item and replace it with the following code. This code creates two list boxes, one for the contact accounts and one for the appointment accounts. This code also uses an item template which you will add in the next step.

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

After the PHONE:PHONEAPPLICATIONPAGE element and before the GRID element, add the following code. This template displays the name and kind of account on a single line for each entry in the list.

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

In Solution Explorer, right-click MainPage.xaml and then click View Code.

The code-behind file opens in the code editor.
In the constructor, after any existing code, add the following. This code binds the account data to the user interface by setting the data context of the contacts list box to the Accounts property and the appointments list box to the Accounts property.
```
ContactAccounts.DataContext = (new Contacts()).Accounts;
CalendarAccounts.DataContext = (new Appointments()).Accounts;
```
```
ContactAccounts.DataContext = (new Contacts()).Accounts
CalendarAccounts.DataContext = (new Appointments()).Accounts
```

Checkpoint 4

In this procedure, you run the app to test your progress.

To test the app

Start your app in the emulator or on a device. If necessary, use the instructions from the first checkpoint.

The app starts and the main page appears.
Swipe to the accounts pivot item.

The results populate the lists. If you test the app on Windows Phone Emulator, you see the following in both lists.

Phone account: Phone
On the Debug menu, click Stop Debugging. (F5)

Data-binding contact photos to the UI

In a previous procedure, you displayed the photo for a single contact on the contact details page. In this procedure, you data-bind multiple contact photos directly to the results list on the main page. Because contact photos are not a property (they are returned by calling the GetPicture method), you must create a custom data converter before you can data-bind them.

To data-bind contact photos to the UI

In Solution Explorer, right-click MainPage.xaml and then click View Code.

The code-behind file opens in the code editor.
Locate the following code. In the next step, you add new code after this line.
```
}//End page class
```
```
End Class'End page class
```

After the MainPage class code, add the following new class. This is the custom data converter.

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

Public Class ContactPictureConverter
    Implements System.Windows.Data.IValueConverter

    Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object _
        Implements System.Windows.Data.IValueConverter.Convert

        Dim c as Contact = CType(value, Contact)

        If c Is Nothing Then
             Return Nothing
        End If

        Dim imageStream as System.IO.Stream = c.GetPicture()

        If imageStream IsNot Nothing Then

            Return Microsoft.Phone.PictureDecoder.DecodeJpeg(imageStream)
        End If

        Return Nothing
    End Function

    Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object _
        Implements System.Windows.Data.IValueConverter.ConvertBack

        throw new NotImplementedException()
    End Function
End Class

In Solution Explorer, double-click MainPage.xaml to open it in the designer.
In the <phone:PhoneApplicationPage> tag, with the other namespace declarations, add the following code. This allows you to access the custom data converter.
```
xmlns:MyApp="clr-namespace:ContactsAndCalendarTestApp"
```
Locate the PHONE:PHONEAPPLICATION.RESOURCES element that you added in a previous procedure. After the data template, before the end </phone:PhoneApplicationPage.Resources> tag, add the following.
```
<MyApp:ContactPictureConverter x:Key="ContactPictureConverter" />
```

In the first pivot item, in the contact results, locate the following data template.

<DataTemplate>
    <TextBlock Name="ContactResults" Text="{Binding Path=DisplayName, Mode=OneWay}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="18,8,0,0" />
</DataTemplate>

Replace the existing data template with the following. This adds the photo of the contact, and data-binds it using the custom data converter.

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

Checkpoint 5

In this procedure, you run the app to test your progress.

Note

Windows Phone Emulator contains sample contacts. You can test this procedure using Windows Phone Emulator or a physical device. However, the sample contacts do not have photos.

To test the app

Start your app in the emulator or on a device. If necessary, use the instructions from the first checkpoint.

The app starts and the main page appears.
In the text box, enter the letter A, and then click search.

The results populate the list. If you test the app on a physical device, some contacts may have photos. Scroll the list until you see contacts that have photos.
On the Debug menu, click Stop Debugging. (F5)

Next Steps

You can expand the functionality of the app in the following ways.

Change the appointment search to get the start and end dates from the user.
Change the contact details page to use a scroll viewer, similar to the appointment details page.
Change the contact search results to display the contact’s name, email, or phone number depending on the type of search the user performs.
Add the ability to search for all contacts pinned to the Start screen. For more information, see Contact filtering and matching for Windows Phone 8.

Share via

Walkthrough: Accessing contact and calendar data for Windows Phone 8

Prerequisites

Creating the app project

To create the app project

Setting Up the app structure

To set up the app structure

Checkpoint 1

To test the app

Accessing contact data

To create the contact pivot item UI

To access contact data

Displaying the contact details

To display the contact details

Checkpoint 2

To test the app

Accessing appointment data

To create the appointment pivot item UI

To access appointment data

Displaying the appointment details

To display the appointment details

Checkpoint 3

To test the app

Accessing account data

To access account data

Checkpoint 4

To test the app

Data-binding contact photos to the UI

To data-bind contact photos to the UI

Checkpoint 5

To test the app

Next Steps

See Also

Reference

Other Resources

Additional resources