4 - working with the tiles, notifications, contacts and calendar (3t)

1

DONG NAI UNIVERSITY OF TECHNOLOGY

3. Contacts

1. Tiles

4. Calendar

2. Notifications

2


1. Tiles

1.1 Configure Default Tile

1.2 Create a Flip Tile

1.3 Create an Iconic Tile

1.4 Create a Cycle Tile

1.5 Lock Screen

3



ProblemYou want to configure which tile shows up on the home screen when the user pins your application. SolutionConfigure the Tile Template, Tile Title, and Tile Images properties in the application’s manifest file.How It WorksThe default, or primary, tile for your application is defined in the WMAppManifest.xml file located under the Properties folder of your application.

4



5



Tile Template Description

TemplateFlip The flip template gives you two surfaces on which to provide information to the user. Only the front and back of the medium and large tiles sizes display information. The tile flips at random intervals, so it’s important to choose the right type of information to display.

TemplateCycle The cycle template can be configured with one to nine images and cycles through them. The transitions and animations are fixed.

TemplateIconic The iconic template displays a single image with a place to display a count. It also has predefined areas for the display of information to the user in the large format.

6



1. Press Pin to start

2. Go back the Home Screen

7



ProblemYou want a tile for the main home screen that is capable of showing extra information. SolutionUse the FlipTile as the default tile for your application. How It WorksThe Flip Tile template is best suited for times when you have additional information that the user would be interested in seeing without having to launch your application.

8



Mapping Content

Each of the different Tile templates has an associated class that defines the data consumed by the Tile. For the Flip Tile this is the FlipTileData class. You don’t use this class directly when defining your default tile but rather enter values in the PrimaryToken element in the WPAppManifest.xaml file

9



Mapping of FlipTileData Class Properties to the PrimaryToken Element of WPAppManifest.xaml

Property Name

PrimaryToken Element

Description

BackBackgroundImage

BackBackgroundImageURI

The background image of the back of the Tile.

BackContent BackContent The text to display on the back of the Tile, above the title.

BackgroundImage

BackgroundImageURI

The background image of the front of the Tile

BackTitle BackTitle The title to display at the bottom of the back of the Tile

10



Property Name


Description

Count Count This property is of type Nullable<int> with a valid range that is between 1 and 99.

SmallBackgroundImage

SmallImageURI The front-side background image for the small Tile size

Title Title The text that displays on the front side of the medium and wide tile sizes.

WideBackBackgroundImage

LargeBackBackgroundImageURI

The back-side background image for the wide Tile size

11



Property Name


Description

WideBackContent

LargeBackContent

The text that displays above the title, on the back side of the wide Tile size

WideBackgroundImage

LargeBackgroundImageURI

The front-side background image for the wide Tile size

Not Applicable DeviceLockImageURI

The image to be used on the Lock Screen…

Not Applicable HasLarge True if your application supports the large Tile format; False if not

12



Character Content

Character-based content is limited to predefined areas of the template and therefore limited in length. The Flip Tile template won’t wrap text or add an ellipsis to the end of a line and will simply truncate the data if it is too long for display.

13



Character Content

Tile size Title BackTitle BackContent WideBackContent

Small NA NA NA NA

Medium 19 19 3 lines at 13 NA

Wide 39 39 NA 3 lines at 27

The Segoe WP font that is used to display text on the start screen is not a fixed width font, and therefore the character counts are approximations only.

14



FlipTileData property mapping to the Flip Tile template

Visual Layout

15



Flip Tile template layout dimensions

Visual Layout

16



ProblemYour application has information that is count-centric and you want to best method of showing that count to the user. SolutionUse the Iconic Tile as the default tile for your application. How It WorksThe Iconic Tile template is best suited for times when you have an application for which a current count of items is the most relevant information that the user would be interested in seeing without having to launch your application.

17



Mapping Content

Each of the different Tile templates has an associated class that defines the data consumed by the Tile. For the Iconic Tile this is the IconicTileData class. You don’t use this class directly when defining your default tile but, rather, enter values in the PrimaryToken element in the WPAppManifest.xaml file.

18



Mapping of IconicTileData Class Properties to the PrimaryToken Element of WPAppManifest.xaml.

