Windows phone 8 - Développement de base

Windows Phone 8
Patrick Grasseels
Développement Windows Phone 8 - Patrick Grasseels

Plan du cours
 Chapitre 1 : Introduction
 Chapitre 2 : Installation
 Chapitre 3 : L’interface utilisateur
 Chapitre 4 : Interface utilisateur avancée (Toolkit)
 Chapitre 5 : Tuiles et Notifications
 Chapitre 6 : Styles et animations
 Chapitre 7 : Stockage de données
 Chapitre 8 : Utilisations des composants téléphone

Introduction
Chapitre 1

Introduction
 Le monde du mobile
 Avec l’émergence des smartphones qui deviennent de plus
en plus des micro ordinateurs, Microsoft face à la
concurrence (Apple, Google, etc ) doit lui aussi s’adapter.
Il sort donc en 2011 Windows Phone 7, suivit en 2013 de
Windows Phone 8 et Windows Phone 8.1 en 2014.

Introduction
 iPhone OS : le concurrent numéro un pour Android. Il s’agit bien sûr du système présent sur
les différentes générations d’iPhone, produites par Apple mais également sur ses tablettes
iPad
 Windows Mobile : tout autant propriétaire, le système pour mobile proposé par Microsoft
est distribué sur de nombreux téléphones
 Symbian : récemment passé en open source, ce système d’exploitation est la propriété de
Nokia et est présent – entre autres – sur un grand nombre de téléphones de la firme
finlandaise
 BlackBerry OS : il est présent sur tout les téléphones de la marque RIM (Research In Motion)
 Android : sorti en 2005 il est le pion maitre chez Google dans le monde du mobile. C’est
également lui qui domine le marché des OS Mobile avec environ 70% de PDM.
 Windows Phone 8 : Le dernier sorti de chez Microsoft, il est l’amélioration de WP7 avec une
nouvelle interface Modern UI.

Parts de marché

Windows Phone
 Windows Phone est un système d'exploitation mobile
développé par Microsoft pour succéder à Windows Mobile, sa
précédente plateforme logicielle qui a été renommée pour
l'occasion en Windows Phone Classic1'2. Contrairement au
système qu'il remplace, Windows Phone est d'abord
principalement destiné au grand public plutôt qu'au marché
des entreprises3. Cependant depuis Windows Phone 8,
Microsoft propose des fonctions avancées4 pour les entreprises
en offrant, par exemple, un espace d'applications réservé aux
entreprises. Il a été lancé le 21 octobre 2010 en Europe,
à Singapour, en Australie et en Nouvelle-Zélande,
le8 novembre 2010 aux États-Unis et au Canada, puis
le 24 novembre 2010 au Mexique5.
*Wikipédia

Windows Phone Store
 Pour l’installation d’application il existe deux
possibilités : soit installer directement un .xap sur
son téléphone, soit explorer le store pour installer
les applications qui y sont exposé.
 Les applications présentes sur le store on subit
une batterie de test avant d’être approuvées et
disponible au public.
*Wikipédia
http://www.windowsphone.com/fr-be/store

Windows Phone 8 SDK
Pour développer nous aurons besoin de :
 Windows 8
 Visual Studio 2013
 SDK Windows Phone 8
 http://dev.windows.com/en-us/develop/download-phone-sdk

Installation
Chapitre 2

Installation
 Télécharger le SDK Windows Phone 8
 http://dev.windows.com/en-us/develop/download-phone-sdk
 Vérifier que l’Hyper-V est installé et activé.
 Sinon, aller dans panneau de configuration.
 Applications et fonctionnalités
 Activer Hyper-V
 Redémarrer
 Lancer l’installation
*Wikipédia

Crée un projet
 Fichier -> Nouveau -> Projet
 Sélectionner C#
 Applications du Windows Store
 Applications Windows Phone
 Application Vide (Silverlight)
*Wikipédia

L’interface utilisateur
Chapitre 3

L’interface utilisateur
 L’interface utilisateur se compose de différents
contrôles, chacun ayant ses propres spécificités.
 Il existe plusieurs type de contrôles utilisateur, certains
sont spécialement dédiés au placements d’éléments,
d’autre à la saisie utilisateur, ou encore aux interactions
ou listing.
 Les Grid, Stackpanel permettent par exemple
d’organiser les éléments sans avoir besoin de les placer
avec des margin et autres. L’avantage de ce type de
construction d’interface est quelle s’adapte facilement
lorsque l’ont change l’orientation ou même la
résolution.

Grid
 La Grid est un élément de placement, qui peut se découper en
colonne ou en ligne.
 L’avantage d’une grille permet également de définir un
DataContext sur une partie précise de l’interface.
<Grid ShowGridLines=true DataContext=‘’{Binding}’’>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=‘’*’’/>
<ColumnDefinition Width=‘’*’’/>
</Grid.ColumnDefinitions>
</Grid>
• ShowGridLines affichera des lignes fictives qui représentent la
découpe définie pour la grille.
• DataContext offre donc la possibilité de définir un DataContext
précis sur la grille qui se propagera aux éléments à l’intérieur.

Grid
• Grid.ColumnDefinitions & Grid.RowDefinitions vont permettre de découper la grille
en lignes et colonnes. En spécifiant soit la largeur, soit la hauteur. Les valeurs
possibles sont des nombres entiers, auto pour une dimension qui s’adapte au
contenu ou * pour une répartition égale entre les éléments.
<Grid x:Name="LayoutRoot" Background="Transparent" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid ShowGridLines="True">
<ColumnDefinition Width="*" />
</Grid>
<Grid Grid.Row="2" ShowGridLines="True">
<Grid Grid.Column="1" ShowGridLines="True">
</Grid>
</Grid>
</Grid>

