4 - Working With The Tiles, Notifications, Contacts and Calendar (3t)

DONG NAI UNIVERSITY OF TECHNOLOGY
1
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
Problem
You want to configure which tile shows up on the home screen
when the user pins your application.
Solution
Configure the Tile Template, Tile Title, and Tile Images
properties in the applications manifest file.
How It Works
The 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 its 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
Problem
You want a tile for the main home screen that is capable of
showing extra information.
Solution
Use the FlipTile as the default tile for your application.
How It Works
The 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 dont 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
BackBackgroun
dImage
BackBackground
ImageURI
The background image of the
back of the Tile.
BackContent BackContent The text to display on the back
of the Tile, above the title.
BackgroundIma
ge
BackgroundImag
eURI
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
PrimaryToken
Element
Description
Count Count This property is of type
Nullable<int> with a valid
range that is between 1 and
99.
SmallBackgrou
ndImage
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.
WideBackBack
groundImage
LargeBackBackg
roundImageURI
The back-side background
image for the wide Tile size
11
Property
Name
PrimaryToken
Element
Description
WideBackConte
nt
LargeBackConte
nt
The text that displays above
the title, on the back side of
the wide Tile size
WideBackgrou
ndImage
LargeBackgroun
dImageURI
The front-side background
image for the wide Tile size
Not Applicable DeviceLockImag
eURI
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 wont 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
Problem
Your application has information that is count-centric and you
want to best method of showing that count to the user.
Solution
Use the Iconic Tile as the default tile for your application.
How It Works
The 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 dont 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
PrimaryToken
Element
Description
BackgroundCo
lor
BackgroundColor The background color of the
Tile
Nullable<int> with a valid
range that is between 1 99
IconImage IconImageURI The icon image for the
medium and large Tile sizes.
SmallIconImag
e
SmallImageURI The icon image for the small
Tile size
19
Property
Name
PrimaryToken
Element
Description
wide tile sizes.
WideContent1 LargeContent1 The text that displays on the
first row of the wide Tile size.
second row of the wide Tile size
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 wont 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 WideCont
ent1
WideContent
2
WideContent3
Small NA NA NA NA
Medium 19 NA NA NA
Wide 39 33 3 33
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
Problem
You want to display several visual representations of your
applications content.
Solution
Use the Cycle Tile as the default Tile for your application.
How It Works
The 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 dont 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
PrimaryToken
Element
Description
Nullable<int> with a valid range
that is between 1 and 99.
SmallIconIm
age
SmallImageURI The icon image for the small Tile
size.
wide tile sizes.
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.
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
Problem
You want to be able to allow the user to use a lock screen
image provided by your application.
Solution
Create a lock screen image and register your application as a
lock screen background image provider.
How it Works
There 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 agents 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
MainPage coding
private 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
theyre 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, theyre 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
youre 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)
{
return;
emailAddressDisplayNameTextBlock.Text = e.DisplayName;
emailAddressTextBlock.Text = e.Email;
sendEmailButton.IsEnabled = true;
}
EmailResult :
61
AddressChooserTask
private AddressChooserTask addressChooser;
addressChooser = new AddressChooserTask();
addressChooser.Completed += addressChooser_Completed;
addressChooser.Show();
1. Declare AddressChooser :
62
AddressChooserTask
AddressResult :
void addressChooser_Completed
(object sender, AddressResult e)
{
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 users 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
Problem
You want the users of your application to be able to create a
new contact in contacts of their Microsoft account.
Solution
Use the SaveContactTask in the Microsoft.Phone.Tasks
namespace to configure and launch the new contact page of the
built-in People application.
How It Works
The 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 users 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;
END
76

4 - Working With The Tiles, Notifications, Contacts and Calendar (3t)

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

4 - Working With The Tiles, Notifications, Contacts and Calendar (3t)

Caricato da

Copyright:

Formati disponibili

DONG NAI UNIVERSITY OF TECHNOLOGY

Potrebbero piacerti anche