Property Name


Description

BackgroundColor

BackgroundColor The background color of the Tile

Count Count This property is of type Nullable<int> with a valid range that is between 1 … 99

IconImage IconImageURI The icon image for the medium and large Tile sizes.

SmallIconImage

SmallImageURI The icon image for the small Tile size

19



Property Name


Description


WideContent1 LargeContent1 The text that displays on the first row of the wide Tile size.

WideContent2 LargeContent2 The text that displays on the second row of the wide Tile size

WideContent3 LargeContent3 The text that displays on the third row of the wide Tile size

Not Applicable Message Do not set a value for the element..

20



Character Content

Character-based content is limited to predefined areas of the template and therefore limited in length. The Iconic Tile template won’t wrap text or add an ellipsis to the end of a line and will simply truncate the data if it is too long for display.

21



Character Content

Tile size Title WideContent1

WideContent2

WideContent3

Small NA NA NA NA

Medium 19 NA NA NA

Wide 39 33 3 33

The Segoe WP font that is used to display text on the start screen is not a fixed width font, and therefore the character counts are approximations only.

22



Visual Layout

IconicTileData property mapping to the Iconic Tile template


23


Visual Layout

Iconic Tile template layout dimensions

24



ProblemYou want to display several visual representations of your application’s content. SolutionUse the Cycle Tile as the default Tile for your application. How It WorksThe decision to use the Cycle Tile is fairly straightforward but you should be aware of certain limitations.

25



Mapping Content

Each of the different Tile templates has an associated class that defines the data consumed by the Tile. For the Cycle Tile this is the CycleTileData class. You don’t use this class directly when defining your default tile but rather enter values in the PrimaryToken element in the WPAppManifest.xaml file.

26



Property Name


Description

Count Count This property is of type Nullable<int> with a valid range that is between 1 and 99.

SmallIconImage

SmallImageURI The icon image for the small Tile size.


CycleImages Photo01ImageURI through Photo09ImageURI

A collection of up to 9 background images for the medium and wide Tile sizes.

27



Character Content

Tile size Title

Small NA

Medium 19

Wide 39

The only character-based content that can be configured is the Title and has the same limitations as the Title of the other Tile templates.The Segoe WP font that is used to display text on the start screen is not a fixed-width font, and therefore the character counts are approximations only

28



Visual Layout

CycleTileData property mapping to the Cycle Tile template

29



Visual Layout

Cycle Tile template layout dimensions

30


1.5 Lock Screen

ProblemYou want to be able to allow the user to use a lock screen image provided by your application. SolutionCreate a lock screen image and register your application as a lock screen background image provider. How it WorksThere are two ways to provide a background image for the lock screen from your applicaton. You can provide a default image that the system can pull from your application or you can set a specific image via code.

31


1.5 Lock Screen

Recommended application specific content area for the lock screen background

32


1.5 Lock Screen

Register your application by adding the Lockscreen_Background extension in the WPAppManifest.xml file and provide a default lock screen image in the root of your application named. In the manifest file, immediately after the </Tokens> section, which always exists, you may need to add an <Elements> section to the manifest.

</Tokens> <Extensions> <Extension ExtensionName="LockScreen_Background" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default"/> </Extensions>

33


1.5 Lock Screen

Or use by Coding:use the LockScreenManager and LockScreen classes using Windows.Phone.System.UserProfile;var op = await Windows.System.Launcher.LaunchUriAsync(new Uri("ms-settings-lock:"));

34


2. Notifications

2.1 Background Agents

2.2 Alarms and Reminders

2.3 Toasts

2.4 Push Notifications

35



Background agents can execute code even when your application is not in the foreground.There are numerous types of Windows Phone 8 background agents that perform background processing such as audio streaming, wallet change notification, or task scheduling.

using Microsoft.Phone.Scheduler;using System.Diagnostics;using Microsoft.Phone.Shell;

36



The basic steps to update tiles using a scheduled task agent are:1. Create a new Windows Phone App.2. Add a Windows Phone Scheduled Task Agent project to your solution.3. Code the agent’s OnInvoke() method.4. In the main project that houses MainPage.xaml, include a reference from the main application to the agent project.5. In the main project that houses MainPage.xaml, configure WMAppManifest.xml to include the agent.6. In the main application MainPage.xaml.cs, write code to schedule the task.