Grid
• Exercice
1 :
• Exercice
2 :

StackPanel
 Le StackPanel est un élément de placement, il ajoute simplement
les éléments les un à la suite des autres horizontalement ou
verticalement.
 C’est un contrôle très utilise lorsqu’il est nécessaire d’empiler les
boutons, textbox etc …
<StackPanel Orientation="Horizontal">
<Button Content="1"></Button>
</StackPanel>
• DataContext offre comme pour la Grid de définir celui-ci uniquement
au StackPanel.
<StackPanel Orientation="Vertical">
</StackPanel>

TextBlock
 Le TextBlock est un des éléments les plus simple de l’interface utilisateur, il sert
donc à afficher du texte.
 Il est paramétrable pour accueillir tout type de texte, du mot seul au paragraphe
de plusieurs lignes
<TextBlock Text="Hello World !" />
<TextBlock Text="Hello World !" FontSize="40" />
<TextBlock Text="Hello World !" FontFamily="Arial"/>
<TextBlock Text="Hello World !" FontStyle="Italic"/>
<TextBlock Text="Hello World !" Foreground="Red"/>
</StackPanel>

TextBox
 La TextBox contrairement au TextBlock ne s’occupe pas d’afficher
du texte, mais bien de récupérer la saisie utilisateur.
 Sa principale utilisation est lorsqu’une interaction avec
l’utilisateur est demandée.
 Saisie de nom d’utilisateur
 Saisie de nom
 Saisie de prénom
 Saisie de message
<TextBox Foreground="Red" />
<TextBox FontSize="50"/>
<TextBox FontStyle="Italic"/>
</StackPanel>

PasswordBox
 Elle a la même utilité que la TextBox à l’exception près que celle-ci va cacher le
contenu qui se trouve à l’intérieur et le remplacer par un caractère de substitution
qu’il est possible de choisir soit même lors du développement
<PasswordBox Foreground="Red"/>
<PasswordBox Foreground="Red" PasswordChar="#"/>
<PasswordBox Foreground="Red" PasswordChar="O"/>
<PasswordBox Foreground="Red" PasswordChar="X" FontSize="80"/>
</StackPanel>

Button
 Le bouton est l’élément principal qui est utilisé par les utilisateurs
pour intéragir avec l’application. Un bouton peut signifier une
navigation entre page, une soumission de données, etc.
<Button Content="Button One" />
<Button Content="Button One" Foreground="Red" />
<Button Content="Button One" BorderBrush="Red" />
<Button Content="Button One" FontSize="38" />
<Button Content="Button One" Background="Red"/>
<Button Content="Button One" FontStyle="Italic"/>
<Button Content="Button One" FontWeight="Bold"/>
</StackPanel>

CheckBox
 La CheckBox permet de récupérer un changement d’état simplement, son résultat
est une booléen nullable.
<CheckBox Content="MyValue"/>
<CheckBox Content="MyValue" Foreground="Red"/>
<CheckBox Content="MyValue" BorderBrush="Red"/>
<CheckBox Content="MyValue" FontFamily="Comic Sans MS"/>
<CheckBox Content="MyValue" BorderBrush="Red" Foreground="Red"/>
<CheckBox Content="MyValue">
<CheckBox.RenderTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</CheckBox.RenderTransform>
</CheckBox>
</StackPanel>

Radio
 Pareil que pour la CheckBox, à l’exception que les radios peuvent être groupés
dans un seul et même groupe limité à un le nombre d’éléments pouvant être
cochés. L’attribut GroupName permet de rassembler des RadioButton entre eux.
<RadioButton GroupName="Options" Content="Option 1"/>
<RadioButton GroupName="Options" Content="Option 2" Foreground="Red"/>
<RadioButton GroupName="Options" Content="Option 3" BorderBrush="Red"/>
<RadioButton GroupName="Options" Content="Option 4" FontFamily="Comic Sans MS"/>
<RadioButton GroupName="Options" Content="Option 5" FontSize="60"/>
<RadioButton GroupName="Options" Content="Option 6">
<RadioButton.RenderTransform>
</RadioButton.RenderTransform>
</RadioButton>
</StackPanel>

LongListSelector
 Le LongListSelector est un contrôle qui permet d’afficher une liste d’éléments /
résultats.
<phone:LongListSelector ItemsSource="{Binding}" />
public partial class MainPage : PhoneApplicationPage
{
ObservableCollection<String> dc = new ObservableCollection<String>();
private const int MAXELEMENT = 105;
// Constructeur
public MainPage()
{
InitializeComponent();
for (int i = 0; i < MAXELEMENT; i++)
dc.Add("Item " + i);
this.DataContext = dc;
}
}

LongListSelector
 Dans le premier exemple, il était simplement question de lister une liste de String.
A présent nous allons redéfinir l’ItemTemplate afin d’afficher les informations d’un
utilisateur.
<phone:LongListSelector ItemsSource="{Binding}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Firstname}" />
<TextBlock Text="{Binding Lastname}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
{
ObservableCollection<User> dc = new ObservableCollection<User>();
private const int MAXELEMENT = 105;
public MainPage()
{
for (int i = 0; i < MAXELEMENT; i++)
dc.Add(new User()
{
Firstname = "FirstName " + i,
Lastname = "LastName " + i
});
this.DataContext = dc;
}
}
public class User
{
public string Firstname { get; set; }
public string Lastname { get; set; }
}

ProgressBar
 La ProgressBar permet d’afficher l’état d’avancement d’une opération en
cours. (envoi de fichiers, requête HTTP pour mise à jour de données
distantes, etc.)
 Ce type d’élément permet d’indiquer à l’utilisateur un avancement pour
éviter que celui-ci pense que l’application est figée ou aurait
potentiellement planté.
<ProgressBar Height="40" Value="20" />
<ProgressBar Height="40" Value="35" Background="Blue"/>
<ProgressBar Height="40" Value="40" Foreground="AliceBlue" />
<ProgressBar Height="40" Value="120" Maximum="200" />
<ProgressBar Height="40" Value="240" Minimum="200" Maximum="800"
/>
<ProgressBar Value="20" IsIndeterminate="True" >
<ProgressBar.RenderTransform>
</ProgressBar.RenderTransform>
</ProgressBar>
</StackPanel>

Slider
 Le slider permet d’ajuster une quantité de type numérique entre un
minimum et un maximum.
<StackPanel>
<Slider Minimum="0" Maximum="40"/>
<Slider Minimum="20" Maximum="200"/>
<Slider Minimum="20" Maximum="200" Foreground="Orange" />
</StackPanel>

HyperLink
 L’HyperLink a le même but que le TextBlock à l’exception près que celui-ci
va permettre d’y ajouter un lien vers une URL.
<StackPanel>
<HyperlinkButton Content="Google" TargetName="_blank" NavigateUri="http://google.fr" />
<HyperlinkButton Content="Microsoft" TargetName="_blank" NavigateUri="http://microsoft.com" Foreground="Red" <HyperlinkButton Content="Youtube" TargetName="_blank" NavigateUri="http://youtube.fr" FontSize="48"/>
<HyperlinkButton Content="Facebook" TargetName="_blank" NavigateUri="http://google.fr" FontWeight="Black"/>
</StackPanel>

Image
 Le contrôle Image a pour unique but d’afficher une image, rendant ainsi
un visuel plus riche pour l’expérience utilisateur.
<StackPanel>
<Image Source="/Assets/Tiles/FlipCycleTileLarge.png"/>
</StackPanel>

Map
 La Map est un contrôle un peu particulier, en effet celui-ci est une
intégration de la carte native du téléphone. Pour accéder à celle-ci il sera
nécessaire d’ajouter une permission dans le manifeste de l’application.
<Controls:Map />

Map
 Il faudra donc ajouter une permission dans le manifeste. Pour cela
 Double clique sur WMAppManifest.xml
 Ensuite onglet Capacités
 ID_CAP_MAP

WebBrowser
 Le WebBrowser permet d’ajouter dans une application un « mini »
navigateur web.
<Grid x:Name="LayoutRoot" Background="Transparent“>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<phone:WebBrowser IsGeolocationEnabled="True"
IsScriptEnabled="True" Source="http://google.fr" />
<Button Grid.Row="1" Content="Click Me !"/>
</Grid>

AdControl
 AdControl est un composant additionnel qui permet d’afficher des
publicités dans ces applications. Selon le nombre de vue / click une
certaine somme est rémunérée en fin de mois.
AdUnitId & ApplicationId
se récupèrent sur
PubCenter lorsqu’une
campagne publicitaire est
créée.

Exercice
 Construire les interfaces suivantes
 Ecran d’inscription
 Ecran de connexion
 Ecran de modification de profil avec photo
 Ecran d’option

interface utilisateur
Avancé
Chapitre 4

L’interface utilisateur avancé
Toolkit
 Malgré un Framework de base bien fourni, avec une
quantité de contrôle suffisante pour créer des
interfaces riches et interactives ce n’était pas suffisant
pour certains développeurs.
 Certains contrôles étaient absents de base :
 Combobox
 DateTimePicker
 AutoCompleteBox
 …
 Pour palier à ce manque il a été mis en place par une
équipe de développement indépendant de chez
Microsoft une Toolkit pour ajouter d’autres composants.
xmlns:toolkit="clr-namespace:
Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

ListPicker
 Le ListPicker ou ComboBox à pour rôle de proposer dans une liste déroulante une série de
propositions et de sélectionner celle que l’on souhaite. C’est le même principe que le ListBox
sauf qu’ici seul l’élément sélectionné est visible.
<toolkit:ListPicker ItemsSource="{Binding}" />

DatePicker
 Le DatePicker offre à l’utilisateur un visuel plus intuitif et plus simple pour l’encodage de date.
De plus le format étant locker il est impossible d’y introduire des données non conformes.
<StackPanel>
<toolkit:DatePicker />
<toolkit:DatePicker Foreground="Red"/>
<toolkit:DatePicker BorderBrush="Orange"/>
</StackPanel>

AutoCompleteBox
 L’ AutoCompleteBox va proposer des résultats selon les caractères qui auront été
précédemment introduit dans la box. La source doit être une liste de String, dans le cas où on
souhaite faire une recherche sur une liste d’Objet il suffira de redéfinir la méthode toString()
de l’objet en question.
<StackPanel>
<toolkit:AutoCompleteBox ItemsSource="{Binding}"
/>
</StackPanel>

Tuiles et notifications
Chapitre 5

Les Tuiles
 Les tuiles sont les raccourcis représentant notre application, elles sont