37



38



39



ScheduledAgent.cs

protected override void OnInvoke(ScheduledTask task) { //TODO: Add code to perform your task in background var pageUri = new Uri("/", UriKind.Relative); var smalUri = new Uri("Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative); var mediumUri = new Uri("Assets/Tiles/FlipCycleTileMedium.png", UriKind.Relative); var largeUri = new Uri("Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative);

var tile = ShellTile.ActiveTiles .Where(t => t.NavigationUri.Equals(pageUri)) .SingleOrDefault();

40



ScheduledAgent.cs if (tile != null) { var tileData = new FlipTileData() { Title = "We're no trouble", BackContent = "Adopt me!", SmallBackgroundImage = smalUri, BackgroundImage = mediumUri, WideBackgroundImage = largeUri, Count = 35, BackTitle = "Do you haz kibbles?", WideBackContent = "Pick a fluffball", BackBackgroundImage = mediumUri, WideBackBackgroundImage = largeUri }; tile.Update(tileData); } NotifyComplete(); }

41



WMAppManifest.xml

<Tasks> <DefaultTask Name ="_default" NavigationPage="MainPage.xaml"/> <ExtendedTask Name="BackgroundTask"> <BackgroundServiceAgent Specifier="ScheduledTaskAgent" Name="LearnUpdateTilesAgent" Source="LearnUpdateTilesAgent" Type="LearnUpdateTilesAgent.ScheduledAgent" /> </ExtendedTask></Tasks>

42



MainPage.xaml

<phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar> <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/feature.alarm.png" IsEnabled="True" Text="background" Click="ApplicationBarIconButton_Click_1"/> </shell:ApplicationBar></phone:PhoneApplicationPage.ApplicationBar>

43