disponibles sur la page d’accueil ou dans la liste des applications
installées.
 Il existe plusieurs type de Tuile que ce soit en taille ou en animations.
 Il est également possible de créer plusieurs tuiles pour une même
application, mais qui auraient pour impact de lancer une page différente.
Il est également possible de passer des paramètres.
 FlipTile
 CycleTile
 IconicTile

FlipTile
 Les tuiles ne doivent pas être réalisées sans prendre en compte certains
paramètres notamment graphiques. En effet, les tuiles devront s’adapter
à 3 dimensions :
 Petite
 Normal
 Grande

FlipTile
 Une fois le contenu défini, il existe également des régles au niveau des
propriétés, notamment liées au padding, etc …

FlipTile

FlipTile
 Reste alors le code C# pour modifier la tuile de notre Application
FlipTileData TileData = new FlipTileData() {
Title = "[title]",
BackTitle = "[back of Tile title]",
BackContent = "[back of medium Tile size content]",
WideBackContent = "[back of wide Tile size content]",
Count = [count],
SmallBackgroundImage = [small Tile size URI],
BackgroundImage = [front of medium Tile size URI],
BackBackgroundImage = [back of medium Tile size URI],
WideBackgroundImage = [front of wide Tile size URI],
WideBackBackgroundImage = [back of wide Tile size URI]
};

CycleTile
 La CycleTile modifie son template entre 1 et 9 fois.

CycleTile
 La CycleTile se créer donc selon un template bien précis et légèrement
différent de la FlipTile.

CycleTile
CycleTileData cycleTile = new CycleTileData() {
Title = "Contoso",
Count = 10,
SmallBackgroundImage = new Uri("/Assets/Tiles/smallBackgroundImage.jpg", UriKind.Relative),
CycleImages = new Uri[] {
new Uri("/Assets/Tiles/cycleImage1.jpg", UriKind.Relative),
}
};

IconicTile
 L’ IconicTile ressemble fortement à la FlipTile à l’exception près qu'elle
affichera un contenu plus léger, mais également que son image sera
remplacée par un icone / pictogramme.

IconicTile
 L’ IconicTile a également son propre template de mise en forme.

IconicTile
IconicTileData TileData = new IconicTileData() {
Title = "[title]",
Count = [count],
WideContent1 = "[1st row of content]",
WideContent2 = "[2nd row of content]",
WideContent3 = "[3rd row of content]",
SmallIconImage = [small Tile size URI],
IconImage = [medium/wide Tile size URI],
BackgroundColor = [.NET color type of Tile]
};

Les Notifications
 Il existe deux type de notifications :
 Les local : Ce sont des notifications liées au téléphone lui-même, pour par exemple
modifier une tuile, envoyer une notification Toast, une alarme, etc … elles peuvent être
récurrentes ou non.
 Les push : Les notifications push ont la même utilité que les local, sauf que celles-ci
proviennent du cloud et avertissent donc l’application / utilisateur qu’il a par exemple
reçu un nouveau message.
 Les notifications locales se décomposent en 4 possiblités:
 Tiles
 Toasts / Background Agent
 Alarms
 Reminders

Les Notifications
 Les Tiles Notifications, vont permettre de notifier périodiquement
l’utilisateur en modifiant le contenu image de notre tuile.
 Ce sont des tâches récurrentes qui peuvent s’exécuter une ou plusieurs
fois. Les tâches peuvent également être paramétrées sur une durée
temporelle.
 Il est possible de les stopper et les relancer ultérieurement.
 La classe ShellTileSchedule permet de créer des Tiles Notifications.

Les Notifications
 Créer une Tile Notifications a utilisation unique.
{
public ShellTileSchedule sch = new ShellTileSchedule();
private void OneTime(object sender, System.Windows.Input.GestureEventArgs e)
{
sch.Recurrence = UpdateRecurrence.Onetime;
sch.StartTime = DateTime.Now;
sch.RemoteImageUri = new Uri("http://lorempixel.com/320/320/");
sch.Start();
}
}

Les Notifications
 Créer une Tile Notifications a utilisation indéfinie.
{
private void IndefiniteTime(object sender, System.Windows.Input.GestureEventArgs e)
{
sch.Recurrence = UpdateRecurrence.Interval;
sch.Interval = UpdateInterval.EveryHour;
sch.Start();
}
}

Les Notifications
 Créer une Tile Notifications à utilisation définie par un nombre
d’occurences.
{
private void CountTime(object sender, System.Windows.Input.GestureEventArgs e)
{
sch.Recurrence = UpdateRecurrence.Interval;
sch.Interval = UpdateInterval.EveryHour;
sch.MaxUpdateCount = 10;
sch.Start();
}
}

Les Notifications
 Arrêter une Tile Notifications.
{
private void StopTime(object sender, System.Windows.Input.GestureEventArgs e)
{
sch.Stop();
}
}

Les Notifications
 Les tâches d’arrière plan (Background Agent) permettent d’exécuter des
traitements en arrière plan, lorsque l’application n’est pas lancée.
 Il est nécessaire de lier une tâche à une application, c’est cette même
application qui sera chargée d’ajouter la tâche dans la pile des agents du
téléphone.
 Il existe deux types de tâches planifiées :
 Les tâches périodiques : ce sont des tâches qui seront exécutées par le téléphone environ
toutes les 20 minutes, mais sans avoir de délai exact. En effet, c’est selon les ressources
disponibles dans le téléphone que celles-ci sont exécutées.
 Les tâches à ressources intensives : ce sont des tâches qui nécessitent une consommation
de ressources supérieures. CPU / Batterie / Wifi …

Les Notifications
 Tout d’abord, il faut donc créer le BackgroundAgent.

Les Notifications
 Une fois le projet crée. La méthode OnInvoke contiendra la portion de
code qu’il sera nécessaire d’exécuter en arrière-plan.
public class ScheduledAgent : ScheduledTaskAgent
{
protected override void OnInvoke(ScheduledTask task)
{
NotifyComplete();
}
}

Les Notifications
 Exemple concret, dans la méthode OnInvoke à chaque exécution de la
tâche, l’image de la tuile sera modifier et une image aléatoire sera
récupérée.
{
{
ShellTile tuileParDefaut = ShellTile.ActiveTiles.First();
if (tuileParDefaut != null)
{
FlipTileData flipTileData = new FlipTileData
{
BackContent = "Dernière MAJ " + DateTime.Now.ToShortTimeString(),
Count = new Random().Next(0, 20),
BackgroundImage = new Uri("http://lorempixel.com/320/320/")
};
tuileParDefaut.Update(flipTileData);
}
NotifyComplete();
}
}

Les Notifications
 Une fois la tâche paramétrée, il reste à l’enregistrer sur le système, pour
cela nous aurons besoin de notre application principale
{
private const string TaskName = “BackgroundTask";
// Constructeur
public MainPage()
{
PeriodicTask task = new PeriodicTask(TaskName);
if (ScheduledActionService.Find(TaskName) != null)
ScheduledActionService.Remove(TaskName);
task.Description = "My Task";
try
{
ScheduledActionService.Add(task);
ScheduledActionService.LaunchForTest(TaskName, new TimeSpan(0, 0, 1));
}
catch (InvalidOperationException e)
{
MessageBox.Show("Impossible d'ajouter la tâche périodique, car il y a déjà trop d'agents dans le téléphone");
}
}
}

Les Notifications
 Un autre type de notifications, les Toasts sont tout simplement des
notifications qui apparaissent en haut de l’écran. Si l’utilisateur décide
d’appuyer dessus, celui-ci est rediriger vers une page de l’application qui
à lancer la notification. Une notification Toast se lance depuis une tâche
d’arrière plan.
{
{
ShellToast toast = new ShellToast
{
Title = " Ceci est une notification Toast",
NavigationUri = new Uri("/MainPage.xaml?dateinfo=" + DateTime.Now.ToShortTimeString(),
UriKind.Relative),
Content = "Il est " + DateTime.Now.ToShortTimeString()
};
toast.Show();
NotifyComplete();
}
}

Les Notifications
 Les Alarmes permettent d’enregistrer dans le system un rappel. Une
alarme se paramètre selon une date et une heure, mais également avec
une récurrence et une date d’expiration. Il est également possible
d’utiliser un son personnalisée qui sera joué au moments de déclencher
l’alarme.
Alarm alarm = new Alarm(’’Mon Alarme’’);
alarm.BeginTime = DateTime.Now;
ScheduledActionService.Add(alarm);

Les Notifications
 Les Reminders ressemblent fortement aux Alarms, sauf que ceux-ci on un
paramètre supplémentaire qui permet lorsque l’ont click sur l’alerte sur
le téléphone de lancer l’application liée au Reminder.
Reminder reminder = new Reminder(ReminderName.Text)
{
BeginTime = BeginTime,
Content = ‘’My Reminder’’,
RecurrenceType = RecurrenceInterval.Daily
};
ScheduledActionService.Add(reminder);

Style et animations
Chapitre 6

Style et animations
 Lors du développement d’une application, il est souvent nécessaire
d’adapter le style de base des contrôles utilisateurs a celui de la charte
graphique de l’entreprise et/ou projet pour lequel on développe.
 Comme vu précédemment, il est très simple de modifier la couleur de
fond, la couleur d’écriture, etc. d’un contrôle. Cependant, dans une
application complète, il est nécessaire de structurer les changements et
de les centraliser.
 Ainsi, si un jour la couleur de base change et passe de vert à bleu, il n’y
aura qu’une seule valeur à changer.
 Les animations permettent de donner vie à l’interface, en offrant à
l’utilisateur une expérience plus intéressante et plus interactive.

Style
 Dans un premier temps, nous allons centraliser les ressources dans le
fichier XAML de la vue. Les ressources seront donc locales à notre page.
<phone:PhoneApplicationPag.Resources >

</phone:PhoneApplicationPage.Resources >

Style
 Il existe plusieurs moyens de styliser soit avec des propriétés simples
qu’on appliquent à chaque contrôle.
 Soit avec des styles qui s’appliquent à tout contrôle de ce type. Ce qui
permet d’harmoniser son interface.
<SolidColorBrush x:Name=‘’BackgroundColor’’
Color=‘’Red’’ />
Ici, nous définissons simple
une brush qui auras la
couleur rouge, ensuite nous
allons l’applique à notre
élément.
<Button Background=‘’{StaticResource BackgroundColor}’’ Content=‘’Mon Bouton Rouge’’/>
<TextBlock Background=‘’{StaticResource BackgroundColor}’’ Text=‘’Mon Contenu Rouge’’/>