2.1 Background Agents MainPage codingprivate void ApplicationBarIconButton_Click_1 (object sender, EventArgs e){ const string taskName = "AdoptionTask"; var task = ScheduledActionService.Find(taskName) as PeriodicTask; if (task != null) { ScheduledActionService.Remove(taskName); } task = new PeriodicTask(taskName); task.Description = "Update bunny adoptions tiles"; try { ScheduledActionService.Add(task); #if DEBUG ScheduledActionService.LaunchForTest(taskName, TimeSpan.FromSeconds(1)); #endif } catch (InvalidOperationException ex) { Debug.WriteLine(ex.Message); } }

44



Alarm and Reminder notifications can be scheduled by ScheduledActionService. Alarms are simple notifications that show string Content and

can optionally play a custom sound. A Reminder has a Title, Content, and a NavigationUri. Alarms and Reminders appear as popups along with a sound. The Alarm can be snoozed or dismissed by the user pressing

the buttons in the popup. A Reminder has an additional wrinkle. If the user touches outside the buttons, they are navigated to

the page specified in the NavigationUri.

using Microsoft.Phone.Scheduler;

45



Creating and Scheduling the Alarm

private void btnAlarm_Click (object sender, RoutedEventArgs e) { var uniqueName = Guid.NewGuid().ToString(); var alarm = new Alarm(uniqueName) { BeginTime = DateTime.Now.AddSeconds(3), Content = "You had an email!", Sound = new Uri(@"assets\sounds\windows notify.wav", UriKind.Relative) }; try { ScheduledActionService.Add(alarm); } catch (InvalidOperationException ex) { Debug.WriteLine(ex.Message); } }

46



Creating and Scheduling the Reminder

private void btnRemainder_Click(object sender, RoutedEventArgs e) { var uniqueName = Guid.NewGuid().ToString(); var reminder = new Reminder(uniqueName) { BeginTime = DateTime.Now.AddSeconds(3), Title = "Show new page", Content = "click here to show new page", NavigationUri = new Uri("/newpage.xaml", UriKind.Relative) }; try { ScheduledActionService.Add(reminder); } catch (InvalidOperationException ex) { Debug.WriteLine(ex.Message);} }

47


2.3 Toasts

Toasts show users relevant and time-critical information when they’re not actually running your application. Toasts appear in the system tray showing the application icon, a title in bold font, and content in regular font. When the user clicks the toast, they’re navigated to the application.

48


2.3 Toasts

private void btnToast1_Click(object sender, RoutedEventArgs e)

{ var toast = new ShellToast() { Title = "Bunny Adoption", Content = "Meet Harvey" }; toast.Show(); }

49


2.3 Toasts

private void btnToast2_Click(object sender, RoutedEventArgs e) { const string path

= "/DailyBunny.xaml?NavigatedFrom=Toast Notification"; var toast = new ShellToast() { Title = "Bunny Adoption", Content = "Meet Harvey", NavigationUri = new Uri(path, UriKind.Relative) }; toast.Show(); }

50


2.3 Toasts

DailyBunny.xaml

protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); string navigatedFrom; if (NavigationContext.QueryString

.TryGetValue("NavigatedFrom", out navigatedFrom)) { //process navigatedFrom } }

51



Push notifications are announcements that come from outside your application and show up as toasts, tile changes, or events in your application. Notifications have three basic components:

The client Windows Phone 8 application that receives notifications.

The Microsoft Push Notification Service. A custom service that you build using any platform that can

send HTTP requests, such as ASP.NET, Web API, WCF services, and WPF.

52



53



54



1. The client application opens a channel to the Microsoft Push Notification Service and receives a unique URI. This URI is used for all communications going forward.2. The URI is passed from the Client Application to the custom service.3. The custom service sends an HTTP Request to the unique URI. The body of the message is specific to the type of message you’re sending (i.e., toast, tile, or raw).4. Microsoft Push Notification Service pushes the notification to the device running the client application.

55


3. Contacts

3.1 Querying device contacts

3.2 Save a Contact

56



Single-contact choosers

using Microsoft.Phone.Tasks;

57



PhoneNumberChooserTask

private PhoneNumberChooserTask phoneNumberChooser;

phoneNumberChooser = new PhoneNumberChooserTask();phoneNumberChooser.Completed += phoneNumberChooser_Completed;

phoneNumberChooser.Show();

1. Declare PhoneNumberChooser :

2. New Instance & assign Completed delegate:

3. Call Show() method :

58



PhoneNumberChooserTask

void phoneNumberChooser_Completed(object sender, PhoneNumberResult e)

{ if (e.TaskResult != TaskResult.OK) return; phoneNumberDisplayNameTextBlock.Text = e.DisplayName; phoneNumberTextBlock.Text = e.PhoneNumber; makePhoneCallButton.IsEnabled = true; }

4. Process Completed function to get information from PhoneNumberResult :

59



EmailAddressChooserTask

private EmailAddressChooserTask emailAddressChooser;

emailAddressChooser = new EmailAddressChooserTask();emailAddressChooser.Completed +=

emailAddressChooser_Completed;

emailAddressChooser.Show();

1. Declare EmailAddressChooser :



60



EmailAddressChooserTask

void emailAddressChooser_Completed(object sender, EmailResult e)

{ if (e.TaskResult != TaskResult.OK) return; emailAddressDisplayNameTextBlock.Text = e.DisplayName; emailAddressTextBlock.Text = e.Email; sendEmailButton.IsEnabled = true; }

4. Process Completed function to get information from EmailResult :

61



AddressChooserTask

private AddressChooserTask addressChooser;

addressChooser = new AddressChooserTask();addressChooser.Completed += addressChooser_Completed;

addressChooser.Show();

1. Declare AddressChooser :



62



AddressChooserTask

4. Process Completed function to get information from AddressResult :

void addressChooser_Completed(object sender, AddressResult e)

{ if (e.TaskResult != TaskResult.OK) return; addressDisplayNameTextBlock.Text = e.DisplayName; addressTextBlock.Text = e.Address; mapItButton.IsEnabled = true; }

63



Make Call (ID_CAP_PHONEDIALER capability):

MapsTask mt = new MapsTask();mt.SearchTerm = addressTextBlock.Text;mt.Show();

Show Map:

EmailComposeTask emailCompose = new EmailComposeTask();emailCompose.To = emailAddressTextBlock.Text;emailCompose.Subject = "Subject here ";emailCompose.Body = "Hello from Windows Phone!";emailCompose.Show();

Send an Email:

PhoneCallTask pct = new PhoneCallTask();pct.PhoneNumber = “098….”;pct.Show();

64



Querying contacts programmatically

The single-contact Choosers are convenient for cases in which you simply need to retrieve an address, phone number, or email address for a single contact, But in many cases, you will select multiple contacts at once or perform query operations on the contacts database. The Microsoft.Phone.UserData namespace provides APIs to perform such query operations on the user’s existing contacts.

ID_CAP_CONTACTS capability

65




All contacts queries start the same way, with a new instance of the Contacts object and a call to its SearchAsync method:

Contacts contactsDb = new Contacts();

contactsDb.SearchCompleted += contactsDb_SearchCompleted;

contactsDb.SearchAsync (string.Empty, FilterKind.None, null);contactsDb.SearchAsync

(searchTermTextBox.Text, FilterKind.DisplayName, null);

66




void contactsDb_SearchCompleted(object sender, ContactsSearchEventArgs e) { if (e.State == null) { contactsListBox.ItemsSource = e.Results; return; } string citySearch = (string)e.State; var contactsInQueriedCity = from contact in e.Results from address in contact.Addresses where address.PhysicalAddress.City.ToUpper() == citySearch.ToUpper() select contact; contactsListBox.ItemsSource = contactsInQueriedCity; }

67


3.2 Save a Contact

ProblemYou want the users of your application to be able to create a new contact in contacts of their Microsoft account. SolutionUse the SaveContactTask in the Microsoft.Phone.Tasks namespace to configure and launch the new contact page of the built-in People application. How It WorksThe SaveContactTask falls under the Launcher category of tasks, ID_CAP_CONTACTS Capabilities

68


3.2 Save a Contact

private void btnAddContact_Click(object sender, EventArgs e) { SaveContactTask saveContact = new SaveContactTask(); saveContact.FirstName = firstNameTextBox.Text; saveContact.LastName = lastNameTextBox.Text; saveContact.Completed += SaveContactCompleted; saveContact.Show(); } void SaveContactCompleted(object sender, SaveContactResult e) { if (e.TaskResult == TaskResult.OK) { MessageBox.Show("Contact Added"); } else if (e.TaskResult == TaskResult.Cancel) { MessageBox.Show("Contact not added. You cancelled it."); } }

69


4. Calendar

The Microsoft.Phone.UserData namespace that provides APIs for querying the user’s address books also provides APIs for querying his calendar appointments.

SaveAppointmentTask

70


4. Calendar Project

71


4. Calendar MainPage.xaml

72


4. Calendar

private Popup appointmentPickerPopup= new Popup();

private void findAppointmentTimeButton_Click(object sender, RoutedEventArgs e) {

AppointmentMakerControl amc = new AppointmentMakerControl(); int meetingLength; switch (((ListPickerItem)appointmentLengthListPicker.SelectedItem).Name) { case "thirty": meetingLength = 30; break; case "sixty": meetingLength = 60; break; case "ninety": meetingLength = 90; break; case "onetwenty": meetingLength = 120; break; default: meetingLength = 30; break; }

73


4. Calendar

amc.FindTimeForAppointment(appointmentDatePicker.Value.Value.Date, ((ListPickerItem)timeOfDayPicker.SelectedItem).Name, meetingLength);

appointmentPickerPopup.Child = amc; appointmentPickerPopup.IsOpen = true;}

74


4. Calendar AppointmentMakerControl.xaml

75


4. Calendar

private void createAppointmentButton_Click(object sender, RoutedEventArgs e)

{ SaveAppointmentTask newAppointment = new SaveAppointmentTask(); newAppointment.StartTime = AvailableTime; newAppointment.Subject = appointmentSubjectTextBox.Text; newAppointment.Location = appointmentLocationTextBox.Text; newAppointment.EndTime = AvailableTime.AddMinutes(lengthOfAppointmentInMinutes);

newAppointment.Show(); }

using Microsoft.Phone.Tasks;

76


END

4 - working with the tiles, notifications, contacts and calendar (3t)

Documents