Style
<Style x:Key=‘’MyButtonStyle’’ TargetType=‘’Button’’>
<Setter Property=‘’Background’’ Value=‘’Red’’/>
<Setter Property=‘Foreground’’ Value=‘’Green’’/>
</Style>
Ici, nous définissons un
style qui s’appliquera à tout
les boutons dont nous
aurons défini la clé comme
style.
<Button Style=‘’{StaticResource MyButtonStyle}’’ Content=‘’Mon Bouton Rouge Et Vert’’/>

Animation
 Les animations permettent d’ajouter de la vie dans les interfaces et
également d’enrichir l’expérience utilisateur.
 Il faut cependant faire attention à ne pas abuser de ces animations, en
effet l’une ou l’autre interaction peut être suffisante, tenter d’animer
chaque élément rendrait l’utilisation lourde et longue pour l’utilisateur.
 Il est possible d’appliquer plusieurs type d’animations, qui sont des
simples (changement d’une propriété (couleurs, etc.)) à d’autres plus
complexes (changement de position, transformation, scale, rotation etc.)
 Chaque animation se trouve dans un Storyboard qui permet de paramètrer
facilement une animation.
 Les storyboards se trouvent en temps que ressources dans un panel, une
grid ou même la page.
<Storyboard x:Name=‘’MyAnimation’’>
<!– Animation -->
</Storyboard>

Animation
 Il existe 3 types d’animations :
 ColorAnimation : Le type d’animation le plus basique, il permet d’animer une propriété en
modifiant sa valeur entre deux valeurs cibles grâce à une interpolation linéaire. Cela
fonctionne sur les propriétés qui acceptent System.Windows.Media.Color comme type de
paramètres.
(Foreground, Background, etc .)
<ColorAnimation From=’’Red’’ To=‘’Blue’’ Duration=‘’0:0:1’’ Storyboard.TargetName=‘’Brush’’
Storyboard.TargetProperty=‘’Color’’ />
 DoubleAnimation : Il permet d’animer toujours avec une interpolation linéaire, une
propriété mais cette fois-ci qui accepte comme type des valeurs numériques. (Opacity,
Width, etc.)
<DoubleAnimation From=’’0’’ To=‘’1’’ Duration=‘’0:0:1’’ Storyboard.TargetName=‘’MyButton’’
Storyboard.TargetProperty=‘’Opacity’’ />
 PointAnimation : Toujours à l’aide d’une interpolation linéaire, on peut cette fois-ci
<PointAnimation Storyboard.TargetProperty="Center’’ Storyboard.TargetName="MyAnimatedEllipseGeometry"
animer une propriété qui prendra comme paramètre un type System.Windows.Point et
Duration="0:0:0.1" From="100,300" AutoReverse="True" To="400,100" RepeatBehavior="Forever" />
Développemdeontn Wcin mdowosd Pihfoineer 8 l-aP aptriocks iGtriaossnee ldse notre élément.

Stockage de données
Chapitre 7

Introduction
 Lors du développement d’une application, il sera nécessaire de stocker
des données.
 Il existe plusieurs façons de stockage :
 Les fichiers
 Les base de données
 Les flux distants

Les fichiers
 Les fichiers sont les éléments les plus simples pour le stockage
d’informations
 Pour garder une structure et ainsi restaurer les données facilement, il est
préférable d’utiliser du XML
 Grâce à LinqToXML il est donc simple de faire des requêtes sur ces fichiers
depuis un Windows Phone

Les fichiers
 Pour stocker les fichiers XML il sera nécessaire de faire appel au
composant IsolatedStorageFile
(*) http://msdn.microsoft.com/fr-fr/
library/windows/apps/windows.storage.aspx

Les fichiers
IsolatedStorageFile représente une zone de stockage isolée contenant des
fichiers et des répertoires. Certaines méthodes seront donc nécessaires pour
travailler sur les fichiers. Mais également d’un StreamWriter pour écrire le
contenu. Et des méthodes LinqToXML.
• IsolatedStorageFile
• CreateDirectory
• CreateFile
• DeleteDirectory
• DeleteFile
• DirectoryExists
• FileExists
• MoveDirectory
• MoveFile
• OpenFile
• GetUserStoreForApplicatio
n
• StreamWriter • XDocument
• XDeclaration
• XELement

Les fichiers
Pour pouvoir utiliser les IsolatedStorageFile il est nécessaire de récupérer ceci:
IsolatedStorageFile ISF =
IsolatedStorageFile.GetUserStoreForApplication()
L’appel de GetUserStoreForApplication sur IsolatedStorageFile va nous
renvoyer un objet qui correspond à la zone de stockage autorisée pour
l’application. (Obtenu grâce au code de l’application – ApplicationId)
Une fois cet objet récupéré il sera donc possible d’effectuer des opérations
sur les fichiers dans l’IsolatedStorageFile, avec la liste des méthodes
évoquées au slide précédent.

Les fichiers
Une fois récupérée nous allons l’utiliser pour instancier un StreamWriter pour
écrire le fichier XML.
StreamWriter s = new StreamWriter(ISF.CreateFile("ISO.xml"))
Le constructeur de StreamWriter attend un Stream en paramètre, celui-ci lui
sera donc fourni par la méthode CreateFile(‘’FileName’’) de
l’IsolatedStorageFile instancié juste avant.
La méthode OpenFile retourne également un flux de type Stream, dans le
cas où nous souhaitons ré-ouvrir un fichier déjà existant.

Les fichiers
Ecrire simplement dans un fichier XML qui n’existe pas encore
// Instanciation d'un IsolatedStorageFile dans un using pour disposer les ressources une fois finis
using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())
{
// Instanciation d'un StreamWriter dans un using pour disposer les ressources une fois finis, on récupére le flux IsolatedStorageFileStream grace à la méthode CreateFile
// sur notre IsolatedStorageFile instancié juste avant
using (StreamWriter s = new StreamWriter(ISF.CreateFile("ISO.xml")))
{
// On crée une document XML valide
XDocument doc = new XDocument(
new XDeclaration("1.0", "UTF-8", null),
new XElement("Contacts",
new XElement("Contact", "Thierry Morre"),
new XElement("Contact", "Caroline herssens"),
new XElement("Contact", "Jonathan Hibben"),
new XElement("Contact", "Dominic Collart"),
new XElement("Contact", "Stéphane Faulkner")
)
);
// On sauve grace au flux le document crée au préalable
doc.Save(s);
}
// Dispose du StreamWriter
}
// Dispose du IsolatedStorageFile
Solution :
IsolatedStorageFile

Les fichiers
Pour lire dans un fichier XML, la procédure de départ reste la même, seul le
reader change
StreamReader s = new StreamReader(ISF.OpenFile("ISO.xml“,
FileMode.Open))
Le constructeur de StreamReader attend un Stream en paramètre, celui-ci
lui sera donc fourni par la méthode OpenFile(‘’FileName’’, OpenMode) de
l’IsolatedStorageFile instancié juste avant.
Par précaution, il est préfèrable de vérifier si le fichier existe avant même
d’essayer de le lire, la méthode FileExists(‘’FileName’’) de
l’IsolatedStorageFile permet de le faire simplement.
if (ISF.FileExists("ISO.xml"))
{
// Mon fichier existe
}

Les fichiers
Lecture simplement dans un fichier XML
// Instanciation d'un IsolatedStorageFile dans un using pour disposer les ressources une fois finis
using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())
{
// On vérifie que le fichier existe, dans le cas contraire il est impossible de le lire
if (ISF.FileExists("ISO.xml"))
{
// Instanciation d'un StreamReader cette fois-ci, avec OpenFile
using (StreamReader s = new StreamReader(ISF.OpenFile("ISO.xml", FileMode.Open)))
{
// Chargement du document XML
XDocument doc = XDocument.Load(s);
}
// Dispose du StreamReader
}
}
// Dispose du IsolatedStorageFile
Solution :
IsolatedStorageFile

Les fichiers
Exemple : Nous souhaitons sauver la liste des contacts d’une personne. Chaque
contact aura comme propriétés celles-ci :
Contact :
• String Username
• String FirstName
• String LastName
• DateTime BirthDate
• String PhoneNumber
• String Email
public class Contact{
public String Username { get; set; }
public String FirstName { get; set; }
public String LastName { get; set; }
public DateTime BirthDate { get; set; }
public String PhoneNumber { get; set; }
public String Email { get; set; }
}

Les bases de données
 Les bases de données permettent de stocker des informations de manière
structurée
 On peut facilement créer des relations entre les éléments
 Grâce à LinqToSql Runtime & LinqToObject on peut aisément lier des
objets au databinding

 Pour générer une base de données, on utilise la notion de CodeFirst.
 On lie ensuite nos classes à un DataContext, celui-ci s’occupera de créer
les tables, mais également d’effectuer les requêtes nécessaires sur la
base de données.

 Créer un DataContext est donc la première étape pour interroger une base
de données interne.
 Notre classe hérite donc du DataContext fourni par le framework.
public class MonContext : DataContext

 Une fois que nous avons crée une classe qui devient donc notre
DataContext, nous allons le lier à une source de données
public class MonContext : DataContext {
public static string DBConnectionString = "Data Source=isostore:/MaBD.sdf";
public MonContext(string connectionString) : base(connectionString) { }
}

 Une fois le DataContext crée, nous allons dans notre constructeur rajouter
une vérification pour qu’au premier chargement, si la base de données
n’existe pas, il puisse la créer.
 Pour cela, nous allons faire appel à deux méthode de notre DataContext.
• DataContext
• DatabaseExists
• CreateDatabas
e

 DatabaseExists() va vérifier si la base de données est présente et renvoit
une booléen.
 CreateDatabase va se servir des informations de mapping fournies pour
générer la base de données. (vide)
public ContactContext(string ConnectionString)
: base(ConnectionString)
{
if (!DatabaseExists())
{
CreateDatabase();
}
}

 Une fois le DataContext correctement configuré, il reste donc une chose à
effectuer, mapper nos tables grâce aux attributs pour quelles puissent
être générer par notre DataContext.
 Pour mieux comprendre, nous allons reprendre la classe Contact créée
précédemment pour l’exemple en XML.

 Les principaux attributs sont les suivants :
[Table]
Désigne une entité qui sera liée à une table dans la base de données.
Table n’a qu’un seul paramètre disponible, c’est Name qui permet
donc de choisir le nom de la table, si celui-ci n’est pas spécifié le
system prendra le nom de l’entité pour nommer la table de la même
façon.
[Column]
Permet de mapper les propriétés que l’ont désire dans la table, celui-ci
accepte plusieurs paramètres nommés. Ceux-ci sont expliqués dans le
slide suivant.

 Les paramètres de Column
[Column]
• IsPrimaryKey : Permet de déterminer si la propriété est une clé
primaire.
• IsDbGenerated : Défini si la colonne est auto-générée.
• CanBeNull : Défini si la colonne peut contenir une valeur null.
• DbType : Permet de définir le type de la colonne.
• Expression : Permet de créer une colonne composée.
• IsVersion : Si la colonne est générée en temps que Timestamp pour
la mise à jour.
• AutoSync : Défini de quelle façon la valeur est récupérée après une
Insert ou un Update.
• Name : Permet de choisir le nom de la colonne.
• Storage : Permet de lier la colonne a un attribut privé de l’entité.
http://msdn.microsoft.com/en-us/
library/system.data.linq.mapping.columnattribute_properties(v=vs.110).aspx

 Voici donc la classe de base sans Attribut
}

 Voici donc la classe de base avec Attribut
[Table]
[Column(IsPrimaryKey = true, IsDbGenerated = true, DbType = "INT NOT NULL Identity", CanBeNull = false)]
[Column(CanBeNull = false)]
[Column(DbType = "NVARCHAR(MAX)", CanBeNull = false)]
[Column(DbType = "NVARCHAR(MAX)", CanBeNull = false)]
}

Les flux distants
 Les flux distants, (XML, JSON) sont une autre manière d’obtenir
l’information.
 Ils permettent d’avoir des données partagées ou qui sont mises à jour
régulièrement depuis l’extérieur.
 L’exemple le plus utilisé est celui des API qui renvois pour la plus part du
JSON.

Les flux distants
 La manière la plus simple est donc d’interroger une URL qui se chargera
de renvoyer du JSON ou du XML.
 Si le retour est de type XML, LinqToXML est adapté pour traiter le flux
reçu. Dans le cas d’un retour JSON, le plus simple et le plus performant
est d’utiliser la librairie JSON.Net de NewtonSoft. Cette dernière permet
de désérializer un flux JSON sous forme d’Objet.

Les flux distants
 Pour interroger une URL, il sera nécessaire d’utiliser la classe HttpClient
 L’installation se fera simplement grâce aux packages Nuge

Les flux distants
 Pour envoyer une requête, il est nécessaire de lui passer des paramètres.
Il faudra donc créer une liste de paramètres de type clé / valeur.
 La méthode la plus simple est de faire appel à une liste de type
KeyValuePair<TKey,TValue>
List<KeyValuePair<string, string>>values = new List<KeyValuePair<string,
string>>
{
new KeyValuePair<string, string>("Username", "Toto"),
new KeyValuePair<string, string>("Password", "Titi")
};

Les flux distants
 Une fois les paramètres crées, nous allons instancier un objet de type
HttpClient, lui passer l’URL et les paramètres.
 Pour tester, nous allons envoyer nos requêtes sur Requestb.in

Utilisations des
composants téléphone
Chapitre 8

Introduction
 Les téléphones sont pourvus de fonctionnalités propres, comme l’Appareil
Photo, le GPS, l’accélèrométre, etc …

Le GPS
 Le GPS permet donc de se localiser en récupérant les coordonnées
géographiques.
 Altitude, Longitude, Latitude.
 Il existe plusieurs type de détection de la position, celle par défaut ou
celle avec une acuité accrue.

Le GPS
 Pour utiliser le GPS c’est un Object de type Geolocator qui est nécessaire
Event
• PositionChanged
• StatusChanged
Methods
• GetGeopositionAsync
• GetGeopositionAsync(TimeSpan,TimeSpa
n)
Properties
• DesiredAccuracy
• DesiredAccuracyInMeters
• LocationStatus
• MovementThreshold
• ReportInterval

Le GPS
 Les événements permettent d’attacher ces méthodes à l’objet Geolocator
• PositionChanged
• Se déclenche quand la propriété est mise à jour. (Déplacement)
• StatusChanged
• Se déclenche quand la fonctionnalité de géolocalisation change d’état.
(Actif/inactif)

Le GPS
 Les méthodes permettent d’appeler directement les fonctionnalités de
l’objet Geolocator
• GetGeopositionAsync
• Lance une opération asynchrone pour tenter de récupérée la position
actuelle du téléphone / device.
• GetGeopositionAsync(TimeSpan,TimeSpan)
• Lance une opération asynchrone pour tenter de récupérée la position
actuelle du téléphone / device.
• Le premier paramètre permet de spécifier un age maximum à la
position, en effet la dernière position peut-être stocker en cache et
réutilisé si le GPS échoue pour se rélocaliser.
• Le second est un Timeout sur la récupération.

Le GPS
 Les propriétés permettent de configurer l’objet Geolocator
Properties
• DesiredAccuracy
• Permet de définir la précision avec laquelle la position sera récupérée.
• DesiredAccuracyInMeters
• Permet de définir la précision en métre avec laquelle la position sera
récupérée.
• LocationStatus
• Permet de récupérée si la Geolocalisation est activée ou non sur le
téléphone.
• MovementThreshold
• Configure la distance en mètre depuis la dernière position et lance
l’évenement PositionChanged.
• ReportInterval
• Configure le temps minimale entre deux mise à jour de la position du
téléphone.

Le GPS
 Utiliser le GPS :
Geolocator geo = new Geolocator();
geo.MovementThreshold = 10;
geo.StatusChanged += statusChanged;
geo.PositionChanged += positionChanged;
private void positionChanged(Geolocator sender, PositionChangedEventArgs
args)
{
double Latitude = args.Position.Coordinate.Latitude;
…
}

Windows phone 8 - Développement de base

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Windows phone 8 - Développement de base

Ähnlich wie Windows phone 8 - Développement de base (20)

Windows phone 8 - Développement de base