Patrick Payet

Developpement Windows Phone - partie 27

papayet — Tue, 06 Sep 2011 13:27:00 GMT

Développer avec l’appareil photo de Windows Phone

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Développer avec l’appareil photo de Windows Phone

Silverlight pour Windows Phone comprend plusieurs outils faciles à utiliser pour l’exploitation de la caméra et des photos. Ici, nous allons montrer comment prendre et enregistrer des photos avec l'appareil photo du Windows Phone, sélectionner et afficher des photos depuis la bibliothèque d’images de Windows Phone.

Cet article est divisé en plusieurs sections :

Créer une interface utilisateur pour la caméra et l’affichage des photos
Prendre, Sélectionner et Afficher des images
Sauvegarde des images dans la bibliothèque d’images

Télécharger le code source complet de ce tutoriel.

Créer une interface utilisateur pour l’appareil photo et l’affichage des images

Lancez Visual Studio et commencez un projet de type "Silverlight pour Windows Phone". Puis créez une interface utilisateur (UI) qui comporte les éléments suivants:

Deux champs TextBlock - un avec un nom significatif qui permettra d'afficher des messages d'état, et un TextBlock qui affiche simplement: «Débranchez votre téléphone à partir du logiciel Zune pour le faire fonctionner"
Un objet Image avec un nom significatif qui aura sa source dynamiquement mise à jour pour refléter la nouvelle image qui a été prise ou choisie.
Trois boutons avec des noms significatifs qui seront utilisés pour prendre une nouvelle photo, afficher une photo existante, et enregistrer la photo affichée dans l’espace de stockage du téléphone. Dans cet article, ces boutons seront respectivement appelés takePhotoButton, choosePhotoButton, et savePhotoButton.

Une disposition de ces éléments est fournie ci-dessous.

XAML

Code Snippet
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Button Content="Take Photo" Height="72" HorizontalAlignment="Left" Margin="12,6,0,0" Name="button1" VerticalAlignment="Top" Width="189" Click="button1_Click" />
    <Image Height="308" HorizontalAlignment="Left" Margin="27,275,0,0" Name="myImage" Stretch="Fill" VerticalAlignment="Top" Width="406"/>
    <Button Content="Choose Existing" Height="72" HorizontalAlignment="Left" Margin="194,6,0,0" Name="button2" VerticalAlignment="Top" Width="239" Click="button2_Click" />
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="27,162,0,0" Name="textBlock1" Text="Disconnect phone from Zune software to run!" VerticalAlignment="Top" Width="406" />
    <Button Content="Save Current Photo to Library" Height="72" HorizontalAlignment="Left" Margin="12,84,0,0" Name="savePhotoButton" VerticalAlignment="Top" Width="419" IsEnabled="False" Click="savePhotoButton_Click" />
    <TextBlock Height="71" HorizontalAlignment="Left" Margin="29,197,0,0" Name="statusText" Text="" VerticalAlignment="Top" Width="402" Foreground="Red" TextWrapping="Wrap" />
Grid>

En tant que dernière étape avant de coder, ajoutez la référence Microsoft.Xna.Framework. Nous allons utiliser l'espace de noms Microsoft.Xna.Framework.Media de cet assembly pour enregistrer des images à la bibliothèque de média du téléphone, et il doit être référencé par votre projet avant que l'un de ses types, événements ou méthodes puisse l’utiliser dans votre application.

Pour ajouter l’espace de nom Microsoft.Xna.Framework à votre application:

1. Dans le Solution Explorer, cliquez-droit sur References, puis sélectionnez Add Reference.

2. Sélectionnez Microsoft.Xna.Framework dans la liste, puis cliquez sur OK.

Prendre, sélectionner, et afficher des images

Dans le Solution Explorer, ouvrez le fichier MainPage.xaml.cs, et ajoutez les lignes de codes suivantes en haut de la page, laisser les références existantes (par défaut) en place.

Code Snippet
using Microsoft.Phone.Tasks;
using System.Windows.Media.Imaging;
using System.IO;
using System.IO.IsolatedStorage;
using Microsoft.Xna.Framework.Media;

Visual Basic

Code Snippet
Imports Microsoft.Phone.Tasks
Imports System.Windows.Media.Imaging
Imports System.IO
Imports System.IO.IsolatedStorage
Imports Microsoft.Xna.Framework.Media

Cela permet à votre code d'accéder aux espaces de noms nécessaires pour ouvrir l'application appareil photo du téléphone pour prendre une photo, utiliser un objet Bitmap réinscriptible pour stocker les données d'une image temporaire, utiliser un flux de mémoire pour convertir l'image en un fichier, sauvegarder une photo dans le l’espace de stockage interne du téléphone, et déplacer une image à partir de l’Isolated Storage du téléphone à la bibliothèque médias du téléphone.

Pour la sélection de photos et l'utilisation de la caméra, il nous faudra une coordination entre plusieurs méthodes, nous allons donc ajouter quelques membres de données à la classe principale. Deux d'entre elles seront des objets Chooser, qui permettent aux applications de décharger le contrôle à la fonctionnalité native du système d'exploitation du téléphone afin de faciliter les choses comme le choix d'un contact à partir d'une liste, de prendre une photo, ou de sélectionner une photo depuis la pellicule photo de l’appareil photo du téléphone. Un autre objet sera une image bitmap que nous utilisons pour stocker les informations de l’image temporaire, à savoir, les images que nous avons choisies, soit de la pellicule ou simplement prises avec l'appareil lui-même

Code Snippet
public partial class MainPage : PhoneApplicationPage
        {
            // Declare the CameraCaptureTask object with page scope.
            CameraCaptureTask cameraCaptureTask;
            PhotoChooserTask photoChooserTask;
            BitmapImage bmp;
 
            ...

Visual Basic

Code Snippet
Partial Public Class MainPage
        Inherits PhoneApplicationPage
        ' Declare the CameraCaptureTask object with page scope.
        Private cameraCaptureTask As CameraCaptureTask
        Private photoChooserTask As PhotoChooserTask
        Private bmp As BitmapImage
        ...

cameraCaptureTask et photoChooserTask auront besoin d'avoir des gestionnaires d'événements câblés qui se déclencheront quand une photo sera prise ou choisie dans la bibliothèque d'images du téléphone. Cela signifie que les deux événements suivants doivent être gérés:

1. L’événement Completed de cameraCaptureTask.

2. L’événement Completed de photoChooserTask

Dans les deux cas, nous voulons juste afficher l'image à l'écran, et parce que les évènements Completed envoient le même type d'objet (un objet PhotoResult) à leurs gestionnaires , nous allons utiliser une seule méthode pour gérer ces deux évènements. Nous appellerons cette méthode photoCaptureOrSelectionCompleted, et elle prendra une photo qui a été soit prise par la caméra ou sélectionnée à partir de la bibliothèque d'images, et l’affichera sur l'écran. Le câblage des deux évènements à cette nouvelle méthode est fait dans la fonction startup, MainPage, résultant ce qui suit:

Code Snippet
public MainPage()
            {
                InitializeComponent();
                // Initialize the Chooser objects and assign the handlers for their "Completed" events
                cameraCaptureTask = new CameraCaptureTask();
                cameraCaptureTask.Completed += new EventHandler<PhotoResult>(photoCaptureOrSelectionCompleted);
                photoChooserTask = new PhotoChooserTask();
                photoChooserTask.Completed += new EventHandler
            }

Visual Basic

Code Snippet
Partial Public Class MainPage
        Inherits PhoneApplicationPage
        ' Declare the CameraCaptureTask object with page scope.
        Private cameraCaptureTask As CameraCaptureTask
        Private photoChooserTask As PhotoChooserTask
        Private bmp As BitmapImage
    End Class

Plus tôt, lors de la création de l'interface utilisateur, nous avons ajouté une image à l'écran appelée myImage, mais nous n'avions pas fixé sa source, laissant donc le champ vide. Quand l’évènement photoCaptureOrSelectionCompleted est déclenché, nous savons que l'utilisateur a pris ou sélectionné une image, il est donc temps de définir la Source de myImage à cette image, puis redimensionner celle-ci afin qu'elle s'adapte à la zone d'affichage de myImage. Nous allons également mettre à jour le statut du texte du TextBlock si nécessaire. Enfin, nous allons activer le bouton qui permet à l'utilisateur d'enregistrer l'image affichée.

La propriété Stretch de l’objet Image détermine la façon dont l'image sera dimensionnée pour s'adapter aux dimensions de myImage, nous utilisons ici Stretch.Uniform pour préserver le ratio original de l’image.

Ainsi, nous avons la possibilité de sauvegarder plus tard cette image si l'utilisateur le souhaite, nous allons utiliser le bitmap que nous avons créé plus tôt, appelé bmp, pour recevoir les nouvelles données de l’image, puis l’affecter en tant que source de myImage afin qu'il s’affiche sur l'écran. (Dans une autre méthode que nous mettrons en œuvre plus tard, le contenu de bmp pourra être sauvegardé sur l’espace de stockage interne du téléphone) La méthode finale photoCaptureOrSelectionCompleted ressemble à ceci:

Code Snippet
void photoCaptureOrSelectionCompleted(object sender, PhotoResult e)
        {
            if (e.TaskResult == TaskResult.OK)
            {
                bmp = new BitmapImage();
                bmp.SetSource(e.ChosenPhoto);
                myImage.Source = bmp;
                myImage.Stretch = Stretch.Uniform;
                // swap UI element states
                savePhotoButton.IsEnabled = true;
                statusText.Text = "";
            }
            else
            {
                savePhotoButton.IsEnabled = false;
                statusText.Text = "Task Result Error: " + e.TaskResult.ToString();
            }
        }

Visual Basic

Code Snippet
Private Sub photoCaptureOrSelectionCompleted(sender As Object, e As PhotoResult)
    If e.TaskResult = TaskResult.OK Then
        bmp = New BitmapImage()
        bmp.SetSource(e.ChosenPhoto)
        myImage.Source = bmp
        myImage.Stretch = Stretch.Uniform
        ' swap UI element states
        savePhotoButton.IsEnabled = True
        statusText.Text = ""
    Else
        savePhotoButton.IsEnabled = False
        statusText.Text = "Task Result Error: " & e.TaskResult.ToString()
    End If
End Sub

Maintenant nous câblons les boutons que nous avons placés dans l'interface utilisateur pour lancer un Chooser qui prendra ou sélectionnera une image. Retournez au Designer de l’interface utilisateur et double-cliquez sur le bouton «Take Photo ». Cela va créer une fonction de gestionnaire d’évènement vide qui se déclenchera lorsque le bouton sera cliqué. Notre bouton est nommé takePhotoButton, et il ne nécessite qu'une seule ligne de code pour lancer le Chooser. L'évènement Completed se déclenchera lorsque la photo sera prise. Le résultat est une fonction très simple nommée takePhotoButton_Click:

Code Snippet
// The camera Chooser is shown in response to a button click.
private void takePhotoButton_Click(object sender, RoutedEventArgs e)
{
    cameraCaptureTask.Show();
}

Visual Basic

Code Snippet
' The camera Chooser is shown in response to a button click.
Private Sub takePhotoButton_Click(sender As Object, e As RoutedEventArgs)
    cameraCaptureTask.Show()
End Sub

Maintenant, double-cliquez sur le bouton «Choose Existing» que nous avons nommé choosePhotoButton. Une fois encore, une seule ligne de code est nécessaire pour lancer le Chooser qui sélectionnera une photo, résultant une méthode choosePhotoButton_Click qui ressemble à ceci:

Code Snippet
// The photo Chooser shown in response to a button click.
private void choosePhotoButton_Click(object sender, RoutedEventArgs e)
{
    photoChooserTask.Show();
}

Visual Basic

Code Snippet
' The photo Chooser shown in response to a button click.
Private Sub choosePhotoButton_Click(sender As Object, e As RoutedEventArgs)
    photoChooserTask.Show()
End Sub

L'application est maintenant capable de capturer et de choisir des images existantes et de les afficher à l'écran dans des proportions correctes.
Comme l'avertissement dans l'interface utilisateur l’indique, le téléphone doit être déconnecté du logiciel Zune pour que les Choosers se lancent.

Sauvegarde des images dans la bibliothèque d’images

Afin d'enregistrer l'image dans la bibliothèque du téléphone, celle-ci devra être encodée en premier en JPEG en utilisant la classe d’Extensions de l'espace de noms System.Windows.Media.Imaging. Ensuite, l'assembly XNA que nous avons importé, sera utilisé pour l'interface avec la classe MediaLibrary, dont la méthode SavePicture écrira l’image dans la bibliothèque d'images du téléphone, où elle pourra être synchronisée à l'ordinateur, vue dans un diaporama, etc.

Nous allons écrire un fichier temporaire JPEG pour le stockage interne du téléphone, connu sous le nom d’Isolated Storage, car ce processus implique deux étapes de sauvegarde de l’image au format JPEG et par la suite nous importerons celle-ci dans la bibliothèque. En d’autres termes, l’Isolated Storage pour Windows Phone assigne un espace unique et un fichier sécurisé pour chaque application du téléphone. Nous n'allons pas entrer dans les détails de l'utilisation de l’Isolated Storage ici, nous avons juste besoin d'utiliser l'espace de stockage de notre application pour écrire notre fichier temporaire JPEG. Cela implique de créer en premier un fichier vide, puis en lui attribuant un contenu. Le type WriteableBitmap sera utilisé pour cette tâche, en recevant le contenu de bmp de notre image temporaire crée plus tôt. Enfin, nous voulons mettre à jour la propriété statusText du TextBlock lorsque nous avons un résultat de la tentative de sauvegarde de l'image.

Retournez au concepteur d'interface utilisateur et double-cliquez sur le bouton “Save Current Photo to Library », que nous avons nommé savePhotoButton. Comme avec les autres boutons nous avons un gestionnaire d’évènement vide sur l’évènement Click du bouton. Pour couvrir toutes les fonctionnalités décrites, une fois mise en œuvre, la version finale de la méthode savePhotoButton_Click ressemble à ceci:

Code Snippet
private void savePhotoButton_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                // Create a filename for JPEG file in isolated storage.
                String tempJPEG = "TempJPEG";
                // Create virtual store and file stream. Check for duplicate tempJPEG files.
                var myStore = IsolatedStorageFile.GetUserStoreForApplication();
                if (myStore.FileExists(tempJPEG))
                {
                    myStore.DeleteFile(tempJPEG);
                }
                IsolatedStorageFileStream myFileStream = myStore.CreateFile(tempJPEG);
                // Create a stream out of the sample JPEG file.
                // Instead of MyQuickApp in the URI, use the correct project name.
                // The use of TempJPEG was established earlier.
                Uri uri = new Uri("MyQuickApp;component/TempJPEG.jpg", UriKind.Relative);
                // Create a new WriteableBitmap object and set it to the JPEG stream.
                WriteableBitmap wb = new WriteableBitmap(bmp);
                // Encode WriteableBitmap object to a JPEG stream.
                // SaveJpeg(WriteableBitmap bitmap, Stream targetStream, int targetWidth,
                // int targetHeight, int orientation, int quality)
                Extensions.SaveJpeg(wb, myFileStream, wb.PixelWidth, wb.PixelHeight, 0, 85);
                myFileStream.Close();
                // Create a new stream from isolated storage, and save the JPEG file to
                // the media library on Windows Phone.
                myFileStream = myStore.OpenFile(tempJPEG, FileMode.Open, FileAccess.Read);
                MediaLibrary library = new MediaLibrary();
                Picture pic = library.SavePicture("SavedPicture.jpg", myFileStream);
                myFileStream.Close();
                savePhotoButton.IsEnabled = false;
                statusText.Text = "Saved!";
            }
            catch (Exception myError)
            {
                statusText.Text = myError.Message;
            }
        }

Visual Basic

Code Snippet
Private Sub savePhotoButton_Click(sender As Object, e As RoutedEventArgs)
    Try
        ' Create a filename for JPEG file in isolated storage.
        Dim tempJPEG As [String] = "TempJPEG"
        ' Create virtual store and file stream. Check for duplicate tempJPEG files.
        Dim myStore = IsolatedStorageFile.GetUserStoreForApplication()
        If myStore.FileExists(tempJPEG) Then
            myStore.DeleteFile(tempJPEG)
        End If
        Dim myFileStream As IsolatedStorageFileStream = myStore.CreateFile(tempJPEG)
        ' Create a stream out of the sample JPEG file.
        ' Instead of MyQuickApp in the URI, use the correct project name.
        ' The use of TempJPEG was established earlier.
        Dim uri As New Uri("MyQuickApp;component/TempJPEG.jpg", UriKind.Relative)
        ' Create a new WriteableBitmap object and set it to the JPEG stream.
        Dim wb As New WriteableBitmap(bmp)
        ' Encode WriteableBitmap object to a JPEG stream.
        ' SaveJpeg(WriteableBitmap bitmap, Stream targetStream, int targetWidth,
        ' int targetHeight, int orientation, int quality)
        Extensions.SaveJpeg(wb, myFileStream, wb.PixelWidth, wb.PixelHeight, 0, 85)
        myFileStream.Close()
        ' Create a new stream from isolated storage, and save the JPEG file to
        ' the media library on Windows Phone.
        myFileStream = myStore.OpenFile(tempJPEG, FileMode.Open, FileAccess.Read)
        Dim library As New MediaLibrary()
        Dim pic As Picture = library.SavePicture("SavedPicture.jpg", myFileStream)
        myFileStream.Close()
        savePhotoButton.IsEnabled = False
        statusText.Text = "Saved!"
    Catch myError As Exception
        statusText.Text = myError.Message
    End Try
End Sub

Le tutoriel est maintenant terminé, et vous avez un exemple de programme qui gère les entrées de la caméra, lit et écrit dans la photothèque. N'oubliez pas de débrancher le téléphone du logiciel Zune de sorte que les méthodes de démarrage des Choosers puissent fonctionner.

Voir aussi

Le code source de ce tutoriel
Les Launchers et les Choosers pour Windows Phone (Documentation de référence)
Comment encoder un fichier JPEG pour Windows Phone et enregistrer les images dans la bibliothèque d’images (Documentation de référence)
La classe MediaLibrary (Documentation de référence)
L’Isolated Storage pour Windows Phone (Documentation de référence)

Developpement Windows Phone - partie 24

papayet — Tue, 06 Sep 2011 13:24:00 GMT

Launchers et Choosers

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Launchers et Choosers

Silverlight pour les applications Windows Phone ne dispose pas d’un accès direct aux applications intégrées au téléphone, tel que le numéroteur téléphonique, ou les bibliothèques de données utilisateur, ainsi que la bibliothèque de photos. C'est parce que toutes les applications Windows Phone sont isolées les unes des autres dans des sandbox.

Une application ne peut pas démarrer directement une autre application, accéder à la mémoire d'une autre application, ou accéder au stockage de données d'une autre application. Les Launchers et les Choosers permettent indirectement à Silverlight d’utiliser les applications intégrées à l'appareil et d'accéder à des bibliothèques de données communes. Ce tutoriel décrit ce que les Launchers et les Choosers font et comment les utiliser dans vos applications.

Ce tutoriel contient les sections suivantes:

Introduction aux Launchers et Choosers
Utilisation des Launchers
Utilisation des Choosers

Introduction aux Launchers et Choosers

Les Launchers (lanceurs) et les Choosers (sélecteurs) permettent aux applications Silverlight d’accéder aux applications intégrées ainsi qu’aux stockages de données sur le périphérique Windows Phone. Par exemple, si vous voulez que votre application effectue un appel téléphonique, vous devrez utiliser le Launcher PhoneCallTask pour démarrer l'application du numéroteur téléphonique. Pour accéder à des bibliothèques de données sur l'appareil, telles que la bibliothèque de photos, vous devrez utiliser le Chooser PhotoChooserTask.

La différence entre les Launchers et les Choosers est que les Launchers ne retournent pas de valeur lorsque l'application se termine, et les Choosers retournent une valeur. Par exemple, le Launcher EmailComposeTask démarre l'application messagerie et quand il en sort, le contrôle est simplement retourné à l'application qui l’a appelé. Le Chooser CameraCaptureTask, démarre l'application caméra, mais après que l’utilisateur ai pris une photo, il fermera l’application caméra et retournera la photo qui a été prise.

Lorsque vous appelez un Launcher ou Chooser, votre application Silverlight est désactivée et l'application exécutée est démarrée. Quand l'application qui a été exécutée est quittée, votre application est réactivée. Ce processus est appelé le tombstoning et peut avoir de subtils effets sur l'état de votre application. Pour plus d'informations sur la façon de traiter correctement le tombstoning dans votre application Silverlight, allez voir la section le modèle d'exécution pour Windows Phone sur MSDN ainsi que le tutoriel sur le Tombstoning.

Les classes Launchers et Choosers sont présentes dans l’espace de nom Microsoft.Phone.Tasks, ainsi vous aurez besoin d'inclure une directive « using » dans votre application.

Utilisation des Launchers

Le processus d'utilisation de toutes les classes Launcher est le même. Pour utiliser une classe Launcher, suivez les étapes suivantes:

Créez une instance de la classe Launcher
Définissez les propriétés de l’objet Launcher
Appelez la méthode Show

Par exemple, pour utiliser le Launcher Email afin de composer un nouveau email, vous pouvez créer une instance de la classe EmailComposeTask, et définir les propriétés To,Body et Subject et appeler la méthode Show pour démarrer l’application. Quand vous sortez de l’application Email, le contrôle est retourné à votre application.

Le tableau suivant liste les différents Launchers disponibles :

launcher	Description
EmailComposeTask	Autorise une application à lancer l'application e-mail avec un nouveau message affiché. Utilisez cette option pour permettre aux utilisateurs d'envoyer des emails à partir de votre application.
MarketplaceDetailTask	Autorise une application à lancer l’application MarketPlace Windows Phone et d’afficher la page de détails pour un produit spécifié.
MarketplaceHubTask	Autorise une application à lancer l’application MarketPlace.
MarketplaceSearchTask	Autorise une application à lancer l’application Marketplace Windows Phone et d’afficher les résultats de recherche en fonction des termes spécifiés.
MediaPlayerLauncher	Autorise une application à lancer le lecteur média.
PhoneCallTask	Autorise une application à lancer l'application Phone. Utilisez cette option pour permettre aux utilisateurs d’effectuer un appel téléphonique à partir de votre application.
SearchTask	Autorise une application à lancer l’application de recherche sur internet.
SmsComposeTask	Autorise une application à lancer l'application de messagerie. L'application de messagerie commence un nouveau message SMS.
WebBrowserTask	Autorise une application à lancer le navigateur internet

L'exemple suivant montre comment utiliser le Launcher PhoneCallTask pour faire apparaitre le numéroteur téléphonique de l'appareil. Une interface utilisateur de base est créée, et possède un Button pour appeler le Launcher.

XAML

Code Snippet
 
<Button Name="ButtonDialer"
Content="Place Call"
Height="100" Width="200"
Click="ButtonDialer_Click" />

L'image suivante montre un exemple d'application fonctionnant dans l'émulateur Windows Phone.

Par la suite, un objet PhoneCallTask est instancié et les propriétés DisplayName et PhoneNumber sont définies. Enfin, la méthode Show est appelée pour démarrer le Launcher.

Code Snippet
private void ButtonDialer_Click(object sender, RoutedEventArgs e)
        {
            // The launcher.
            PhoneCallTask phoneCallTask = new PhoneCallTask();
            // Contact information to pass to the phone dialer application.
            phoneCallTask.PhoneNumber = "(555)-555-5555";
            phoneCallTask.DisplayName = "Fred";
            // Launches the phone dialer application.
            phoneCallTask.Show();
        }

Visual Basic

Code Snippet
Private Sub ButtonDialer_Click(sender As Object, e As RoutedEventArgs)
        ' The launcher.
        Dim phoneCallTask As New PhoneCallTask()
        ' Contact information to pass to the phone dialer application.
        phoneCallTask.PhoneNumber = "(555)-555-5555"
        phoneCallTask.DisplayName = "Fred"
        ' Launches the phone dialer application.
        phoneCallTask.Show()
    End Sub

Après que la méthode Show soit appelée, l'utilisateur est invité à passer l'appel ou non. L'image suivante montre un exemple d'application fonctionnant dans l'émulateur Windows Phone.

Si l'utilisateur accepte de passer l'appel, l'application téléphone est lancée et le numéro de téléphone est composé. Les images suivantes montrent un exemple d'application fonctionnant dans l'émulateur Windows Phone.

L'exemple suivant montre comment utiliser le Launcher SearchTask pour effectuer une recherche sur Internet à partir de votre application.

Une interface utilisateur de base est créée et possède un Button pour appeler le Launcher.

XAML

Code Snippet
<Button Name="ButtonSearch"
Height="100" Width="250"
Content="Search"
Click="ButtonSearch_Click" />

L'image suivante montre un exemple d'application fonctionnant dans l'émulateur Windows Phone.

Ensuite, un SearchTask est instancié et la propriété SearchQuery est définie sur "Silverlight Windows Phone". Enfin, la méthode Show est appelée pour démarrer l'application.

Code Snippet
private void ButtonSearch_Click(object sender, RoutedEventArgs e)
        {
            // The launcher.
            searchTask searchTask = new SearchTask();
            // Set the Search query
            searchTask.SearchQuery = "Silverlight Windows Phone";
            // Launches the phone Search application.
            searchTask.Show();
        }

Visual Basic

Code Snippet
Private Sub ButtonSearch_Click(sender As Object, e As RoutedEventArgs)
    ' The launcher.
    Dim searchTask As searchTask = New SearchTask()
    ' Set the Search query
    searchTask.SearchQuery = "Silverlight Windows Phone"
    ' Launches the phone Search application.
    searchTask.Show()
End Sub

Après que la méthode Show soit appelée, l'utilisateur est invité par une boîte de dialogue s’il souhaite autoriser la recherche à s’effectuer. L'image suivante montre la page de confidentialité concernant la recherche.

Si l'utilisateur accepte la déclaration de confidentialité, la recherche est exécutée et les résultats de recherche sont affichés. Les images suivantes montrent un exemple d'application fonctionnant dans l'émulateur Windows Phone.

Utilisation des Choosers

L’utilisation des Choosers est très similaire à celle des Launchers. La principale différence est le retour des valeurs des Choosers au travers de l'évènement Completed. Pour utiliser un Chooser, effectuez les étapes suivantes:

Créez une instance de la classe Chooser
Ajoutez un gestionnaire d’évènement sur l’évènement Completed
Définissez les propriétés de l’objet Chooser.
Appelez la méthode Show.
Récupérez la valeur de retour de l’application Chooser dans le gestionnaire d’évènement Completed.

Par exemple, pour utiliser le Chooser de photos, vous devrez créer une instance de la classe PhotoChooserTask, ajouter un gestionnaire d'évènement à l’évènement Completed, appeler la méthode Show, puis dans le gestionnaire Completed, si le TaskResult est OK, récupérer les données de l’image à partir la propriété ChosenPhoto des arguments de l’évènement.

Le tableau suivant énumère les différents Choosers qui sont disponibles:

Launcher	Description
CameraCaptureTask	Autorise une application à lancer l’application Camera. Utilisez cette classe pour permettre aux utilisateurs de prendre une photo à partir de votre application.
EmailAddressChooserTask	Autorise une application à lancer l’application Contacts. Utilisez cette classe pour obtenir l’adresse email d’un contact sélectionné par un utilisateur.
PhoneNumberChooserTask	Autorise une application à lancer l’application Contacts. Utiliser cette classe pour obtenir le numéro de téléphone d’un contact sélectionné par l’utilisateur.
PhotoChooserTask	Autorise une application à lancer l’application Photo Chooser. Utilisez cette classe pour permettre aux utilisateurs de sélectionner une photo.
SaveEmailAddressTask	Autorise une application à lancer l’application Contacts. Utilisez cette classe pour permettre aux utilisateurs de sauvegarder une adresse email à partir de votre application pour un contact nouveau ou existant.
SavePhoneNumberTask	Autorise une application à lancer l’application Contacts. Utilisez cette classe pour autoriser les utilisateurs à sauvegarder un numéro de téléphone à partir de votre application pour un contact nouveau ou existant.

L'exemple suivant montre comment utiliser le Chooser PhoneNumberChooserTask pour choisir un numéro de téléphone de l'un de ses contacts. Une interface utilisateur de base est créée et possède un Button pour appeler le Chooser et d’un TextBlock pour afficher le résultat.

XAML

Code Snippet
<StackPanel>
    <Button Name="ButtonChooser"
            Height="150" Width="275"
            Content="Get Phone Number"
            Click="ButtonChooser_Click"/>
    <TextBlock Name="txtPhoneNumber"
                Margin="10"
                FontSize="28"
                Text="Phone Number: " />
StackPanel>

L’image suivante montre un exemple d’application fonctionnant dans l’émulateur Windows Phone.

Une instance globale de la classe PhoneNumberChooserTask est définie. Dans le constructeur de la classe public, le PhoneNumberChooserTask est instancié. Un gestionnaire d'événement nommé numberChooser_Completed est créé pour gérer l'événement Completed. Enfin, la méthode Show est appelée pour démarrer l'application.

Dans le gestionnaire d'événement Completed, la propriété TaskResult sur PhoneNumberResult est vérifiée. Si le TaskResult est OK, la propriété Text sur le TextBlock est définie à la valeur de la propriété PhoneNumber de l'objet PhoneNumberResult.

Code Snippet
public partial class MainPage : PhoneApplicationPage
    {
        PhoneNumberChooserTask numberChooser;
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            numberChooser = new PhoneNumberChooserTask();
            numberChooser.Completed += new EventHandler(numberChooser_Completed);
        }
        void numberChooser_Completed(object sender, PhoneNumberResult e)
        {
            // Check if TaskResult is a success
            if (e.TaskResult == TaskResult.OK)
            {
                // Display the phone number in the TextBlock txtPhoneNumber
                txtPhoneNumber.Text += e.PhoneNumber;
            }
        }
        
        private void ButtonChooser_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                // Start the Chooser.
                numberChooser.Show();
            }
            catch (System.InvalidOperationException ex)
            {
                // Catch the exception, but no handling is necessary.
            }
        }
    }

Visual Basic

Code Snippet
Partial Public Class MainPage
    Inherits PhoneApplicationPage
    Private numberChooser As PhoneNumberChooserTask
    ' Constructor
    Public Sub New()
        InitializeComponent()
        numberChooser = New PhoneNumberChooserTask()
        numberChooser.Completed += New EventHandler(Of PhoneNumberResult)(AddressOf numberChooser_Completed)
    End Sub
    Private Sub numberChooser_Completed(sender As Object, e As PhoneNumberResult)
        ' Check if TaskResult is a success
        If e.TaskResult = TaskResult.OK Then
            ' Display the phone number in the TextBlock txtPhoneNumber
            txtPhoneNumber.Text += e.PhoneNumber
        End If
    End Sub
    Private Sub ButtonChooser_Click(sender As Object, e As RoutedEventArgs)
        Try
            ' Start the Chooser.
            numberChooser.Show()
            ' Catch the exception, but no handling is necessary.
        Catch ex As System.InvalidOperationException
        End Try
    End Sub
End Class

L’image suivante montre le Chooser PhoneNumber en exécution dans l’émulateur Windows Phone.

Après que l'utilisateur ait sélectionné le contact pour obtenir le numéro de téléphone, le numéro est affiché. Les images suivantes montrent l'application après qu’un contact soit sélectionné.

Voir aussi

Developpement Windows Phone - partie 21

papayet — Tue, 06 Sep 2011 13:21:00 GMT

L’Isolated Storage

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

L’Isolated Storage

Dans Silverlight pour Windows Phone 7, il n’y a pas d’accès direct au système de fichier sur le périphérique. Cela signifie que vous ne pouvez pas sauvegarder ou accéder aux données n’importe où. Toutefois, Silverlight fournit pour chaque application un mécanisme de sauvegarde et d’accès aux données à une zone spécifique auquelle seule l’application peut accéder. Cet accès IO est appelé l’Isolated Storage, et vous pouvez l’utiliser pour enregistrer et récupérer des données localement sur votre appareil Windows Phone.

Ce tutoriel montre comment utiliser l’Isolated Storage sur un périphérique Windows Phone

Ce tutoriel contient les sections suivantes:

Introduction à l’Isolated Storage
Travailler avec des paires clés / valeurs
Travailler avec des fichiers

Introduction à l’Isolated Storage

L’Isolated Storage crée un système de fichiers virtuel auquel seule l’application associée peut avoir accès. Cela signifie qu’une application peut sauvegarder et récupérer des données dans son Isolated Storage, mais elle ne peut pas accéder aux données d’autres Isolated Storage appartenant à d’autres applications.

L’Isolated Storage est constitué d’un ou de plusieurs fichiers de stockage, appelés magasins, qui contiennent l’emplacement du répertoire courant où les données sont stockées.

Il y a deux façons d’utiliser l’Isolated Storage. La première façon et la plus simple est de sauvegarder ou de récupérer les données comme paire clé/valeur à partir d’un dictionnaire en utilisant la classe IsolatedStorageSettings. La deuxième façon est de sauvegarder ou récupérer des fichiers en utilisant la classe IsolatedStorage. Les classes IsolatedStorageSettings et IsolatedStorageFile sont situées dans le namespace System.IO.IsolatedStorage, vous ajouterez donc une directive using pour ce namespace.

Travailler avec des paires clé/valeur

Pour sauvegarder ou récupérer des données comme paires clé/valeur, vous utilisez la classe IsolatedStorageSettings. Cette classe est un dictionnaire qui vous permet de stocker des objets, telles que des chaînes de caractères (String). Celle-ci est idéalement adaptée pour sauvegarder des « morceaux de données », tels que les paramètres des applications, dont vous avez besoin au démarrage et à la sortie de l’application. Les deux scénarios où cela est commun sont lorsqu’une application est démarrée ou arrêtée par l’utilisateur, et lorsqu’une application est « tombstonée » (soit désactivée). Pour plus d’informations sur le tombstoning, voir l’article MSDN sur l’ensemble d’exécution du modèle pour Windows Phone

De manière générale, vous utiliserez les méthodes suivantes de la classe IsolatedStorageSettings:

Add: Ajoute une entrée dans le dictionnaire pour la paire clé / valeur
Contains: Détermine si le dictionnaire contient la clé spécifiée
Remove: Supprime l’entrée avec la clé spécifiée.

L’image suivante montre un exemple d’application qui ajoute, récupère, et supprime une paire clé/valeur de l’IsolatedStorage.

L'exemple suivant montre comment ajouter une paire clé / valeur. Une instance de l’ IsolatedStorageSettings est créée à partir de la propriété ApplicationSettings. Une clé nommée «UserData» est créée dans le dictionnaire. La valeur de «UserData» est affectée à la propriété Text d’un TextBox. Enfin, les paramètres sont enregistrés en utilisant la méthode Save.

Code Snippet
private void btnSaveSetting_Click(object sender, RoutedEventArgs e)
{
    IsolatedStorageSettings settings = IsolatedStorageSettings.ApplicationSettings;
    // txtInput is a TextBox defined in XAML.
    if (!settings.Contains("userData"))
    {
        settings.Add("userData", txtInput.Text);
    }
    else
    {
        settings["userData"] = txtInput.Text;
    }
    settings.Save();
}

Visual Basic

Code Snippet
Private Sub btnSaveSetting_Click(sender As Object, e As RoutedEventArgs)
    Dim settings As IsolatedStorageSettings = IsolatedStorageSettings.ApplicationSettings
    ' txtInput is a TextBox defined in XAML.
    If Not settings.Contains("userData") Then
        settings.Add("userData", txtInput.Text)
    Else
        settings("userData") = txtInput.Text
    End If
    settings.Save()
End Sub

L'exemple suivant montre comment récupérer les données d'une paire clé / valeur. Cette donnée est accessible directement à partir de la propriété ApplicationSettings. La propriété Text d'un TextBlock est définie à la valeur de la clé «UserData ».

Code Snippet
private void btnDisplaySetting_Click(object sender, RoutedEventArgs e)
{
    // txtDisplay is a TextBlock defined in XAML.
    txtDisplay.Text = "USER DATA: ";
    if (IsolatedStorageSettings.ApplicationSettings.Contains("userData"))
    {
        txtDisplay.Text += IsolatedStorageSettings.ApplicationSettings["userData"] as string;
    }
}

Visual Basic

Code Snippet
Private Sub btnDisplaySetting_Click(sender As Object, e As RoutedEventArgs)
    ' txtDisplay is a TextBlock defined in XAML.
    txtDisplay.Text = "USER DATA: "
    If IsolatedStorageSettings.ApplicationSettings.Contains("userData") Then
        txtDisplay.Text += TryCast(IsolatedStorageSettings.ApplicationSettings("userData"), String)
    End If
End Sub

L'exemple suivant montre comment supprimer une paire clé / valeur. Cette donnée est accessible directement à partir de la propriété ApplicationSettings. La clé «UserData" est retirée du dictionnaire en utilisant la méthode Remove.

Code Snippet
private void btnRemoveSetting_Click(object sender, RoutedEventArgs e)
        {
            if(IsolatedStorageSettings.ApplicationSettings.Contains("userData"))
            {
                IsolatedStorageSettings.ApplicationSettings.Remove("userData");
            }
        }

Visual Basic

Code Snippet
Private Sub btnRemoveSetting_Click(sender As Object, e As RoutedEventArgs)
    If IsolatedStorageSettings.ApplicationSettings.Contains("userData") Then
        IsolatedStorageSettings.ApplicationSettings.Remove("userData")
    End If
End Sub

Travailler avec les fichiers

Pour sauvegarder ou récupérer des fichiers, vous utiliserez la classe IsolatedStorageFile. Cette classe représente une zone de stockage isolée qui contient des fichiers et des répertoires. Lorsque vous travaillez avec des fichiers, vous utilisez généralement la classe IsolatedStorageFileStream pour lire et écrire le contenu dans le fichier. Vous utiliserez généralement les méthodes suivantes de la classe IsolatedStorageFile:

GetUserStoreForApplication: Obtient l’espace de stockage isolé de l’utilisateur qui correspond à l'identité de l’application du code qui l’appelle.
FileExists: Détermine si le chemin spécifié se réfère à un fichier existant dans le stockage isolé
CreateFile: Créer un fichier dans le stockage isolé
OpenFile: Ouvre un fichier à un emplacement spécifié en utilisant le partage et les options d'accès définies. Cette méthode retourne un objet IsolatedStorageFileStream qui contient le flux du fichier.
DeleteFile: Supprime un fichier dans le stockage isolé.
DirectoryExists: Détermine si le chemin spécifié se réfère à un répertoire existant dans le stockage isolé
CreateDirectory: Crée un répertoire dans le stockage isolé.
DeleteDirectory: Supprime un répertoire dans le stockage isolé.
Remove: Supprime la portée de l’Isolated Storage et tout son contenu.

Les instances des classes IsolatedStorageFile et IsolatedStorageFileStream doivent être supprimées après leurs utilisations. La déclaration du « using » le fait automatiquement pour vous et est une bonne pratique à utiliser.

L'exemple suivant créé une application qui enregistre et récupère un fichier image dans l’isolated storage. Cet exemple utilise la classe PhotoChooserTask pour obtenir une image se situant dans la bibliothèque d’images sur l'appareil. Ce tutoriel n’ira pas dans les détails de l'utilisation du PhotoChooserTask. Pour plus d'informations sur l'utilisation de PhotoChooserTask, voir l’article MSDN sur l’aperçu des Launcher et Choosers pour Windows Phone.

Le XAML suivant montre une interface utilisateur de base pour une application. Un Button pour lancer le sélecteur de photo et enregistrer le fichier image, un Button pour récupérer le fichier à partir de l’isolated storage et l'afficher, et un objet Image pour afficher le fichier image.

XAML

Code Snippet
 <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Button Name="btnSaveFile"
             Content="Save Image"
             Height="100" Width="300"
             Click="btnSaveFile_Click"/>
     <Button Name="btnDisplayFile"
             Content="Display Saved Image"
             Height="100" Width="300"
             Click="btnDisplayFile_Click"/>
     <Image Name="userImage" Source="Sl_Nebula.jpg" />
 StackPanel>

L’image suivante montre l’application en exécution dans l’émulateur Windows Phone.

Le code suivant créé et démarre le PhotoChooserTask pour obtenir une image, puis l’enregistrer dans l’Isolated Storage. Après que l’image est été choisie, un répertoire nommé images est créé s'il n'existe pas. Un objet IsolatedStorageFileStream est créé pour stocker le fichier. La méthode SaveJpeg est utilisée pour sauvegarder les données de l’image dans l'objet IsolatedStorageFileStream.

Code Snippet
private void SaveToFile(BitmapImage image)
        {
            using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication())
            {
                WriteableBitmap bmImage = new WriteableBitmap(image);
                if (!store.DirectoryExists("Images"))
                {
                    store.CreateDirectory("Images");
                }
                using (IsolatedStorageFileStream isoStream =
                store.OpenFile(@"Images\userPhoto.jpg", FileMode.OpenOrCreate))
                {
                    Extensions.SaveJpeg(
                    bmImage,
                    isoStream,
                    bmImage.PixelWidth,
                    bmImage.PixelHeight,
                    0,
                    100);
                }
            }
        }

Visual Basic

Code Snippet
Private photoTask As PhotoChooserTask
' Constructor
Public Sub New()
    InitializeComponent()
    photoTask = New PhotoChooserTask()
    photoTask.Completed += New EventHandler(Of PhotoResult)(AddressOf photoTask_Completed)
End Sub
Private Sub photoTask_Completed(sender As Object, e As PhotoResult)
    If e.TaskResult = TaskResult.OK Then
        Dim bmp As New BitmapImage()
        bmp.SetSource(e.ChosenPhoto)
        SaveToFile(bmp)
    End If
End Sub
Private Sub btnSaveFile_Click(sender As Object, e As RoutedEventArgs)
    photoTask.Show()
End Sub
Private Sub SaveToFile(image As BitmapImage)
    Using store As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication()
        Dim bmImage As New WriteableBitmap(image)
        If Not store.DirectoryExists("Images") Then
            store.CreateDirectory("Images")
        End If
        Using isoStream As IsolatedStorageFileStream = store.OpenFile("Images\userPhoto.jpg", FileMode.OpenOrCreate)
            Extensions.SaveJpeg(bmImage, isoStream, bmImage.PixelWidth, bmImage.PixelHeight, 0, 100)
        End Using
    End Using
End Sub

L’image suivante montre le sélecteur d’images sur le téléphone.

Le code suivant récupère le fichier image à partir de l’Isolated Storage en utilisant la méthode OpenFile, et définit la propriété Source d'un objet Image pour cette image.

Code Snippet
private BitmapImage GetSavedImage()
        {
            BitmapImage image;
            using (IsolatedStorageFile store =
            IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream isoStream =
                store.OpenFile(@"Images\userPhoto.jpg", FileMode.Open))
                {
                    image = new BitmapImage();
                    image.SetSource(isoStream);
                }
            }
            return image;
            
        }
        
        private void btnDisplayFile_Click(object sender, RoutedEventArgs e)
        {
            BitmapImage bitmap = GetSavedImage();
            if (bitmap != null)
            {
                // userImage is defined in MainPage.xaml
                userImage.Source = bitmap;
            }
        }

Visual Basic

Code Snippet
Private Function GetSavedImage() As BitmapImage
     Dim image As BitmapImage
     Using store As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication()
         Using isoStream As IsolatedStorageFileStream = store.OpenFile("Images\userPhoto.jpg", FileMode.Open)
             image = New BitmapImage()
             image.SetSource(isoStream)
         End Using
     End Using
     Return image
 End Function
 Private Sub btnDisplayFile_Click(sender As Object, e As RoutedEventArgs)
     Dim bitmap As BitmapImage = GetSavedImage()
     If bitmap IsNot Nothing Then
         ' userImage is defined in MainPage.xaml
         userImage.Source = bitmap
     End If
 End Sub

L'image suivante montre l'application après que l'objet Image ai été mis à jour avec le fichier image récupéré de l’Isolated Storage.

Voir aussi

Developpement Windows Phone - partie 18

papayet — Tue, 06 Sep 2011 13:18:00 GMT

Les Pinceaux (Brushes)

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Les Pinceaux (Brushes)

Avec Silverlight pour Windows Phone 7 vous pouvez dessiner des objets à l’écran et les peindre avec des objets Brush. Ce tutoriel introduit les différents Brush (pinceaux) qui sont présents dans Silverlight et comment les utiliser.

Ce tutoriel contient les sections suivantes :

Introduction aux Brushes
Les Brushes SolidColor
Les Brushes LinearGradient
Les Brushes RadialGradient
Les Brushes Image

Introduction aux brushes

Vous utilisez des objets Brush pour peindre une zone avec une couleur unie, un dégradé ou une image. Si vous êtes familier avec la façon dont les Brushes fonctionnent avec les applications Silverlight s‘exécutant dans le navigateur, alors vous serez heureux de savoir que les Brushes fonctionnent exactement de la même manière sur Windows Phone. La seule exception est que le VideoBrush n’est pas supporté sur Windows Phone.

Pour peindre un objet sur l’écran, comme une forme (Shape) ou un Control, vous utilisez un Brush. Vous définissez la propriété Fill de la forme (Shape) ou les propriétés Background et Foreground d’un Control avec le Brush désiré.

Les différents types de Brush dans Silverlight pour Windows Phone sont le SolidColorBrush, le LinearGradientBrush, le RadialGradientBrush et l’ImageBrush.

Pour plus d’informations sur les Brushes, consultez la Vue d’ensemble sur les Brushes sur MSDN.

Les Brushes solidcolor

Un SolidColorBrush peint une zone avec une seule couleur, comme le rouge ou le bleu. Il y a trois manières en XAML de définir un SolidColorBrush et de lui spécifier sa couleur. Vous pouvez utiliser les noms de couleurs prédéfinies, utiliser les valeurs hexadécimales de couleur ou la propriété Syntax Element.

Les noms de couleurs prédéfinies

Vous pouvez utiliser un nom de couleur prédéfinie, comme Yellow ou SlateBlue pour définir la propriété Fill de de la forme (Shape) ou les propriétés Background et Foreground d’un Control. L’analyseur XAML convertit le nom en une structure Color.

Remarque

Pour un graphe avec tous les noms de couleurs prédéfinies et leurs valeurs hexadécimales correspondantes, consultez la structure Color sur MSDN.

L’exemple suivant définit la propriété Fill d’un Rectangle à la couleur prédéfinie Red

XAML

Code Snippet
<StackPanel>
            <Rectangle Width="100" Height="100" Fill="Red" />
        StackPanel>

Les valeurs de couleur hexadécimale

Vous pouvez utiliser la valeur hexadécimale d’une couleur pour définir la propriété Fill d’un Shape ou les propriétés Background et Foreground d’un Control. La structure de la valeur hexadécimale est une valeur alpha (opacité), valeur rouge, valeur vert, valeur bleue. Par exemple, la valeur hexadécimale #FFFF0000 définit une couleur rouge opaque (alpha=FF, rouge=FF, vert=FF et bleue=00).

L’exemple suivant définit la propriété Fill d’un Rectangle à la valeur hexadécimale #FFFF0000

XAML

Code Snippet
<StackPanel>
            <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
        StackPanel>

La propriété Syntax Element

Vous pouvez utiliser la propriété Syntax Element pour définir un SolidColorBrush. Cette syntaxe est plus verbeuse que les précédentes méthodes, mais elle vous permet de spécifier des paramètres supplémentaires, comme la propriété Opacity de Brush. Pour plus d’informations sur la syntaxe XAML, y compris la propriété Syntax Element, consultez le tutoriel sur le XAML.

L’exemple suivant créé un Rectangle et créé explicitement le SolidColorBrush pour la propriété Fill. La couleur (Color) du SolidColorBrush est définie à Bleu et la propriété Opacity est définie à 0,5.

XAML

Code Snippet
<Grid>
    <Rectangle Width="200" Height="150">
        <Rectangle.Fill>
            <SolidColorBrush Color="Blue" Opacity="0.5" />
        Rectangle.Fill>
    Rectangle>
Grid>

Les Brushes lineargradient

Un LinearGradientBrush peint une zone avec un dégradé qui est défini le long d’une ligne, appelée l’axe de dégradé. Vous spécifiez les couleurs du dégradé et leur emplacement le long de l’axe du dégradé en utilisant des objets GradientStop. Vous pouvez également modifier l’axe de dégradé, ce qui vous permet de créer des dégradés horizontaux et verticaux, et d’inverser la direction de celui-ci.

Le GradientStop est la pierre angulaire d’un pinceau à dégradé. Un GradientStop spécifie une couleur (Color) à un Offset le long de l’axe de dégradé.

La propriété Color du GradientStop spécifie la couleur du GradientStop. Vous pouvez définir la couleur en utilisant un nom de couleur prédéfinie ou en spécifiant les valeurs hexadécimales ARVB.

La propriété Offset du GradientStop spécifie la position de la couleur d’arrêt du dégradé sur l’axe. L’Offset est un Double qui varie entre 0 et 1. Plus la valeur de l’Offset du dégradé est proche de 0, plus la couleur se rapprochera du début du dégradé. Plus la valeur de l’Offset du dégradé est proche de 1, plus la couleur se rapprochera de la fin du dégradé.

L’exemple suivant créé un dégradé linéaire avec 4 couleurs et l’utilise pour peindre un Rectangle.

XAML

Code Snippet
 <StackPanel>
            
            <Rectangle Width="400" Height="200">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="Yellow" Offset="0.0" />
                        <GradientStop Color="Red" Offset="0.25" />
                        <GradientStop Color="Blue" Offset="0.75" />
                        <GradientStop Color="LimeGreen" Offset="1.0" />
                    LinearGradientBrush>
                Rectangle.Fill>
            Rectangle>
        StackPanel>

L’image suivante montre à quoi ressemble le dégradé sur un Windows Phone

La couleur de chaque point entre les points de dégradé est interpolée linéairement comme une combinaison de la couleur spécifiée par les deux points de dégradé de contour. L’illustration suivante met en évidence les points de dégradé dans l’exemple précédent. Les cercles marquent la position des points de dégradé et la ligne hachurée montre l’axe du dégradé.

Vous pouvez changer la ligne sur laquelle les points du dégradé sont positionnés en définissant les propriétés StartPoint et EndPoint du Brush. En manipulant ces propriétés vous pouvez créer des dégradés horizontaux et verticaux, inverser la direction du dégradé, condenser la propagation de celui-ci, et plus encore.

L’exemple suivant créé un Rectangle qui a un LinearGradientBrush défini sur sa propriété Fill. Le LinearGradientBrush crée deux GradientStops, un rouge et un bleu. Le GradientStop rouge est défini à un Offset de 0 et le GradientStop bleu est défini à un Offset de 0.75. La propriété StartPoint est définie à (0,0) et la propriété EndPoint est définie à (1,1) qui sont les valeurs par défaut. La méthode Spread spécifie les différentes façons dont le dégradé peut être dessiné. Utiliser les curseurs dans cet exemple pour expérimenter ce qu’il se passe avec les différentes valeurs de la propriété.

Les Brushes radialgradient

Comme un objet LinearGradientBrush, un RadialGradientBrush peint une zone avec des couleurs qui se mélangent le long d’un axe. Un dégradé de l’axe d’un Brush est défini par un cercle. Ses couleurs rayonnent vers l’extérieur de son origine. Utiliser les propriétés GradientOrigin, Center, RadiusX et RadiusY pour définir le dégradé radial

L’exemple suivant créé un dégradé radial avec quatre GradientStops.

XAML

Code Snippet
<StackPanel>
            
            <Rectangle Width="400" Height="200">
                <Rectangle.Fill>
                    <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                        <GradientStop Color="Yellow" Offset="0" />
                        <GradientStop Color="Red" Offset="0.25" />
                        <GradientStop Color="Blue" Offset="0.75" />
                        <GradientStop Color="LimeGreen" Offset="1" />
                    RadialGradientBrush>
                Rectangle.Fill>
            Rectangle>
        StackPanel>

L’image suivante montre à quoi ressemble le dégradé sur un Windows Phone

L’illustration suivante montre le dégradé créé dans l’exemple précédent. Les points du dégradé du Brush ont été mis en évidence. Notez que même si les résultats sont différents, les points de dégradé dans cet exemple sont identiques aux points des dégradés des précédents exemples.

L’illustration suivante montre plusieurs dégradés radiaux avec différents paramètres pour le GradientOrigin, Center, RadiusX et RadiusY.

L’exemple suivant créé un Rectangle qui a un RadialGradientBrush sur la propriété Fill. Le RadialGradientBrush créé deux GradientStops, un rouge et un bleu. Le GradientStop rouge est définit avec un offset de 0 est le GradientStop bleu est définit avec un Offset de 0,75. Les propriétés GradientOrigin et Center sont toutes deux définies à (0.5, 0.5) et les propriétés RadiusX et RadiusY sont définies à 0.5 qui sont les valeurs par défaut. Utilisez les curseurs dans cet exemple afin d’expérimenter les différentes valeurs de propriétés.

Les Brushes Image

Une ImageBrush peint une zone avec une image. Il peint la zone avec une image JPEG ou PNG spécifiée par la propriété ImageSource. Vous définissez la propriété ImageSource avec le chemin de l’image à charger.

Par défaut, une ImageBrush étire son image pour remplir la zone peinte, et peut éventuellement déformer l’image si la zone peinte a un ratio différent de l’image d’origine. Vous pouvez changer ce comportement en changeant la propriété Strech de sa valeur par défaut de Fill à None, Uniform ou UniformToFill.

L’exemple suivant créé un ImageBrush et définit la propriété ImageSource à une image nommée flower.jpg qui est incluse en tant que ressource dans l’application. Utilisez la liste déroulante pour changer la propriété.

L’image suivante montre à quoi ressemble l’image sur un Windows Phone

Voir aussi

Vue d’ensemble sur les Brushes

Developpement Windows Phone - partie 15

papayet — Tue, 06 Sep 2011 13:15:00 GMT

Les animations

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Les animations

Avec Silverlight pour Windows Phone 7, les animations peuvent améliorer vos applications en y ajoutant de l’interactivité et du mouvement. En animant une couleur de fond ou en appliquant une transformation animée, vous pouvez créer des transitions d’écrans spectaculaires ou fournir des repères visuels utiles. Ce tutoriel vous montre comment créer des animations de base en changeant les valeurs d’une propriété et en utilisant des images clés (Key-Frames)

Ce tutoriel contient les sections suivantes :

Animation d’une propriété de type Double
Animation d’une propriété de type Color
Démarrage, Arrêt, Pause, Reprise
Animation par l’utilisation de Key-Frames
Animation par l’utilisation des Easing Functions

Remarque

Les exemples interactifs de ce tutoriel utilisent Silverlight qui est exécuté sur le navigateur pour simuler le comportement de Silverlight pour Windows Phone. Le comportement actuel peut être visiblement différent dans l’émulateur ou sur un téléphone Windows Phone.

Animation d’une propriété de type Double

Les animations en Silverlight pour Windows Phone sont créées en animant les valeurs des propriétés de leurs objets. Par exemple, vous pouvez animer les propriétés Width et Rectangle, l’angle d’un RotateTransform, ou la valeur d’une couleur d’un contrôle Button. Dans l’exemple suivant, la propriété Opacity est animée. Pour essayer cet exemple, cliquez sur le Rectangle pour le voir se fondre et disparaitre.

XAML

Code Snippet
<StackPanel >
    <StackPanel.Resources>
        
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation
                Storyboard.TargetName="MyAnimatedRectangle"
                Storyboard.TargetProperty="Opacity"
                From="1.0" To="0.0" Duration="0:0:1"
                AutoReverse="True">
            DoubleAnimation>
        Storyboard>
    StackPanel.Resources>
    <Rectangle MouseLeftButtonUp="Rectangle_Tapped"
               x:Name="MyAnimatedRectangle"
               Width="300" Height="200" Fill="Blue" />
StackPanel>

Code Snippet
// When the user taps the rectangle, the animation begins.
        private void Rectangle_Tapped(object sender, MouseEventArgs e)
        {
            myStoryboard.Begin();
        }

Visual Basic

Code Snippet
' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
    myStoryboard.Begin()
End Sub

Les sections suivantes parlent des étapes d’animations sur la propriété Opacity et examinent le code XAML qui est utilisé pour chaque étape.

Identifier la propriété à animer

Dans cet exemple, vous animez la propriété Opacity d’un Rectangle. Vous n’avez pas à déclarer la propriété que vous voulez animer sur l’objet lui-même. Cependant, en général vous nommez l’objet que vous voulez animer. Nommer l’objet rend plus facile de spécifier quel objet sera visé par l’animation. Le XAML suivant montre comment nommer le Rectangle.

Code Snippet
<Rectangle x:Name="MyAnimatedRectangle"/>

Créer un Storyboard et en faire une ressource

Un StoryBoard est un conteneur dans lequel vous mettez les objets à animer. Vous devez construire une ressource StoryBoard qui est disponible pour l’objet que vous voulez animer. Le XAML suivant montre comment construire une ressource StoryBoard de l’élément racine qui est un StackPanel.

Code Snippet
<StackPanel x:Name="rootElement">
    <StackPanel.Resources>
        
        <Storyboard x:Name="myStoryboard">
            
        Storyboard>
    StackPanel.Resources>
StackPanel>

Ajout d’une animation d’objet dans le storyboard

Cet exemple utilise l’objet DoubleAnimation parce que la valeur de la propriété que vous animez (Opacity) utilise un double. Un objet animation spécifie ce qui est animé et comment l’animation se comporte. Le XAML suivant montre comment l’objet DoubleAnimation est ajouté au StoryBoard.

Code Snippet
<Storyboard x:Name="myStoryboard">
     <DoubleAnimation
         Storyboard.TargetName="MyAnimatedRectangle"
         Storyboard.TargetProperty="Opacity"
         From="1.0" To="0.0" Duration="0:0:1"
         AutoReverse="True"
         RepeatBehavior="Forever">
     DoubleAnimation>
 Storyboard>

L’objet DoubleAnimation spécifie l’animation suivante :

Storyboard.TargetProperty="Opacity" spécifie que la propriété Opacity est animée.
Storyboard.TargetName="MyAnimatedRectangle" spécifie que la propriété de cet objet est animée. (le Rectangle)
From="1.0" To="0.0" spécifie que la propriété Opacity commence à une valeur de 1 et est animée jusqu’à 0 (Démarre opaque et s’estompe par la suite)
Duration="0:0:1" spécifie combien de temps l’animation dure (A quelle vitesse s’estompe le Rectangle). La durée utilisée dans cet exemple est d’une seconde parce que la propriété Duration est spécifiée sous forme de « heures : minutes : secondes ».
AutoReverse="True" spécifie que quand l’animation se termine, elle recommence dans le sens inverse. Dans le cas de cet exemple, elle s’estompe et s’inverse à une opacité complète.
RepeatBehavior= « Forever » spécifie que lorsque l’animation commence celle-ci continue indéfiniment. Dans cet exemple, le Rectangle s’estompe continuellement…

Démarrer l’animation

Une manière commune de démarrer une animation est une réponse à un évènement. Dans cet exemple, l’évènement MouseLeftButtonUp est utilisé pour démarrer l’animation quand l’utilisateur touche le Rectangle.

Code Snippet
<Rectangle MouseLeftButtonUp="Rectangle_Tapped"
                   x:Name="MyAnimatedRectangle"
                   Width="100" Height="100" Fill="Blue" />

Le Storyboard est démarré en utilisant la méthode Begin().

Code Snippet
myStoryboard.Begin();

Remarque

Vous pouvez utiliser le code C# au lieu du XAML pour définir une animation. Pour voir un exemple, allez à la section Vue d’ensemble d’une Animation dans la librairie MSDN.

Animation d’une propriété Color

L’exemple précédent nous a montré comment animer une propriété qui utilisait une valeur de type Double. Et que faire si vous voulez animer un type Color ?

Silverlight pour Windows Phone fourni des objets d’animation qui sont utilisés pour animer d’autres types de valeurs. Les objets suivants animent respectivement les propriétés de type Double, Color et Point :

Remarque

Vous pouvez aussi animer les propriétés qui utilisent des objets. Pour plus d’informations, voir la section Animations avancées.

L’exemple suivant montre comment créer un objet ColorAnimation. Pour essayer cet exemple, cliquez sur le Rectangle pour changer la couleur de fond du Canvas de rouge à vert sur une période de 4 secondes.

XAML

Code Snippet
<StackPanel MouseLeftButtonUp="Rectangle_Tapped">
            <StackPanel.Resources>
                <Storyboard x:Name="myStoryboard">
                    
                    <ColorAnimation Storyboard.TargetName="mySolidColorBrush"
                                    Storyboard.TargetProperty="Color"
                                    From="Red" To="Green" Duration="0:0:4" />
                Storyboard>
            StackPanel.Resources>
            <StackPanel.Background>
                <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
            StackPanel.Background>
        StackPanel>

Code Snippet
// When the user taps the rectangle, the animation begins.
        private void Rectangle_Tapped(object sender, MouseEventArgs e)
        {
            myStoryboard.Begin();
        }

Visual Basic

Code Snippet
' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
    myStoryboard.Begin()
End Sub

Démarrage, arrêt, pause et reprise

L’exemple précédant nous a montré comment démarrer une animation en utilisant la méthode Begin(). Le Storyboard aussi possède les méthodes Stop(), Pause(), et Resume() qui peuvent être utilisées pour contrôler une animation. L’exemple suivant créé quatre contrôles Button qui permettent à l’utilisateur de contrôler l’animation d’une Ellipse sur l’écran. Pour essayer cet exemple, cliquez sur les boutons et regardez comment l’animation se comporte.

Code Snippet
 <Canvas>
            <Canvas.Resources>
                <Storyboard x:Name="myStoryboard">
                    
                    <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="MyAnimatedEllipseGeometry"
                                    Duration="0:0:5"
                                    From="20,200"
                                    To="400,100"
                                    RepeatBehavior="Forever" />
                Storyboard>
            Canvas.Resources>
            <Path Fill="Blue">
                <Path.Data>
                    
                    <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="20,20" RadiusX="15" RadiusY="15" />
                Path.Data>
            Path>
            <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
                
                <Button Click="Animation_Begin" Width="65" Height="30" Margin="2" Content="Begin" />
                
                <Button Click="Animation_Pause" Width="65" Height="30" Margin="2" Content="Pause" />
                
                <Button Click="Animation_Resume" Width="65" Height="30" Margin="2" Content="Resume" />
                
                <Button Click="Animation_Stop" Width="65" Height="30" Margin="2" Content="Stop" />
            StackPanel>
        Canvas>

Code Snippet
 
private void Animation_Begin(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
    myStoryboard.Stop();
}

Visual Basic

Code Snippet
Private Sub Animation_Begin(sender As Object, e As RoutedEventArgs)
    myStoryboard.Begin()
End Sub
Private Sub Animation_Pause(sender As Object, e As RoutedEventArgs)
    myStoryboard.Pause()
End Sub
Private Sub Animation_Resume(sender As Object, e As RoutedEventArgs)
    myStoryboard.[Resume]()
End Sub
Private Sub Animation_Stop(sender As Object, e As RoutedEventArgs)
    myStoryboard.[Stop]()
End Sub

Animation en utilisant les Key-Frames

Jusqu’à maintenant, les exemples dans ce tutoriel ont montré les animations entre 2 valeurs. (Elles sont appelées les animations From/To/By) Les animations Key-Frames vous laissent utiliser plus de deux valeurs cibles et contrôlent la méthode d’interpolation d’une animation (plus précisément, en utilisant la propriété KeySpline), vous pouvez contrôler l’accélération d’une animation.
L’exemple suivant montre comment utiliser une animation key-frame pour animer la propriété Height d’un Rectangle. Pour essayer cet exemple, cliquez sur le Rectangle pour voir l’effet attendu.

XAML

Code Snippet
<StackPanel Background="#FDF5E6">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Height">
                
                <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />
                
                <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300" KeyTime="0:0:0.8" />
                
                <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250" KeyTime="0:0:1.5" />
            DoubleAnimationUsingKeyFrames>
        Storyboard>
    StackPanel.Resources>
    <Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue" Width="200" Height="30" />
StackPanel>

Code Snippet
// When the user taps the rectangle, the animation begins.
        private void Rectangle_Tapped(object sender, MouseEventArgs e)
        {
            myStoryboard.Begin();
        }

Visual Basic

Code Snippet
' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
    myStoryboard.Begin()
End Sub

Le XAML suivant inclut trois Key-Frames. Chaque key-frame spécifie une valeur animée pour un certain temps. L’animation entière prend donc 1,5 seconde.

La première key-frame de cet exemple est un LinearDoubleKeyFrame. Les objets tels que le LinearDoubleKeyFrame créent une transition linéaire entre les valeurs. Cependant ici, cela est utilisé pour spécifier que l’animation est à une valeur de 30 au temps 0.
La deuxième key-frame dans cet exemple est un SplineDoubleKeyFrame qui spécifie que la hauteur (Height) d’un Rectangle est à 300 au temps 0,8 seconde après que l’animation ait commencé. Les objets de type SplineDoubleKeyFrame tels que SplineDoubleKeyFrame créent une variable de transition entre les valeurs selon la valeur de la propriété KeySpline. Ici, le Rectangle commence par se déplacer doucement et avance jusqu’à la fin du temps du segment.
La troisième key-frame dans cet exemple est un SplineDoubleKeyFrame qui spécifie que la hauteur (Height) du Rectangle est de 250 au temps de 1,5 seconde après que l’animation ait commencé (0,7 seconde après que le dernier SplineDoubleKeyFrame se termine). En contraste avec le précédent SplineDoubleKeyFrame ce key-frame fait que l’animation démarre rapidement et ralentit jusqu’à la fin.
La propriété la plus astucieuse utilisée par le SplineDoubleKeyFrame est la propriété KeySpline. Elle spécifie les premiers et deuxièmes points de contrôle d’une courbe de Bézier, qui décrit l’accélération de l’animation.

Remarque

Pour en apprendre plus sur les « key splines » et les courbes de Bézier, exécutez cet exemple Windows Presentation Foundation ou allez voir à la section Key-Frame Animations dans la librairie MSDN.

Animer en utilisant les Easing Functions

Les Easing Functions vous permettent d’appliquer des formules de mathématiques personnalisées pour votre animation. Par exemple, vous aimeriez qu’un objet rebondisse ou se comporte comme s’il était sur ressort. Vous pouvez utiliser les animations de type Key-Frame ou même From/To/By pour approximer ces effets, mais cela prendrait une somme significative de temps et de travail, et l’animation serait moins efficace qu’en utilisant une formule mathématique.

Outre le fait de créer votre propre Easing Function en implémentant l’interface IEasingFunction, vous pouvez utiliser une des plusieurs Easing Functions fournies par le runtime pour créer des effets communs. L’exemple suivant montre les Easing Function qui sont fournies avec le runtime. Sélectionnez une Easing Function dans la liste déroulante, définissez ses propriétés, puis exécutez l’animation. Le code XAML pour l’animation est affiché sur le coin inférieur droit de l’exemple.

L’exemple suivant montre comment utiliser une animation Key Frame pour animer la hauteur (Height) d’un Rectangle. Pour essayer cet exemple, cliquez sur le Rectangle pour voir l’effet.

Ci-dessous une liste des Easing Functions démontrées dans l’exemple ci-dessus avec un rapide résumé de ce qu’elles font :

BackEase: Rétracte les mouvements d’une animation avant qu’ils commencent à s’animer sur le chemin indiqué.
BounceEase: Créée un effet de rebondissement
CircleEase: Créée une animation qui accélère et / ou décélère en utilisant une fonction circulaire.
CubicEase: Créée une animation qui accélère et / ou décélère en utilisant la formule f(t) = t3.
ElasticEase: Créée une animation qui a un ressort oscillant d’avant en arrière jusqu’à ce qu’il s’immobilise.
ExponentialEase: Créée une animation qui accélère et / ou décélère en utilisant une formule exponentielle.
PowerEase: Créée une animation qui accélère et /ou décélère en utilisant la formule f(t) = tp où p est égal à la propriété puissance.
QuadraticEase: Créée une animation qui accélère et / ou décélère en utilisant la formule f(t)= t2
QuarticEase: Créée une animation qui accélère et / ou décélère en utilisant la formule f(t) = t4
QuinticEase: Créée une animation qui accélère et / ou décélère en utilisant la formule f(t) = t5
SineEase: Créée une animation qui accélère et / ou décélère en utilisant une formule sinus.

Dans l’exemple précédent, les Easing Functions sont appliquées pour une animation From/To/By. Vous pouvez aussi appliquer ces Easing Functions aux animations Key Frame en utilisant les objets suivants :

L’exemple suivant montre comment utiliser les Key Frames avec les Easing Functions qui leurs sont associées pour créer l’animation d’un Rectangle qui se contracte, ralentit, puis s’étend vers le bas (comme s’il chutait) et puis rebondit jusqu’à s’arrêter. Pour essayer cet exemple, cliquez sur le Rectangle pour voir l’effet.

XAML

Code Snippet
<StackPanel x:Name="LayoutRoot" Background="White">
            <StackPanel.Resources>
                <Storyboard x:Name="myStoryboard">
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="myRectangle">
                        
                        <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                            <EasingDoubleKeyFrame.EasingFunction>
                                <CubicEase EasingMode="EaseOut"/>
                            EasingDoubleKeyFrame.EasingFunction>
                        EasingDoubleKeyFrame>
                        
                        <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
                            <EasingDoubleKeyFrame.EasingFunction>
                                <BounceEase Bounces="5" EasingMode="EaseOut"/>
                            EasingDoubleKeyFrame.EasingFunction>
                        EasingDoubleKeyFrame>
                    DoubleAnimationUsingKeyFrames>
                Storyboard>
            StackPanel.Resources>
            <Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue" Width="200" Height="200" />
        StackPanel>

Code Snippet
// When the user taps the rectangle, the animation begins.
        private void Rectangle_Tapped(object sender, MouseEventArgs e)
        {
            myStoryboard.Begin();
        }

Visual Basic

Code Snippet
' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
    myStoryboard.Begin()
End Sub

En plus de l’utilisation des Easing Functions, vous pouvez créer vos propres Easing Functions en héritant d’EasingFunctionBase. Pour plus d’informations, consultez EasingFunctionBase.

Voir aussi

Developpement Windows Phone - partie 12

papayet — Tue, 06 Sep 2011 13:12:00 GMT

Les Notifications Push pour le développement Windows Phone

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Les Notifications Push pour le développement Windows Phone

Les applications Windows Phone 7 peuvent recevoir des messages d’Internet qui sont envoyés par un serveur, grâce à l’utilisation des Notifications Push. Ces notifications peuvent être reçues par l’utilisateur même si l’application n’est pas en marche. Les Notifications Push sont relayées aux périphériques Windows Phone 7 par le service de notification de Microsoft (MPNS: Microsoft Push Notification Service)

Ce tutoriel contient les sections suivantes:

La solution en vidéo
Vue d’ensemble des Notifications Push
Créer un web service qui renvoie des Notifications Push
Publier votre web service sur Windows Azure
Créer une application mobile qui reçoit des Notifications Push
Tester ce tutoriel

Télécharger les sources complètes de ce tutoriel

La solution en vidéo

Pour voir un exemple de cette application en marche, et pour consulter ce tutoriel en suivant une vidéo plutôt que de continuer sur la lecture de cet article, vous pouvez regarder la vidéo ci-dessous. Sur cette page de Channel9, la vidéo possède plusieurs options de téléchargement si vous souhaitez télécharger une version qui peut être lue sur des appareils (téléphones, tablettes, etc..) plutôt que sur un ordinateur, ou si le flux de la vidéo n’est pas optimisé pour vous.

Vue d’ensemble des Notifications Push

Le service de Notification de Push de Microsoft pour Windows Phone (MPNS) offre aux tiers développeurs un canal dédié et persistant pour envoyer des informations et des mises à jour à une application mobile à partir d’un web service. Dans le passé, une application mobile aurait eu besoin d’effectuer plusieurs requêtes au web service correspondant pour savoir s’il y a des notifications en attente. Bien que cela soit efficace, un usage fréquent de requêtes fait que l’on utilise le périphérique radio et que par conséquent nous réduisons la durée de vie de la batterie. En utilisant les Notifications Push au lieu que d’utiliser le polling (requêtage intensif vers un web service), un web service peut notifier une application de mises à jour importantes sur une base as-needed.

Quand un web service a une information à envoyer à une application, il envoie une notification au service de Notification de Push, qui à son tour route celle-ci à l’application. Selon le format de la Notification Push et de la charge liée, l’information est livrée sous forme de données brutes à l’application, les Tiles de celle-ci sont visuellement mises à jour, ou une notification toast est affichée. L’application peut alors communiquer avec un web service en utilisant son propre protocole si nécessaire.

Voici les types de Notifications Push supports par Windows Phone 7 avec quelques grandes lignes à garder en tête pour chacune.

Les notifications Tile:

Mettent à jour le Live Tile pour l’application présente sur l’écran de démarrage, changement du graphique, du titre du Tile, et affichage de l’intégration d’un compteur
Sont toujours reçues quand l’application est en marche, soyez donc prudent aux anciens Live Tiles.
Doivent avoir un poids de 80k ou moins et être téléchargées en 15 secondes ou moins.

Les notifications Raw:

Peuvent être utilisées pour n’importe quoi, mais avoir une limite de poids de 1K, sinon vous devrez fournir des URIs pour n’importe quels binaires et gérer le téléchargement séparément.
Peuvent être reçues que lorsque l’application est en marche.
Déclenchent une réaction non perceptible de l’utilisateur sur le téléphone, sauf si le code de l’application permet de le faire.

Les notifications Toast:

Contiennent un message court avec un sujet et un corps.
Si l’application n’est pas démarrée, les notifications Toast se mettront en haut de l’affichage, superposant ce qu’il y a sur l’écran.
Si l’application est en marche, les notifications Toast ne déclencheront pas de réaction perceptible de l’utilisateur sur le téléphone, sauf si le code permet de le faire.

Il y a une limite quotidienne de 500 push par URI sauf si vous téléchargez un certificat TLS pour votre compte de développeur sur AppHub.com et que vous l’utilisez pour authentifier votre WebService avec MPNS. Pour plus d’informations, consultez la procédure : Configurer un WebService sécurisé pour Windows Phone.

Créer un web service qui envoie des Notifications Push

Si vous envisagez de publier votre web service sur Windows Azure, suivez ces étapes:

Installez la dernière version du SDK de Windows Azure et inscrivez-vous pour un essai gratuit ou classique à un compte Azure.
Après installation de SDK Azure, démarrez un nouveau projet dans Visual Studio en utilisant le modèle de projet "Cloud", et sélectionnez "Windows Azure Project," en lui donnant un nom de projet.
Ajoutez un “WCF Service Web Role” à la solution Windows Azure, éditez alors le nom. Entrez un nom différent pour le Role que ce qui était entré pour le projet Windows Azure.Dans cet exemple, le rôle est nommé "PushService," qui créera un web service avec ce même nom qui sera utilisé par défaut pour son namespace.

Saisissez le nom "PushService" ici générera un namespace avec ce même nom, comme on le voit dans le code suivant.

Si vous ne planifiez pas d’utiliser Azure, suivez ces étapes:

Lancez Visual Studio et sélectionnez un projet de type "WCF" pour le langage souhaité. (C# est utilisé dans l’exemple).
Sélectionnez "WCF Service Application" comme type de projet, et entrez un nom. Dans cet exemple, le projet est nommé "PushService," lequel créé un a web service avec le nom de projet utilisé pour le namespace par défaut.

Une fois le projet chargé dans Visual Studio, ouvrez le fichier IService1.cs et effacez le contenu de la classe Service1.

Dans le fichier IService1.cs, entrez les signatures des quatre méthodes, précédées par l’attribut OperationContract:

SubscribeMyPhone, recevra un GUID représentant l’ID du téléphone qui s’inscrit pour recevoir les Notifications Push de ce service, et un objet URI représentant l’URL du service de Notification de Push de Microsoft à laquelle les Notifications Push seront relayées pour être reçues par ce téléphone.
PushRawData, recevra un message qui sera envoyé comme notification Raw à tous les téléphones qui se seront inscrits au service par un précédent appel à la méthode SubscribeMyPhone
PushToast, recevra un message qui sera envoyé comme une notification Toast à tous les téléphones qui se seront inscrits au service par un précédent appel à la méthode SubscribeMyPhone.
PushTileUpdate, recevra les paramètres définissant une mise à jour du Tile qui sera envoyé à tous les téléphones qui se seront inscrits au service par un précédent appel à la méthode SubscribeMyPhone.

Le contenu final du fichier IService1.cs après la saisie de ces méthodes sera comme suit:

C# (IService1.cs)

Code Snippet
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace PushService
{
    [ServiceContract]
    public interface IService1
    {
        [OperationContract]
        void SubscribeMyPhone(Guid phoneID, string channelURI);
        [OperationContract]
        void PushRawData(string rawMessage);
        [OperationContract]
        void PushToast(string toastTitle, string toastMessage);
        [OperationContract]
        void PushTileUpdate(string tileTitle, int tileCount, string tileImageURI);
    }
}

Dans le fichier Service1.svc.cs, nous saisirons le code qui implémente ces méthodes dans la classe par défaut, nommée Service1, qui est dans namespace par défaut « PushService ». La classe Service1 contient les implémentations des membres suivants :

SubcsriptionURIs est un dictionnaire qui suit les GUID des téléphones qui ont appelé la méthode SubsribeMyPhone et ont fourni une URI par laquelle ils peuvent recevoir des Notifications Push.
BatchingIntervalValues est un Enum qui définit différents temps d’attente qui peuvent être utilisés pour retarder une Notification Push qui sera envoyée au téléphone à partir du service de notification.
SendPushToSubscribedURIs est une méthode qui reçoit la sortie des quatres méthodes que nous avons définies dans le fichier IService1.cs, les packages dans le corps d’un paquet HTTP POST qui possède un en-tête personnalisé qui active les fonctionnalités Notification Push et envoie un paquet final pour toutes les URI définies dans le dictionnaire SubscriptionURIs. Ces URIs sont fournies par le service de Notification Push de Microsoft relayeront les messages aux téléphones destinés.
SubscribeMyPhone sera implémenté pour mettre à jour SubscripitionURIs avec les données entrantes des URIs.
PushRawData sera implémenté pour encoder les messages entrants comme un tableau de byte[] et enverra le résultat à sendPushToSubscribedURIs
PushToast sera implémenté pour encoder le message entrant dans un flux XML avec une structure spécifique que le service de Notification Push de Microsoft attendra, et enverra le résultat à sendPushToSubscribedURIs
PushTileUpdate sera implémenté pour encoder les données entrantes de type Tile Update dans un flux XML avec une structure spécifique que le service de Notification Push de Microsoft attendra, et enverra le résultat à sendPushToSubscribedURIs

Une fois terminé le fichier ressemblera à cela :

C# (Service1.svc.cs)

Code Snippet
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using System.Xml;
using System.IO;
using System.Net;
namespace PushService
{
    public class Service1 : IService1
    {
        //Custom constructor
        public Service1()
        {
            //TODO: Load from database into SubscriptionURIs here.
        }
        //Data members.
        //This tracks the devices-to-channelURI list, which gets updated by calls to
        //SubscribeMyPhone();
        private static Dictionary<Guid, Uri> SubscriptionURIs = new Dictionary<Guid, Uri>();
        //This overwrites/creates entries for each phone that wants to receive Push Notifications.
        //Note: This list is reset whenever application restarts -- in real life, you will want
        //to store this data from the SubscriptionURIs list into a database so it persists. Hence,
        //there are TODO sections in this code.
        public void SubscribeMyPhone(Guid phoneID, string channelURI)
        {
            Uri thisURI = new Uri(channelURI);
            if (SubscriptionURIs.ContainsKey(phoneID))
            {
                //update the existing URI entry for this phone, if need be
                SubscriptionURIs[phoneID] = thisURI;
            }
            else
            {
                //otherwise, add a subscription for this phone
                SubscriptionURIs.Add(phoneID, thisURI);
            }
            // TODO: Save this data in a database, otherwise it will be lost on application restart.
        }
        //Sends the received text value as a Raw notification -- which can only be received
        //while the subscribed phone app is running. Raw notifications have a size limit of 1K.
        public void PushRawData(string rawMessage)
        {
            //Encode the message as a byte[] array as the Notification Service Expects.
            System.Text.UTF8Encoding encoding = new UTF8Encoding();
            //Send this message to all subscribed devices.
            sendPushToSubscribedURIs(encoding.GetBytes(rawMessage), "raw");
        }
        //Sends a Toast notification, using the arguments to define the notification's Title and Message.
        public void PushToast(string ToastTitle, string ToastMessage)
        {
            //Use XMLWriter to construct notification structure/contents.
            MemoryStream myStream = new MemoryStream();
            XmlWriter myWriter = XmlWriter.Create(myStream);
            myWriter.WriteStartDocument();
            myWriter.WriteStartElement("wp", "Notification", "WPNotification");
            myWriter.WriteStartElement("wp", "Toast", "WPNotification");
            myWriter.WriteStartElement("wp", "Text1", "WPNotification");
            myWriter.WriteValue(ToastTitle);
            myWriter.WriteEndElement();
            myWriter.WriteStartElement("wp", "Text2", "WPNotification");
            myWriter.WriteValue(ToastMessage);
            myWriter.WriteEndElement();
            myWriter.WriteEndElement();
            myWriter.WriteEndDocument();
            //Transfer Xml Outpute from myWriter's buffer to myStream.
            myWriter.Flush();
            //Send this message to all subscribed devices.
            sendPushToSubscribedURIs(myStream.ToArray(), "toast");
        }
        //Sends the specified Tile Title, Tile Count, and Tile Image URL as a Tile
        //notification, which can only be received while the subscribed phone app is
        //NOT running. The maximum allowed size of the Tile image is 80kb, with a
        //maximum download time of 15 seconds. Only Tile image URLs from the domains listed in
        //Push Client's ListOfAllowedDomains will be accepted. The Tile Title will overwrite
        //the text that labels the tile on the phone's menu, and the Tile Count is
        //shown as a numeric value displayed on top of the Tile image, visually.
        public void PushTileUpdate(string TileTitle, int TileCount, string TileImageURL)
        {
            // Use XmlWriter to construct notification structure/contents.
            MemoryStream myStream = new MemoryStream();
            XmlWriter myWriter = XmlWriter.Create(myStream);
            myWriter.WriteStartDocument();
            myWriter.WriteStartElement("wp", "Notification", "WPNotification");
            myWriter.WriteStartElement("wp", "Tile", "WPNotification");
            myWriter.WriteStartElement("wp", "BackgroundImage", "WPNotification");
            myWriter.WriteValue(TileImageURL);
            myWriter.WriteEndElement();
            myWriter.WriteStartElement("wp", "Count", "WPNotification");
            myWriter.WriteValue(TileCount);
            myWriter.WriteEndElement();
            myWriter.WriteStartElement("wp", "Title", "WPNotification");
            myWriter.WriteValue(TileTitle);
            myWriter.WriteEndElement();
            myWriter.WriteEndElement();
            myWriter.WriteEndDocument();
            //Transfer Xml output from myWriter's buffer to myStream.
            myWriter.Flush();
            //Send this message to all subscribed devices.
            sendPushToSubscribedURIs(myStream.ToArray(), "tile");
        }
        //This enum gives symbolic names to the numeric values used to "batch together"
        //push notifications according to the specified time intervals. You can send them
        //immediately, within 450 seconds, or within 900 seconds. Allowing the Notification
        //Service to batch notifications will let the service group messages together with
        //notifications from other apps to save phone battery life.
        public enum BatchingIntervalValues
        {
            ImmediateTile = 1,
            ImmediateToast = 2,
            ImmediateRaw = 3,
            Wait450SecondsTile = 11,
            Wait450SecondsToast = 12,
            Wait450SecondsRaw = 13,
            Wait900SecondsTile = 21,
            Wait900SecondsToast = 22,
            Wait900SecondsRaw = 23
        }
 
        //Iterates through SubscriptionURIs, sending the constructed Push Notification to
        //of the notification, which is every subscribed device via the Microsoft
        //Push Notification Service. The payload passed in, is packaged into an HTTP POST
        //message that defines headers containing the notification type and batching interval.
        private static void sendPushToSubscribedURIs(byte[] pushPayload, string notificationType)
        {
            //Iterate through SubscriptionURIs
            foreach (var thisURI in SubscriptionURIs.Values)
            {
                //Add headers to HTTP Post message.
                var myRequest = (HttpWebRequest)WebRequest.Create(thisURI); // Push Client's channelURI
                myRequest.Method = WebRequestMethods.Http.Post;
                myRequest.ContentType = "text/xml";
                myRequest.ContentLength = pushPayload.Length;
    
                // gives this message a unique ID
                myRequest.Headers.Add("X-MessageID", Guid.NewGuid().ToString());
                //Customize or exclude the X-WindowsPhone-Target header based on the notification type.
                switch (notificationType)
                {
                    case "toast":
                    myRequest.Headers["X-WindowsPhone-Target"] = "toast";
                    myRequest.Headers.Add("X-NotificationClass",
                    ((int)BatchingIntervalValues.ImmediateToast).ToString());
                    break;
                    case "tile":
                    myRequest.Headers["X-WindowsPhone-Target"] = "token";
                    myRequest.Headers.Add("X-NotificationClass",
                    ((int)BatchingIntervalValues.ImmediateTile).ToString());
                    break;
                    case "raw":
                    myRequest.Headers.Add("X-NotificationClass",
                    ((int)BatchingIntervalValues.ImmediateRaw).ToString());
                    //Raw notifications do not specify a value for the X-WindowsPhone-Target header.
                    break;
                }
                //Merge headers with payload.
                using (var requestStream = myRequest.GetRequestStream())
                {
                    requestStream.Write(pushPayload, 0, pushPayload.Length);
                }
                //Send notification to this phone!
                var response = (HttpWebResponse)myRequest.GetResponse();
            }
        }
    }
}

Visual Basic (Service1.svc.vb)

Code Snippet
Imports System.Collections.Generic
Imports System.Linq
Imports System.Runtime.Serialization
Imports System.ServiceModel
Imports System.ServiceModel.Web
Imports System.Text
Imports System.Xml
Imports System.IO
Imports System.Net
Namespace PushService
    Public Class Service1
        Implements IService1
        'Custom constructor
        'TODO: Load from database into SubscriptionURIs here.
        Public Sub New()
        End Sub
        'Data members.
        'This tracks the devices-to-channelURI list, which gets updated by calls to
        'SubscribeMyPhone();
        Private Shared SubscriptionURIs As New Dictionary(Of Guid, Uri)()
        'This overwrites/creates entries for each phone that wants to receive Push Notifications.
        'Note: This list is reset whenever application restarts -- in real life, you will want
        'to store this data from the SubscriptionURIs list into a database so it persists. Hence,
        'there are TODO sections in this code.
        Public Sub SubscribeMyPhone(phoneID As Guid, channelURI As String)
            Dim thisURI As New Uri(channelURI)
            If SubscriptionURIs.ContainsKey(phoneID) Then
                'update the existing URI entry for this phone, if need be
                SubscriptionURIs(phoneID) = thisURI
            Else
                'otherwise, add a subscription for this phone
                SubscriptionURIs.Add(phoneID, thisURI)
            End If
            ' TODO: Save this data in a database, otherwise it will be lost on application restart.
        End Sub
        'Sends the received text value as a Raw notification -- which can only be received
        'while the subscribed phone app is running. Raw notifications have a size limit of 1K.
        Public Sub PushRawData(rawMessage As String)
            'Encode the message as a byte[] array as the Notification Service Expects.
            Dim encoding As System.Text.UTF8Encoding = New UTF8Encoding()
            'Send this message to all subscribed devices.
            sendPushToSubscribedURIs(encoding.GetBytes(rawMessage), "raw")
        End Sub
        'Sends a Toast notification, using the arguments to define the notification's Title and Message.
        Public Sub PushToast(ToastTitle As String, ToastMessage As String)
            'Use XMLWriter to construct notification structure/contents.
            Dim myStream As New MemoryStream()
            Dim myWriter As XmlWriter = XmlWriter.Create(myStream)
            myWriter.WriteStartDocument()
            myWriter.WriteStartElement("wp", "Notification", "WPNotification")
            myWriter.WriteStartElement("wp", "Toast", "WPNotification")
            myWriter.WriteStartElement("wp", "Text1", "WPNotification")
            myWriter.WriteValue(ToastTitle)
            myWriter.WriteEndElement()
            myWriter.WriteStartElement("wp", "Text2", "WPNotification")
            myWriter.WriteValue(ToastMessage)
            myWriter.WriteEndElement()
            myWriter.WriteEndElement()
            myWriter.WriteEndDocument()
            'Transfer Xml Outpute from myWriter's buffer to myStream.
            myWriter.Flush()
            'Send this message to all subscribed devices.
            sendPushToSubscribedURIs(myStream.ToArray(), "toast")
        End Sub
        'Sends the specified Tile Title, Tile Count, and Tile Image URL as a Tile
        'notification, which can only be received while the subscribed phone app is
        'NOT running. The maximum allowed size of the Tile image is 80kb, with a
        'maximum download time of 15 seconds. Only Tile image URLs from the domains listed in
        'Push Client's ListOfAllowedDomains will be accepted. The Tile Title will overwrite
        'the text that labels the tile on the phone's menu, and the Tile Count is
        'shown as a numeric value displayed on top of the Tile image, visually.
        Public Sub PushTileUpdate(TileTitle As String, TileCount As Integer, TileImageURL As String)
            ' Use XmlWriter to construct notification structure/contents.
            Dim myStream As New MemoryStream()
            Dim myWriter As XmlWriter = XmlWriter.Create(myStream)
            myWriter.WriteStartDocument()
            myWriter.WriteStartElement("wp", "Notification", "WPNotification")
            myWriter.WriteStartElement("wp", "Tile", "WPNotification")
            myWriter.WriteStartElement("wp", "BackgroundImage", "WPNotification")
            myWriter.WriteValue(TileImageURL)
            myWriter.WriteEndElement()
            myWriter.WriteStartElement("wp", "Count", "WPNotification")
            myWriter.WriteValue(TileCount)
            myWriter.WriteEndElement()
            myWriter.WriteStartElement("wp", "Title", "WPNotification")
            myWriter.WriteValue(TileTitle)
            myWriter.WriteEndElement()
            myWriter.WriteEndElement()
            myWriter.WriteEndDocument()
            'Transfer Xml output from myWriter's buffer to myStream.
            myWriter.Flush()
            'Send this message to all subscribed devices.
            sendPushToSubscribedURIs(myStream.ToArray(), "tile")
        End Sub
        'This enum gives symbolic names to the numeric values used to "batch together"
        'push notifications according to the specified time intervals. You can send them
        'immediately, within 450 seconds, or within 900 seconds. Allowing the Notification
        'Service to batch notifications will let the service group messages together with
        'notifications from other apps to save phone battery life.
        Public Enum BatchingIntervalValues
            ImmediateTile = 1
            ImmediateToast = 2
            ImmediateRaw = 3
            Wait450SecondsTile = 11
            Wait450SecondsToast = 12
            Wait450SecondsRaw = 13
            Wait900SecondsTile = 21
            Wait900SecondsToast = 22
            Wait900SecondsRaw = 23
        End Enum
        'Iterates through SubscriptionURIs, sending the constructed Push Notification to
        'of the notification, which is every subscribed device via the Microsoft
        'Push Notification Service. The payload passed in, is packaged into an HTTP POST
        'message that defines headers containing the notification type and batching interval.
        Private Shared Sub sendPushToSubscribedURIs(pushPayload As Byte(), notificationType As String)
            'Iterate through SubscriptionURIs
            For Each thisURI As var In SubscriptionURIs.Values
                'Add headers to HTTP Post message.
                Dim myRequest = DirectCast(WebRequest.Create(thisURI), HttpWebRequest)
                ' Push Client's channelURI
                myRequest.Method = WebRequestMethods.Http.Post
                myRequest.ContentType = "text/xml"
                myRequest.ContentLength = pushPayload.Length
                ' gives this message a unique ID
                myRequest.Headers.Add("X-MessageID", Guid.NewGuid().ToString())
                'Customize or exclude the X-WindowsPhone-Target header based on the notification type.
                Select Case notificationType
                    Case "toast"
                        myRequest.Headers("X-WindowsPhone-Target") = "toast"
myRequest.Headers.Add("X-NotificationClass",
CInBatchingIntervalValues.ImmediateToast).ToString())
                        Exit Select
                    Case "tile"
                        myRequest.Headers("X-WindowsPhone-Target") = "token"
myRequest.Headers.Add("X-NotificationClass",
CIntBatchingIntervalValues.ImmediateTile).ToString())
                        Exit Select
                    Case "raw"
                        myRequest.Headers.Add("X-NotificationClass",
                        (CIntBatchingIntervalValues.ImmediateRaw).ToString())
                        'Raw notifications do not specify a value for the X-WindowsPhone-Target header.
                        Exit Select
                End Select
                'Merge headers with payload.
                Using requestStream = myRequest.GetRequestStream()
                    requestStream.Write(pushPayload, 0, pushPayload.Length)
                End Using
                'Send notification to this phone!
                Dim response = DirectCast(myRequest.GetResponse(), HttpWebResponse)
            Next
        End Sub
    End Class
End Namespace

Comme dernière étape, il faut inclure les fichiers .png qui seront utilisés sous forme de graphiques Tile pour l’application mobile. Vous pouvez utiliser les fichiers .png inclus dans l’exemple du code téléchargeable ou créez les vôtres. Les Tiles doivent être de 80KB ou plus petit en poids et avoir une résolution de 173 x 173 pixels. Ajoutez les fichiers .png au projet WebService en faisant un clic droit sur le Web Service Role et en sélectionnant « Add Existing Item ». Une fois visible dans le Solution Explorer, cliquez sur les fichiers .png et dans le panneau des propriétés définissez la valeur de la propriété « Copy to output Directory » à « Always »

Le web service est maintenant complet et prêt à être publié. Si vous n’êtes pas intéressé par la publication sur Azure, vous pouvez exécuter ce service sur n’importe quel serveur IIS qui possède une connexion à Internet (pour contacter MPNS) et peut être atteint par votre émulateur ou téléphone Windows Phone 7.

Publier votre web service sur Windows Azure

Inscrivez-vous pour un essai gratuit ou classique à un compte Azure. Une fois réalisé, connectez-vous à http://windows.azure.com avec le LiveID associé à votre compte Azure et assurez-vous que vous avez accès aux outils de gestion.
En supposant que vous ayez suivi les instructions de la création du projet ci-dessus, vous serez en mesure de faire un clic droit sur le projet Azure dans le Solution Explorer (avec une icône représentant un globe) et sélectionnez « Publish » à partir du menu, comme indiqué ici :
La fenêtre de déploiement s’affichera. Sous la liste déroulante « Credentials » sélectionnez "Add," comme montré ici:
Dans la fenêtre d’authentification du projet Windows Azure faites défiler vers le bas la liste des identifications, et sélectionnez “Create”. Donner un nom significatif à ces informations d’identification, elles peuvent être réutilisées à l’avenir pour toute activité de publication pour n’importe quel service hébergé sur votre compte. Cliquez sur le lien « copy the full path » du fichier d’identification que vous avez créé puis cliquez à nouveau sur le lien pour visiter le portail Windows Azure sur internet avec le chemin du fichier du certificat dans votre presse papier.
Dans le portail Windows Azure, entrez le menu « Management Certificates » et dans la section « Hosted Services, Storage Accounts & CDN ». Cliquez sur le bouton « Add Certificate » en haut du ruban de navigation. Cliquez sur « Browse » et quand l’on vous demande de sélectionner un certificat à ajouter, collez alors le chemin complet du certificat que vous avez créé à l’étape 4 et cliquez sur « OK ». Cela télécharge le nouveau certificat et génère un Subscription ID qui est associé au certificat. Copiez le Subscription ID dans votre presse papier et revenez à Visual Studio.
Dans Visual Studio, collez le Subscription ID dans le troisième champ de la fenêtre de gestion d’authentification du projet Windows Azure, où un exemple d’ID est déjà entré, et cliquez sur « OK » pour sauvegarder les informations authentifiées
Retournez au portail Windows Azure, cliquez sur « Storage Accounts » dans le menu gauche, et cliquez sur « New Storage Account » à partir du haut du ruban. Donnez un nom significatif à votre compte de stockage. Ce compte peut être réutilisé pour d’autres services hébergés sur Windows Azure. Choisissez un centre de données qui est situé dans une zone souhaitée, et cliquez sur « Create » pour créer le nouveau compte de stockage.
Dans le portail Windows Azure, cliquez sur “Hosted Services” dans le menu gauche, puis cliquez sur “New Hosted Service” en haut du ruban. Entrez un nom significatif ainsi que le préfixe d’URL pour ce service.
Ceux-ci seront uniques à ce web service. Choisissez le même centre de données où le compte de stockage a été créé (permet d’éviter de payer des frais de trafic entrants/sortants pour le trafic croisant les centres de données) et sélectionnez l’option « Do Not Deploy ». Cliquez sur « OK » quand cela est fait pour créer un nouveau service hébergé.
Retournez dans Visual Studio, fermez la fenêtre de projet de déploiement de Windows Azure et rouvrez-la en faisant un clic droit sur le projet Azure et en sélectionnant à nouveau « Publish ». Cette fois, sélectionnez votre nouvelle identification à partir de la liste déroulante de Credentials ». Visual Studio chargera le « Storage Account » et le « Hosted Service Account » qui sont associés avec ce certificat de Subscription ID. Changez l’environnement de déploiement en « Production ». Cliquez sur « OK » pour publier votre web service sur Windows Azure. Cette étape peut prendre plusieurs minutes. Le journal d’activité de Windows Azure montrera l’état en cours pendant que le service est publié et initialisé.
Quand l’opération est terminée, le web service sera accessible à l’url du site listé par le journal d’activité de Windows Azure. Cette URL correspond au préfixe URL que vous avez entré pour le service hébergé. Ajoutez le nom du fichier .svc à la fin de l’url pour voir la déclaration du WDSL pour votre web service (par exemple http://my_url_prefix.cloudapp.net/Service1.svc). Votre service fonctionne sur Windows Azure et est prêt à être consommé.

Créer une application mobile de réception de Push

Assurez-vous que le Push Service, le web service que nous avons créé plus tôt, a été déployé et possède une connexion Internet afin qu’il puisse relayer les messages au service de notification de push de Microsoft. Dans la section précédente, nous avons atteint cet objectif en publiant sur Windows Azure.

Lancez Visual Studio et démarrez un projet de type « Silverlight for Windows Phone ». Puis créez une interface utilisateur (UI) qui possèdera les éléments suivants :

Un TextBlock nommé subscriptionStatus dont le texte est défini par « Checking subscription status…. »
Un TextBlock nommé rawmessage, avec son attribut TextWrapping défini à la valeur « Wrap ». Donnez à la propriété Text la valeur « Waiting to Receive Raw Notification »
Un TextBlock nommé channelURITextBlock, avec son attribut TextWrapping défini à la valeur « Wrap ». Donnez à la propriété Text la valeur « This App’s ChannelUri : »

Une disposition de ces éléments est proposée et fournie ci-dessous. Ici, un quatrième TextBlock est affiché avec des instructions de test et de déploiement qui sont en bleu clair pour utiliser cette application. Cela est pour vous aider à exécuter l’exemple du code qui s’appuie sur la connexion internet, un web service, et les Push Notifications envoyées seulement après une exécution initiale de l’application sur ce téléphone. De plus, à cause de ses dépendances, l’exemple de ce projet a besoin de plusieurs modifications avant qu’il puisse s’exécuter sur votre téléphone. Ce TextBlock n’est pas mentionné ailleurs dans cet article ou dans le code lui-même.

Le document final en XAML contenant ces éléments ressemble à ceci:

XAML (MainPage.xaml)

Code Snippet
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    Grid.RowDefinitions>
    
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="PushDemo" Text="JoMul Push Demo" Style="{StaticResource PhoneTextNormalStyle}"/>
    StackPanel>
    
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="12,460,0,0" Name="subscriptionStatus" Text="Checking subscription status..." VerticalAlignment="Top" Width="438" />
        <TextBlock Height="380" HorizontalAlignment="Left" Margin="12,77,0,0" Name="instructions" Text="To use:
                1) Deploy Push Service to an internet-accessible host (such as Azure).
                2) In this project (Push Client) right-click on ServiceReference1 in Solution
                Explorer, then click "Configure Service Reference", updating the address with Push Service's new WSDL URL.
                3) Edit ListOfAllowedDomains in MainPage.xaml.cs to include the domain that now hosts Push Service.
                4) Launch this app (Push Client) on your phone so it registers to receive notifications.
                5) On your PC, launch Visual Studio Command Prompt, and type WCFTestClient. In the client, enter Push Service's WSDL URL, then invoke
                the methods that send notifications to your phone!" VerticalAlignment="Top" Width="426" TextWrapping="Wrap"
                TextAlignment="Left" Foreground="Cyan" Visibility="Visible" />
        <TextBlock Height="134" HorizontalAlignment="Left" Margin="12,556,0,0" Name="channelURITextBlock" Text="This App's ChannelURI: " VerticalAlignment="Top" Width="426" TextWrapping="Wrap" />
        <TextBlock x:Name="PageTitle" Text="Push Client" Margin="12,-7,-3,613" Style="{StaticResource PhoneTextTitle1Style}"/>
        <TextBlock Height="70" HorizontalAlignment="Left" Margin="12,493,0,0" Name="rawmessage" Text="Waiting to receive Raw notification." VerticalAlignment="Top" Width="414" TextWrapping="Wrap" />
    Grid>
Grid>

Dans le Solution Explorer, faites un clic droit sur “References” et sélectionnez « Add Service Reference ». Entrez l’Url pour le Push Service du fichier .svc (par exemple : http://your_url_prefix.doudapp.net/Service1.svc) et cliquez sur « Go ». Une fois que Visual Studio a confirmé avoir découvert le Push Service, remarquez que le namespace qui est assigné pour la référence au web service, qui est « ServiceReference1 » par défaut, enfin cliquez sur « OK ». Le Push Service peut maintenant être accessible via le namespace ServiceReference1 dans le code de l’application.

Ouvrez le fichier MainPage.xaml.cs et ajoutez les références aux namespace suivants: System.IO.IsolatedStorage, System.IO, Microsoft.phone.Notification ainsi que System.Collections.objectModel.

En haut de la classe MainPage, ajoutez les membres de données suivants:

Un Guid nommé deviceID que nous utiliserons pour enregistrer un identifiant unique pour ce téléphone.
Un « ServiceReference1.Service1Client » nommé myClient que nous utiliserons pour accéder au Push Service. Si vous changez le nom par défaut du namespace du Service Reference ou du Push Service, ce type aura un nom différent. Dans cet article, les valeurs par défaut sont supposées.
Un objet HttpNotificationChannel nommé myPushChannel. C’est le canal qui va écouter les Notifications Push qui sont relayées du MPNS.

Maintenant, nous allons implémenter quelques méthodes qui préparent l’application à la réception des Notifications Push.

Dans la méthode MainPage(), nous vérifions le stockage isolé du téléphone ( stockage interne qui est accessible seulement par cette application) pour une valeur de clé « DeviceID » . Si une valeur est trouvée, elle est chargée à partir de l’Isolated Storage et est assignée au membre de données deviceID. Autrement, une nouvelle valeur Guid est générée, assignée et stockée.
Toujours dans la méthode MainPage(), nous vérifions si il existe une valeur de type HttpNotificationChannel sous la clé « myChannel ». Si elle n’existe pas, elle est créée et stockée ici, alors les fonctions de traitement de l’évènement sont attachées. Le canal de communication est ouvert, celui qui demandera une nouvelle attribution de canal URI du MPNS, à laquelle les Notifications Push peuvent être reçues par ce canal. Si ce canal existait précédemment, nous attacherons tout simplement les fonctions de gestion d’événements, et passerons sur le canal existant du Push Service.
Une méthode nommée attachHandlerFunctions() est implémentée qui spécifie que les fonctions déléguées recevront le callback quand certaines fonctions se seront déclenchées. L’évènement ErrorOccured se déclenche que si l’origine d’une exception est levée dans la méthode myPushChannel. L’événement HttpNotificationReceived se déclenche que lorsque qu’une Raw Notification est reçue. L’événement ChannelUriUpdated se déclenche lorsque le MPNS assigne ou met à jour une nouvelle URI pour la méthode myPushChannel. Et pour finir, un évènement sur MyClient nommé SubscribeMyPhoneCompleted est géré. Cet événement se déclenche quand un appel à la méthode SubscribeMyPhone se termine normalement. Remarquez que vous n’avez pas eu à générer cet événement. Il a été généré automatiquement lorsque vous avez ajouté une référence vers Push Service.

Par la suite, nous devons implémenter les fonctions déléguées que nous assignerons pour gérer les événements spécifiés dans la méthode attachHandlerFunctions() :

La fonction myPushChannel_ErrorOccured sera simplement un message d’erreur affiché sur l’écran en utilisant le TextBlock susbcriptionStatus.
La fonction myPushChannel_HttpNotificationReceived décodera la Notification Push de type Raw en utilisant un StreamReader et l’affichera à l’écran en utilisant le TextBlock rawmessage. Cependant, à cause du déclenchement des événements de Push dans le thread de notification, la mise à jour de rawmessage est traitée avec la méthode BeginInvoke() du Dispatcher
La fonction myClient_SubscribeMyPhoneCompleted affiche un message quand le téléphone a chargé normalement les valeurs de deviceID et de ChannelURI de l’application dans le Push Service en affichant la chaine de caractère « Subscribed ! » dans le TextBlock subscriptionStatus.
myPushChannel_ChannelUriUpdated est la fonction la plus complexe. Ici, l’application vérifie et assure que myPushChannel peut recevoir la Notification Push même quand l’application ne fonctionne pas en vérifiant les valeurs IsShellTileBound et IsShellToastBound. Si ces valeurs sont « False », l’application lie le canal de communication au shell de sorte à ce que les notifications peuvent être reçues quand l’application ne fonctionne pas, en passant une liste des domaines autorisés à envoyer des mises à jour. Ici, le domaine sur lequel nous avons publié le Push Service est spécifié (e.g. http://your_url_prefix.cloudapp.net). La récupération d’une URI sur le canal est notée à l’écran en utilisant une fois encore la méthode BeginInvoke() du Dispatcher, et l’appel à la méthode SubscribeMyPhone() assure que cette URI est connue par le Push Service.

Maintenant que nous avons terminé, la page MainPage.xaml.cs doit ressembler à ceci:

C# (MainPage.xaml.cs)

Code Snippet
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
//added
using System.IO.IsolatedStorage;
using System.IO;
using Microsoft.Phone.Notification;
using System.Collections.ObjectModel;
namespace Push_Client_Example
{
    public partial class MainPage : PhoneApplicationPage
    {
        //Data members for this class
        //A unique ID for your phone, saved to internal memory
        Guid deviceID;
        //Add a reference to your deployed Push Service URL and name it ServiceReference1
        //and this line will compile. In Solution Explorer, Right-click References,
        //then click "Add Service Reference," then enter the URL for the SVC file
        //for the Push Service and click "Go." Verify that the
        //Push Service's four methods are indeed exposed then click "OK."
        ServiceReference1.Service1Client myClient = new ServiceReference1.Service1Client();
        //URI for this app's notification channel.
        HttpNotificationChannel myPushChannel;
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            //First, generate a GUID on this phone and save it; reuse if it exists to
            //keep consistent with service's data.
            if (IsolatedStorageSettings.ApplicationSettings.Contains("DeviceId"))
            {
                //load existing
                deviceID = (Guid)IsolatedStorageSettings.ApplicationSettings["DeviceId"];
            }
            else
            {
                //generate new ID
                deviceID = Guid.NewGuid();
                IsolatedStorageSettings.ApplicationSettings["DeviceId"] = deviceID;
            }
            //Next, create a notification channel which will have its own URI that the
            //web service will need to know. We're naming the channel for this
            //app "myChannel." Channels need only be created once per app;
            //if the URI ever changes, the ChannelUriUpdated event will fire. This
            //event also fires when the channel is created for the first time.
            myPushChannel = HttpNotificationChannel.Find("myChannel");
            //check to see if this channel has already been created; if so, reuse
            if (myPushChannel == null)
            {
                rawmessage.Text += " Channel was null.";
                //This channel needs to be created. ChannelUriUpdated will fire upon completion.
                myPushChannel = new HttpNotificationChannel("myChannel"); //create, then attach delegates, then Open()
                attachHandlerFunctions();
                myPushChannel.Open(); // will not fire ChannelUriUpdated if no handler is wired up first!
            }
            else
            {
                rawmessage.Text += " Channel was found!";
                //ChannelUriUpdated is not going to fire. Call subscribing method on
                //web service. Attach delegates.
                attachHandlerFunctions();
                myClient.SubscribeMyPhoneAsync(deviceID, myPushChannel.ChannelUri.ToString());
            }
        }
        void attachHandlerFunctions()
        {
            //attaches delegates to push channel events
            //if error, print onscreen
            myPushChannel.ErrorOccurred += new EventHandler(myPushChannel_ErrorOccurred);
            //After call to SubscribeMyPhone completes, notify of success
            myClient.SubscribeMyPhoneCompleted += new EventHandler(myClient_SubscribeMyPhoneCompleted);
            //ChannelUriUpdated fires when channel is first created or the channel URI changes
            myPushChannel.ChannelUriUpdated += new EventHandler(myPushChannel_ChannelUriUpdated);
            //Handle raw push notifications, which are received only while app is running.
            myPushChannel.HttpNotificationReceived += new EventHandler(myPushChannel_HttpNotificationReceived);
        }
        void myPushChannel_HttpNotificationReceived(object sender, HttpNotificationEventArgs e)
        {
            //Fires from shell thread, so updates to UI have to use dispatcher's
            //BeginInvoke() method. The body of the notification is a stream,
            //per the MPNS standard, but we know it's just text per our web
            //service design, so here we just decode, and display.
            Deployment.Current.Dispatcher.BeginInvoke(() =>
            {
                //this will fire in UI thread
                StreamReader myReader = new StreamReader(e.Notification.Body);
                rawmessage.Text = "Received Raw Notification: " + myReader.ReadToEnd();
            });
        }
        void myPushChannel_ChannelUriUpdated(object sender, NotificationChannelUriEventArgs e)
        {
            //also fires in notification thread. There are a couple things we want to do
            //here, once we know we have a valid channel from MPNS.
            // 1) Make sure phone's shell knows this channel is authorized to receive Tile
            //updates when app is not running.
            if (myPushChannel.IsShellTileBound == false)
            {
                var ListOfAllowedDomains = new Collection {
//Lists domains that can send tile updates and so forth as push notifications.
//Only these authorized domains will be allowed by the shell to
//push new tiles to the phone
new Uri(@"http://YOUR WEB SERVICE'S DOMAIN GOES HERE")
//e.g. if you published a webservice at http://foo.com/service1.svc -- put "http://foo.com" here.
};
                //Register this channel with the shell, pass on authorized
                //domain in way method expects
                myPushChannel.BindToShellTile(ListOfAllowedDomains);
            }
            //2) Make sure phone's shell knows this channel is authorized to receive
            //Toast messages when app is not running
            if (myPushChannel.IsShellToastBound == false)
            {
                myPushChannel.BindToShellToast();
            }
            //3) Show that this event fired onscreen.
            Deployment.Current.Dispatcher.BeginInvoke(() =>
            {
                rawmessage.Text = "uri updated";
            });
            //4) Pass the new ChannelUri on to the subscription service.
            myClient.SubscribeMyPhoneAsync(deviceID, e.ChannelUri.ToString());
        }
        void myClient_SubscribeMyPhoneCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
        {
            //Handles completion of call to SubscribeMyPhone() on web service
            if (e.Error == null)
            {
                // no server-side error occurred
                subscriptionStatus.Text = "Subscribed!";
            }
            else
            {
                //show error onscreen
                subscriptionStatus.Text = e.Error.Message;
            }
            //As a last step, since we know at this point that we will have
            //a valid ChannelUri, print its value onscreen. Don't do this in real
            //life, obviously. Here, it's just to show how MPNS works.
            channelURITextBlock.Text = myPushChannel.ChannelUri.ToString();
        }
        void myPushChannel_ErrorOccurred(object sender, NotificationChannelErrorEventArgs e)
        {
            //handles channel error caused from indirect exception
            subscriptionStatus.Text = e.Message;
        }
    }
}

Visual Basic (MainPage.xaml.vb)

Code Snippet
Imports System.Collections.Generic
Imports System.Linq
Imports System.Net
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports Microsoft.Phone.Controls
'added
Imports System.IO.IsolatedStorage
Imports System.IO
Imports Microsoft.Phone.Notification
Imports System.Collections.ObjectModel
Namespace Push_Client_Example
    Partial Public Class MainPage
        Inherits PhoneApplicationPage
        'Data members for this class
        'A unique ID for your phone, saved to internal memory
        Private deviceID As Guid
        'Add a reference to your deployed Push Service URL and name it ServiceReference1
        'and this line will compile. In Solution Explorer, Right-click References,
        'then click "Add Service Reference," then enter the URL for the SVC file
        'for the Push Service and click "Go." Verify that the
        'Push Service's four methods are indeed exposed then click "OK."
        Private myClient As New ServiceReference1.Service1Client()
        'URI for this app's notification channel.
        Private myPushChannel As HttpNotificationChannel
        ' Constructor
        Public Sub New()
            InitializeComponent()
            'First, generate a GUID on this phone and save it; reuse if it exists to
            'keep consistent with service's data.
            If IsolatedStorageSettings.ApplicationSettings.Contains("DeviceId") Then
                'load existing
                deviceID = CType(IsolatedStorageSettings.ApplicationSettings("DeviceId"), Guid)
            Else
                'generate new ID
                deviceID = Guid.NewGuid()
                IsolatedStorageSettings.ApplicationSettings("DeviceId") = deviceID
            End If
            'Next, create a notification channel which will have its own URI that the
            'web service will need to know. We're naming the channel for this
            'app "myChannel." Channels need only be created once per app;
            'if the URI ever changes, the ChannelUriUpdated event will fire. This
            'event also fires when the channel is created for the first time.
            myPushChannel = HttpNotificationChannel.Find("myChannel")
            'check to see if this channel has already been created; if so, reuse
            If myPushChannel Is Nothing Then
                rawmessage.Text += " Channel was null."
                'This channel needs to be created. ChannelUriUpdated will fire upon completion.
                myPushChannel = New HttpNotificationChannel("myChannel")
                'create, then attach delegates, then Open()
                attachHandlerFunctions()
                ' will not fire ChannelUriUpdated if no handler is wired up first!
                myPushChannel.Open()
            Else
                rawmessage.Text += " Channel was found!"
                'ChannelUriUpdated is not going to fire. Call subscribing method on
                'web service. Attach delegates.
                attachHandlerFunctions()
                myClient.SubscribeMyPhoneAsync(deviceID, myPushChannel.ChannelUri.ToString())
            End If
        End Sub
        Private Sub attachHandlerFunctions()
            'attaches delegates to push channel events
            'if error, print onscreen
            myPushChannel.ErrorOccurred += New EventHandler(Of NotificationChannelErrorEventArgs)(AddressOf myPushChannel_ErrorOccurred)
            'After call to SubscribeMyPhone completes, notify of success
myClient.SubscribeMyPhoneCompleted += New EventHandler(Of System.ComponentModel.AsyncCompletedEventArgs)(AddressOf
myClient_SubscribeMyPhoneCompleted)
            'ChannelUriUpdated fires when channel is first created or the channel URI changes
myPushChannel.ChannelUriUpdated += New EventHandler(Of NotificationChannelUriEventArgs)(AddressOf
myPushChannel_ChannelUriUpdated)
            'Handle raw push notifications, which are received only while app is running.
myPushChannel.HttpNotificationReceived += New EventHandler(Of HttpNotificationEventArgs)(AddressOf
myPushChannel_HttpNotificationReceived)
        End Sub
        Private Sub myPushChannel_HttpNotificationReceived(sender As Object, e As HttpNotificationEventArgs)
            'Fires from shell thread, so updates to UI have to use dispatcher's
            'BeginInvoke() method. The body of the notification is a stream,
            'per the MPNS standard, but we know it's just text per our web
            'service design, so here we just decode, and display.
            Deployment.Current.Dispatcher.BeginInvoke(Function()
                                                          'this will fire in UI thread
                                                          Dim myReader As New StreamReader(e.Notification.Body)
                                                          rawmessage.Text = "Received Raw Notification: " & myReader.ReadToEnd()
                                                      End Function)
        End Sub
        Private Sub myPushChannel_ChannelUriUpdated(sender As Object, e As NotificationChannelUriEventArgs)
            'also fires in notification thread. There are a couple things we want to do
            'here, once we know we have a valid channel from MPNS.
            ' 1) Make sure phone's shell knows this channel is authorized to receive Tile
            'updates when app is not running.
            If myPushChannel.IsShellTileBound = False Then
                'Lists domains that can send tile updates and so forth as push notifications.
                'Only these authorized domains will be allowed by the shell to
                'push new tiles to the phone
                'e.g. if you published a webservice at http://foo.com/service1.svc -- put "http://foo.com" here.
                Dim ListOfAllowedDomains = New Collection(Of Uri)() From { _
                New Uri("http://YOUR WEB SERVICE'S DOMAIN GOES HERE") _
                }
                'Register this channel with the shell, pass on authorized
                'domain in way method expects
                myPushChannel.BindToShellTile(ListOfAllowedDomains)
            End If
            '2) Make sure phone's shell knows this channel is authorized to receive
            'Toast messages when app is not running
            If myPushChannel.IsShellToastBound = False Then
                myPushChannel.BindToShellToast()
            End If
            '3) Show that this event fired onscreen.
            Deployment.Current.Dispatcher.BeginInvoke(Function()
                                                          rawmessage.Text = "uri updated"
                                                      End Function)
            '4) Pass the new ChannelUri on to the subscription service.
            myClient.SubscribeMyPhoneAsync(deviceID, e.ChannelUri.ToString())
        End Sub
        Private Sub myClient_SubscribeMyPhoneCompleted(sender As Object, e As System.ComponentModel.AsyncCompletedEventArgs)
            'Handles completion of call to SubscribeMyPhone() on web service
            If e.[Error] Is Nothing Then
                ' no server-side error occurred
                subscriptionStatus.Text = "Subscribed!"
            Else
                'show error onscreen
                subscriptionStatus.Text = e.[Error].Message
            End If
            'As a last step, since we know at this point that we will have
            'a valid ChannelUri, print its value onscreen. Don't do this in real
            'life, obviously. Here, it's just to show how MPNS works.
            channelURITextBlock.Text = myPushChannel.ChannelUri.ToString()
        End Sub
        Private Sub myPushChannel_ErrorOccurred(sender As Object, e As NotificationChannelErrorEventArgs)
            'handles channel error caused from indirect exception
            subscriptionStatus.Text = e.Message
        End Sub
    End Class
End Namespace

Test

Si vous testez sur l’émulateur de Windows Phone, suivez ces instructions pour vous assurer qu’un proxy SOCKS a bien été inscrit dans le panneau de contrôle des options Internet de votre ordinateur.

Exécutez l’application mobile. Vous devriez voir la chaîne de caractère « Subscribed! » sur l’écran. Cela signifie que le téléphone est prêt à recevoir des Push Notifications. Pour envoyer ces notifications, nous utiliserons un outil pour invoquer le Push Service.

Lancez la commande de Visual Studio et saisissez “WCFTestClient”. Cet outil aussi peut être accédé en entrant les chemins suivants ; %ProgramFiles(x86)%\Microsoft Visual Studio 10.0\Common7\IDE (sur des systèmes 64-bit) et %ProgramFiles%\Microsoft Visual Studio 10.0\Common7\IDE (sur des systèmes 32-bit).

Dans l’outil WCF Test Client, allez dans « File » > « Add Service », et entrez l’url du .svc pour le Push Service (http://your_url_prefix.cloudapp.net/Service1.svc).

En utilisant l’outil WCF Test Client, vous invoquez la méthode PushRawData() pendant que l’application est en marche, elle enverra une chaîne de caractère à l’application. Celle-ci devrait rapidement apparaitre à l’écran.

Quittez l’application en appuyant sur le bouton de retour, et épinglez l’application sur le menu de démarrage du téléphone par un appui long sur l’icône de l’application et sélectionnez « Pin to Start » de la fenêtre contextuelle. Vous pouvez maintenant aller à la page de démarrage du téléphone et vous apercevoir que votre application est présente

En utilisant le WCF Test Client, vous invoquez la méthode PushTileUpdate(), saisissez l’url pour l’un des fichiers .png que vous avez inclus quand vous avez déployé le Push Service (http://your_url_prefix.doudapp.net/Service1.svc) comme valeur pour le paramètre TileImageURL.

Entrez ce que vous voulez pour les autres paramètres. Le Live Tile pour l’application présente sur le menu de démarrage devrait momentanément se mettre à jour en montrant toutes ces modifications.

Enfin, invoquez la méthode PuchToast(), entrez un sujet et le corps pour votre message. La notification apparaitra sur l’écran du téléphone et vous pouvez la toucher pour rentrer à nouveau dans l’application.

Voir aussi

Le code source de ce tutoriel
La solution de ce tutoriel en vidéo
Les Notifications Push pour Windows Phone (Documents de référence)
S’enregistrer pour un essai de Windows Azure / Télécharger le SDK Azure

Developpement Windows Phone - partie 9

papayet — Tue, 06 Sep 2011 13:09:00 GMT

Saisie tactile

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Saisie tactile

Les appareils Windows Phone 7 ont des écrans multi-touch qui permet aux utilisateurs d’utiliser plusieurs doigts simultanément pour produire différents mouvements d’entrés, tels que taper, la pichenette ou même pincer. Silverlight pour Windows Phone a un nombre de mécanismes différents pour gérer la saisie tactile. Ce tutoriel couvre les bases de l’utilisation de la saisie tactile dans vos applications Silverlight.

Ce tutoriel contient les sections suivantes:

Introduction à la saisie tactile (Touch Input)
Les Gestures
Utiliser les évènements de la souris
Utiliser les évènements de manipulation
Silverlight Toolkit pour Windows Phone
Interface graphique et saisie tactile

Remarque

Les exemples de ce tutoriel utilisent Silverlight du navigateur pour simuler le comportement de Silverlight pour Windows Phone. Le comportement actuel peut être légèrement différent dans un émulateur Windows Phone ou sur un appareil Windows Phone.

Introduction à la saisie tactile

Les appareils Windows Phone utilisent le toucher pour la majorité des entrées de l’utilisateur. Windows Phone supporte les écrans multi-touch qui permettent aux utilisateurs d’utiliser les gestes naturels pour interagir avec l’appareil. L’ajout du support du toucher et du mouvement pour vos applications peut grandement améliorer l’expérience utilisateur. Il y a un plusieurs façons différentes qui permettent de gérer les saisies tactiles dans vos applications Windows Phone.

Les évènements de souris avec Silverlight peuvent être utilisés pour détecter un simple mouvement avec un doigt comme une tape ou une double tape. Les gestionnaires d’évènements de la souris peuvent être rapidement rajoutés à votre application et sont un moyen facile d’obtenir un soutien tactile.

Les évènements de manipulation comme ManipulationStarted et ManipulationDelta sont utilisés pour gérer des gestes plus complexes comme des mouvements multi-touch et des mouvements qui utilisent l’inertie et les données de vitesse.

La classe TouchPoint est une autre façon de gérer la saisie tactile en Silverlight pour Windows Phone. Cette classe est un système d’entrée de bas niveau qui n’est pas couvert dans ce tutoriel.

Vous pouvez gérer le touché et les mouvements avec les classes GestureService et GestureListener contenus dans le Silverlight Toolkit pour Windows Phone. Le Toolkit est un projet Open Source et non une partie du cœur de Silverlight pour Windows Phone, mais un nombre de classes qui sont apparues en premier dans le Toolkit était éventuellement incluses dans les précédentes versions de Silverlight.

Les Gestures

Les gestes ou mouvements appelés ici les Gestures, sont un moyen de haut niveau d’interpréter les données de saisie tactile en un ensemble de mouvements communs tels que taper, la pichenette ou pincer. Les mouvements communs utilisés dans Windows Phone sont :

Gesture	Description
Tap	Un doigt touche l’écran et le relève
Double Tap	Un doigt qui tape l’écran deux fois d’affilé
Hold	Un doigt touche l’écran et le tient brièvement en place
Drag	Un doigt touche l’écran et se déplace dans n’importe quelle direction
Flick	Un doigt glisse au travers l’écran et se relève sans arrêt.
Pinch	Deux doigts pressent sur l’écran et se déplacent

Les évènements de la souris avec Silverlight comme MouseLeftButtonUp et MouseMove peuvent être utilisés pour simple support pour les mouvements d’un doigt tels que le tapotement.

Pour les mouvements multi-touch comme le pincement et les mouvements qui utilisent l’inertie et les données de vitesses telles que les pichenettes, les évènements de manipulation sont utilisés. L’information fournie par les évènements de manipulation n’est pas dans la forme du geste qui a été effectué, mais représente les données telles que la position, l’écart de translation, et la vélocité. Ces saisies de données peuvent être utilisées pour déterminer le type de mouvement qui a été effectué. C’est de la responsabilité du développeur Silverlight de convertir ces informations dans un mouvement équivalent. Ceci dit, le Silverlight Toolkit fournit du support aux mouvements au travers les classes GestureService et GestureListener.

Utiliser les évènements de la souris

La façon la plus simple de permettre la saisie tactile dans votre application mobile Silverlight pour Windows Phone est par l’utilisation des évènements de la souris. Ceux-ci sont limités aux mouvements d’un simple doigt comme l’action de taper une fois ou deux sur l’écran (on parlera ici de « tap » et de « double tap »), et ils ne supporteront pas les données basées sur la vitesse du doigt. Un simple doigt qui touche l’écran est converti en un évènement de souris, comme par exemple l’évènement MouseLeftButtonDown lorsque vous placez votre doigt sur l’écran, ou l’évènement MouseLeftButtonUp lorsque vous levez votre doigt de l’écran et l’évènement MouseMove lorsque vous faites glisser votre doigt sur l’écran. Les autres évènements de la souris qui sont utilisés en Silverlight pour Windows Phone sont les suivants : MouseLeave et MouseEnter. Les arguments de ces évènements pour tous les évènements de souris sont représentés par MouseButtonEventArgs.

L’évènement Click sur la classe Button est un autre moyen d’ajouter un support pour les mouvements de tape sur les boutons.

L’exemple suivant montre comment utiliser les évènements MouseLeftButtonDown, MouseLeftButtonUp, et MouseLeave pour gérer le mouvement de tape sur un objet Rectangle .

En premier, un Rectangle nommé TestRectangle est créé en XAML et les gestionnaires d’évènements sont ajoutés pour les évènements MouseLeftButtonDown, MouseLeftButtonUp, et MouseLeave .

XAML

Code Snippet
<Rectangle Name="TestRectangle"
           Height="100"
           Width="200"
           Fill="Blue"
           MouseLeftButtonDown="Tap_LeftButtonDown"
           MouseLeftButtonUp="Tap_LeftButtonUp"
           MouseLeave="Tap_MouseLeave" />

Par la suite, les gestionnaires d’évènements pour les évènements de la souris sont créés. L’Event Handler MouseLeftButtonDown augmentera la hauteur (Height ) et la largeur (Width ) du Rectangle. L’Event Handler MouseLeftButtonUp définit la hauteur (Height ) et la largeur (Width ) de retour à leurs valeurs initiales. Enfin, l’Event Handler MouseLeave définit aussi la hauteur (Height ) et la largeur (Width ) de retour à leurs valeurs initiales.

Code Snippet
private void Tap_LeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Rectangle rect = sender as Rectangle;
            // Change the size of the Rectangle.
            if (null != rect)
            {
                rect.Width = 250;
                rect.Height = 150;
            }
        }
 
        private void Tap_LeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Rectangle rect = sender as Rectangle;
            // Reset the dimensions on the Rectangle.
            if (null != rect)
            {
                rect.Width = 200;
                rect.Height = 100;
            }
        }
 
        private void Tap_MouseLeave(object sender, MouseEventArgs e)
        {
            Rectangle rect = sender as Rectangle;
            // Finger moved out of Rectangle before the mouse up event.
            // Reset the dimensions on the Rectangle.
            if (null != rect)
            {
                rect.Width = 200;
                rect.Height = 100;
            }
        }

Visual Basic

Code Snippet
Private Sub Tap_LeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
 
        Dim rect As Rectangle = CType(sender, Rectangle)
 
        ' Change the size of the Rectangle.
 
        If (Not (rect) Is Nothing) Then
 
            rect.Width = 250
 
            rect.Height = 150
 
        End If
 
    End Sub
 
    Private Sub Tap_LeftButtonUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
 
        Dim rect As Rectangle = CType(sender, Rectangle)
 
        ' Reset the dimensions on the Rectangle.
 
        If (Not (rect) Is Nothing) Then
 
            rect.Width = 200
 
            rect.Height = 100
 
        End If
 
    End Sub
 
    Private Sub Tap_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
 
        Dim rect As Rectangle = CType(sender, Rectangle)
 
        ' Finger moved out of Rectangle before the mouse up event.
 
        ' Reset the dimensions on the Rectangle.
 
        If (Not (rect) Is Nothing) Then
 
            rect.Width = 200
 
            rect.Height = 100
 
        End If
 
    End Sub

L’exemple suivant démontre les évènements de tapotement de la souris. Pour essayer cet exemple, cliquez sur le Rectangle.

L’exemple suivant montre comment utiliser l’évènement Click sur un Button pour gérer le mouvement de tape.

Un Button est créé en XAML et un Event Handler est ajouté pour l’évènement Click .

XAML

Code Snippet
<Button Name="TestButton"
        Content="Tap"
        Height="100" Width="200"
        Click="TestButton_Click" />

Dans l’Event Handler Click , le contenu du bouton est permuté entre « Tap » et « Tap Again ». Le texte change à chaque fois que le bouton est tapé.

Code Snippet
private void TestButton_Click(object sender, RoutedEventArgs e)
        {
            Button button = sender as Button;
 
            if (null != button)
            {
                // Toggle Button.Conten between "Tap" and "Tap Again!"
                if (button.Content as string == "Tap")
                {
                    button.Content = "Tap Again!";
                }
                else
                {
                    button.Content = "Tap";
                }
            }
        }

Visual Basic

Code Snippet
Private Sub TestButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
 
    Dim button As Button = CType(sender, Button)
 
    If (Not (button) Is Nothing) Then
 
        ' Toggle Button.Conten between "Tap" and "Tap Again!"
 
        If (CType(button.Content, String) = "Tap") Then
 
            button.Content = "Tap Again!"
 
        Else
 
            button.Content = "Tap"
 
        End If
 
    End If
 
End Sub

L’exemple suivant démontre un simple clic d’un Button. Pour essayer cet exemple, cliquez sur le bouton

Utiliser des évènements de manipulation

Si vous avez besoin de supporter plusieurs mouvements de doigts dans votre application Silverlight, ou des mouvements qui utilisent des données de vitesse, alors vous aurez besoin d’utiliser les évènements de manipulation. Vous pouvez utiliser les évènements de manipulation pour détecter des mouvements comme le Flick, glisser, pincer et le maintien. Le tableau suivant liste les classes d’évènements de manipulation dans Silverlight pour Windows Phone.

ManipulationStarted Event	Survient quand une manipulation commence sur un contrôle UIElement.
ManipulationDelta Event	Survient quand une position change pendant une manipulation.
ManipulationCompleted Event	Se produit quand une manipulation et que l’inertie sur un contrôle UIElement sont terminés.
ManipulationStartedEventArgs	Fournit des données pour l'événement ManipulationStarted .
ManipulationDeltaEventArgs	Fournit des données pour l'événement ManipulationDelta
ManipulationVelocities	Décrit la vitesse à laquelle les manipulations se produisent
ManipulationCompletedEventArgs	Fournit des données pour l'événement ManipulationCompleted .

Un évènement de mouvement dans Silverlight pour Windows Phone consiste en une série d'évènements de manipulation. Chaque geste commence avec l'événement ManipulationStarted, comme quand un utilisateur touche l'écran. Ensuite, un ou plusieurs évènements ManipulationDelta sont levés. Par exemple, si vous touchez l'écran et faites glisser votre doigt sur celui-ci, un certain nombre d'évènements ManipulationDelta sont levés. Enfin, un évènement ManipulationCompleted est déclenché lorsque le geste est terminé.

Si vous utilisez l'émulateur Windows Phone pour tester votre code l'évènement de manipulation et que vous n'avez pas un moniteur à écran tactile, vous serez limité dans ce que vous pourrez tester. L'émulateur ne supporte pas le multi-touch avec la souris. Vous pouvez tester les translations, comme le montre l'exemple suivant.

L'exemple suivant montre comment utiliser les évènements ManipulationDelta pour gérer une opération de mouvement de glisse. L'exemple créé un Rectangle qui peut être glissé au travers de l’écran.

D'abord, un Rectangle nommé TestRectangle est créé en XAML avec une hauteur (Height ) et une largeur (Width ) de 200.

XAML

Code Snippet
<Rectangle  Name="TestRectangle"
            Width="200"
            Height="200"
            Fill="Blue" />

Ensuite, un TranslateTransform nommé dragTranslation est créé pour la translation du Rectangle. Un Event Handler est ajouté au rectangle pour gérer l'événement ManipulationDelta et dragTranslation est ajouté à la RenderTransform du Rectangle. Enfin, dans l’Event Handler de ManipulationDelta , la position du Rectangle est mise à jour en utilisant le TranslateTransform sur la propriété DeltaManipulation.

Code Snippet
public MainPage()
        {
 
            InitializeComponent();
 
            // Add handler for the ManipulationDelta event
 
            TestRectangle.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(Drag_ManipulationDelta);
            dragTranslation = new TranslateTransform();
            TestRectangle.RenderTransform = this.dragTranslation;
        }
 
        void Drag_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            // Move the rectangle.
 
            dragTranslation.X += e.DeltaManipulation.Translation.X;
            dragTranslation.Y += e.DeltaManipulation.Translation.Y;
        }

Visual Basic

Code Snippet
 
public MainPage {
 
    InitializeComponent
 
' Add handler for the ManipulationDelta event
 
AddHandler TestRectangle.ManipulationDelta, AddressOf Me.Drag_ManipulationDelta
 
    dragTranslation = New TranslateTransform
 
    TestRectangle.RenderTransform = Me.dragTranslation
 
End Sub
 
Private Sub Drag_ManipulationDelta(ByVal sender As Object, ByVal e As ManipulationDeltaEventArgs)
 
    ' Move the rectangle.
 
    dragTranslation.X = (dragTranslation.X + e.DeltaManipulation.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.DeltaManipulation.Translation.Y)
 
End Sub

l'exemple fonctionnant dans l'émulateur Windows Phone. Ceci n’est pas un exemple interactif.

Silverlight Toolkit pour Windows Phone

Le Silverlight Toolkit pour Windows Phone est un projet open source où l’équipe Microsoft Silverlight partage de nouveaux composants et fonctionnalités qui ne sont pas dans le noyau de Silverlight pour Windows Phone. Le toolkit comprend un framework de mouvements qui utilise les classes GestureService et GestureListener pour détecter des gestes précis. Ces classes peuvent considérablement simplifier l'utilisation des mouvements dans votre application Silverlight.
Pour utiliser l'API du Silverlight Toolkit pour Windows Phone vous aurez besoin de le télécharger et de l’installer. La page de parution du Silverlight Toolkit contient des instructions pour le téléchargement de la version actuelle.

Interface graphique et saisie tactile

Comment la conception de votre interface utilisateur peut influencer avec quelle facilité votre application est utilisée avec la saisie tactile. Les lignes directrices sur la conception de l’expérience utilisateur pour Windows Phone dispose d’un certain nombre de Best Practices pour l’utilisation des saisies tactiles dans vos applications. Cela vaut la peine de le lire, mais voici quelques points traitant du toucher et de la conception d’interface graphique:

Toutes les commandes simples dans votre application doivent être réalisées avec un seul doigt
Les contrôles tactiles doivent réagir immédiatement. Même un léger décalage entre le moment où l’utilisateur touche l’écran et quand le contrôle répond peut être perceptible et affecter l’expérience utilisateur.
Fournit immédiatement des retours visuels ou auditifs
Si une opération prend beaucoup de temps, envisagez de fournir des retours supplémentaires
Les composants tactiles qui sont ciblés ne doivent pas être plus petits que 9mm ou 34 pixels
2mm ou 8 pixels doivent être disponibles entre chaque contrôle tactile
Dans de rares cas, les contrôles peuvent être petits, mais vous ne devez jamais créer un contrôle plus petit que 7mm ou 26 pixels.
Pour les contrôles qui seront fréquemment touchés, envisager de rendre les contrôles plus grands que 9 mm.
Les composants tactiles qui sont ciblés peuvent être plus grands que l’élément tactile, mais en aucun cas plus petit.
L’élément tactile ne doit pas être plus petit de 60% que la cible touchée.
Les contrôles contraints verticalement sont plus faciles à toucher

Voir aussi

Developpement Windows Phone - partie 6

papayet — Tue, 06 Sep 2011 13:06:00 GMT

Travailler avec du texte sur Windows Phone

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Travailler avec du texte sur Windows Phone

Silverlight pour Windows Phone fournit plusieurs contrôles permettant le rendu de texte, avec un ensemble de propriétés pour le formatage du texte. Les contrôles qui sont à base de texte disponibles dans Silverlight sont les TextBlock, les TextBox et PasswordBox. Ce tutoriel vous montre comment vous pouvez utiliser ces contrôles pour afficher et de saisir du texte.

Ce tutoriel contient les sections suivantes:

TextBlock
TextBox
Disposition SIP dans un TextBox
PasswordBox

Textblock

Le TextBlock est le principal contrôle pour l'affichage de texte en lecture seule dans les applications Windows Phone. Vous pouvez afficher du texte dans un contrôle TextBlock en utilisant sa propriété Text .

Le XAML suivant montre comment définir un contrôle TextBlock et définir sa propriété Text en une chaine de caractères.

Code Snippet
<TextBlock Text="Hello, world!" />

L'illustration suivante affiche le résultat du XAML précédent.

Vous pouvez également afficher une série de chaines de caractères dans un TextBlock, où chaque chaine a une forme différente. Vous pouvez faire cela en utilisant l'élément Run pour afficher chaque chaine avec sa mise en forme et en séparant chaque élément Run avec un élément LineBreak .

Le XAML suivant montre comment définir plusieurs chaines de texte formatées différemment dans un TextBlock en utilisant des objets Run séparés par un LineBreak.

Code Snippet
<Grid>
            <TextBlock FontFamily="Arial" Width="400" >
                <LineBreak/>
                <Run Foreground="Maroon" FontFamily="Courier New" FontSize="40">
                    Courier New 24
                Run>
                <LineBreak/>
                <Run Foreground="Teal" FontFamily="Times New Roman" FontSize="30" FontStyle="Italic">
                    Times New Roman Italic 18
                Run>
                <LineBreak/>
                <Run Foreground="SteelBlue" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
                    Verdana Bold 14
                Run>
            TextBlock>
        Grid>

L'illustration suivante montre le résultat du XAML précédent.

Pour plus d'informations sur le TextBlock, consultez la section Text et Fonts et TextBlock.

Textbox

Vous pouvez utiliser un contrôle TextBox pour entrer et modifier du texte avec un seul format et multi-ligne. Vous pouvez utiliser la propriété TextBox.Text pour définir le texte dans un TextBox. Dans l'exemple suivant, il y a trois zones de texte. Lorsque vous entrez du texte dans le premier TextBox, le même texte est affiché dans la seconde TextBox. Ceci est réalisé en utilisant l'évènement TextChanged. Le troisième TextBox affiche du texte en filigrane. Pour mettre en œuvre du texte en filigrane, vous pouvez utiliser les propriétés de polices différentes, telles que Foreground et FontSize, et des évènements, tels que GotFocus et LostFocus.

Pour essayer cet exemple, cliquez et tapez dans la première et la troisième TextBox.

Remarque

Les exemples de ce tutoriel utilisent Silverlight exécuté dans le navigateur pour simuler le comportement de Silverlight pour Windows Phone. Le comportement réel peut être légèrement différent dans l'émulateur Windows Phone ou sur un appareil Windows Mobile.

XAML

Code Snippet
<StackPanel Background="Transparent">
    <TextBlock Text="Type Text Here" />
    <TextBox x:Name="ReadWriteTB" TextChanged="ReadWriteTB_TextChanged" IsReadOnly="False" />
    <TextBlock Text="Read Only TextBox" />
    <TextBox x:Name="ReadOnlyTB" IsReadOnly="True" />
    <TextBlock Text="Search Type TextBox" />
    <TextBlock FontSize="17" TextWrapping="Wrap">
        When you click inside the text box the watermark text is removed and the
        cursor appears ready for input.
    TextBlock>
    <TextBox x:Name="WatermarkTB" Text="Search" Foreground="Gray" GotFocus="WatermarkTB_GotFocus" LostFocus="WatermarkTB_LostFocus" />
StackPanel>

Code Snippet
//The following method displays the text entered in ReadWriteTB in ReadOnlyTB.
        private void ReadWriteTB_TextChanged(object sender, RoutedEventArgs e)
        {
            ReadOnlyTB.Text = ReadWriteTB.Text;
        }
        //The foreground color of the text in WatermarkTB is set to Magenta when WatermarkTB
        //gets focus.
        private void WatermarkTB _GotFocus(object sender, RoutedEventArgs e)
        {
            if (WatermarkTB.Text == "Search")
            {
                WatermarkTB.Text = "";
                SolidColorBrush Brush1 = new SolidColorBrush();
                Brush1.Color = Colors.Magenta;
                WatermarkTB.Foreground = Brush1;
            }
        }
 
        //The foreground color of the text in WatermarkTB is set to Blue when WatermarkTB
        //loses focus. Also, if SearchTB loses focus and no text is entered, the
        //text "Search" is displayed.
        private void WatermarkTB _LostFocus(object sender, RoutedEventArgs e)
        {
            if (WatermarkTB .Text == String.Empty)
            {
                WatermarkTB.Text = "Search";
                SolidColorBrush Brush2 = new SolidColorBrush();
                Brush2.Color = Colors.Blue;
                WatermarkTB.Foreground = Brush2;
            }
        }

Visual Basic

Code Snippet
    'The foreground color of the text in WatermarkTB is set to Magenta when WatermarkTB
    'gets focus.
    Private WatermarkTB As System.Void GotFocus(object, sender, RoutedEventArgs, e)
        If (WatermarkTB.Text = "Search") Then
            WatermarkTB.Text = ""   
 
    Dim Brush1 As SolidColorBrush = New SolidColorBrush
        Brush1.Color = Colors.Magenta
        WatermarkTB.Foreground = Brush1
 
        End If
    'The foreground color of the text in WatermarkTB is set to Blue when WatermarkTB
    'loses focus. Also, if SearchTB loses focus and no text is entered, the
    'text "Search" is displayed.
    Private WatermarkTB As System.Void
_       LostFocus(object, sender, RoutedEventArgs, e)
        If (WatermarkTB.Text = String.Empty) Then
            WatermarkTB.Text = "Search"
    Dim Brush2 As SolidColorBrush = New SolidColorBrush
    Brush2.Color = Colors.Blue
    WatermarkTB.Foreground = Brush2
        End If
 
    'The following method displays the text entered in ReadWriteTB in ReadOnlyTB.
    Private Sub ReadWriteTB_TextChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
        ReadOnlyTB.Text = ReadWriteTB.Text
    End Sub

La disposition sip dans un textbox

Le principal moyen par lequel vous entrez du texte dans une application Windows Phone est d'utiliser un petit clavier à l'écran, lequel est appelé « panneau de saisie logiciel » ou SIP. Le clavier SIP s’ouvre en glissant automatiquement du bas de l'écran quand un contrôle modifiable tel que le TextBox devient actif. Lorsqu'un utilisateur tape en dehors du contrôle d'édition, fait défiler une liste, ou appuie sur le bouton Back, il se ferme en glissant vers le bas de l'écran.

Si un téléphone est doté d'un clavier physique (ce qui est une option du fabricant du téléphone) et qu’il est actif, le clavier SIP se fermera automatiquement. Vous pouvez spécifier la configuration du clavier SIP, ce qui vous permet d'accéder facilement aux caractères d'entrées prévus en fonction du contexte de l’application. Par exemple, lorsque vous utilisez le clavier SIP pour entrer un code postal, vous ne voulez voir que les touches numériques. Vous pouvez spécifier la configuration du clavier pour cette saisie en utilisant la propriété InputScope.

Le tableau suivant liste plusieurs dispositions SIP couramment utilisées et les InputScopeNameValue associés que vous pouvez spécifier en XAML ou dans le code

input scope	Description	illustration
Default	Ceci est la configuration par défaut quand aucun champ d’entrée n’est spécifié. Cela affiche la disposition standard QWERTY et automatise la première lettre en majuscule d'une phrase.
Text	L'utilisateur aura la plupart du temps du texte en type standard. Cette disposition offre des suggestions de texte, correction automatique, auto-apostrophe, l'auto-accentuation, et l'auto-capitalisation. Cette disposition a également accès à des lettres, chiffres, symboles, et émoticônes basés sur de l’ASCII. Vous pouvez utiliser ce modèle dans des domaines tels que la messagerie électronique et des documents.
Chat	Utilisez ce modèle lorsque l'utilisateur utilise cette technique pour taper des mots standards, de l'argot et des abréviations. Cette disposition offre des suggestions de texte tout en écrivant et en tapant sur un mot, la correction automatique, l’auto-apostrophe, l'auto-accentuation, et l'auto-majuscule de la première lettre d'une phrase. Ce modèle a également accès à des lettres, chiffres, symboles et à des émoticônes. Vous pouvez utiliser ce modèle dans des domaines tels que les SMS, la messagerie instantanée, les applications Twitter. Utilisez cette disposition lorsque l'utilisateur utilise essentiellement des mots de type standard, de l'argot et des abréviations.
URL	Utilisez ce modèle lorsque l'utilisateur doit taper une URL. Ce modèle désactive toutes les fonctions de correction automatique et offre une mise en page Web avec des touches « .com » et « Go ».
TelephoneNumber	Utilisez cette configuration à 12 touches pour les numéros de téléphone
EmailSmtpAddress	Utilisez cette configuration pour les adresses email. Cette disposition inclut les touches @ et com., et un accès facile à la disposition le numéro de téléphone.
CurrencyAmount	Utilisez cette configuration pour l'entrée de devises.

ll existe plus de 60 champs d'entrées différentes. Pour une liste complète des valeurs InputScope prises en charge dans Windows Mobile 7, consultez la rubrique InputScopeNameValue.

L'exemple suivant montre comment vous pouvez définir le champ d'entrée pour un contrôle TextBox en utilisant le XAML et le C#.

XAML

Code Snippet
<TextBox Text="HelloWorld">
        <TextBox.InputScope>
            <InputScope>
                <InputScopeName NameValue="Chat" />
            InputScope>
        TextBox.InputScope>
    TextBox>

Code Snippet
 
InputScope IPChat = new InputScope();
InputScopeName IPNChat = new InputScopeName();
IPNChat .NameValue= InputScopeNameValue.Chat;
IPChat.Names.Add(IPNChat);
TBChatWindow.InputScope = IPChat;

Visual Basic

Code Snippet
Dim IPChat As InputScope = New InputScope
Dim IPNChat As InputScopeName = New InputScopeName
IPNChat.NameValue = InputScopeNameValue.Chat
IPChat.Names.Add(IPNChat)
TBChatWindow.InputScope = IPChat

Passwordbox

Vous pouvez utiliser le contrôle PasswordBox pour entrer des mots de passe. L'utilisateur ne peut pas voir le texte saisi, uniquement les caractères qui représentent le mot de passe sont affichés. Vous pouvez utiliser la propriété Password pour obtenir ou définir un mot de passe et utiliser la propriété PasswordChar pour préciser le caractère du password.

Pour plus d'informations sur le contrôle PasswordBox voir la rubrique PasswordBox .

Voir aussi

Text et Fonts

Et après

Maintenant que vous êtes familier avec les composants d'interface utilisateur de base de contrôles et de texte, il est temps de les positionner où vous voulez dans votre application: Tutoriel sur la mise en page.

Developpement Windows Phone - partie 3

papayet — Tue, 06 Sep 2011 13:03:00 GMT

Utiliser des contrôles

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Utiliser des contrôles

Vous créez une interface utilisateur (UI) pour des applications Silverlight pour Windows Phone 7 en utilisant des contrôles tels que des boutons, des zones de texte et des listes déroulantes. Les contrôles Windows Phone sont conçus pour partager de nombreuses fonctionnalités. Généralement, vous suivez le schéma suivant quand vous travaillez avec des contrôles :

Vous ajoutez un contrôle à l’interface graphique de votre application
Vous définissez les propriétés sur le contrôle, telles que la largeur, la hauteur, ou la couleur de fond.
Vous connectez le code à votre contrôle afin qu’il fasse quelque chose.

Ce tutoriel décrit le schéma d’utilisation des contrôles et contient les sections suivantes:

Exemple de Control
Ajouter un Control
Définir le nom d’un Control
Définir les propriétés d’un Control
Créer un Event Handler
Et après ?

Exemple de Control

L’exemple suivant montre un contrôle TextBox et un Event Handler associé à son évènement TextChanged. Pour essayer cet exemple, tapez du texte dans le TextBox et un message apparaitra en dessous de la TextBox :

Ajouter un Control

Vous pouvez ajouter un contrôle à une application Windows Phone de plusieurs manières:

Ajouter un contrôle à partir de la ToolBox de Visual Studio.
Ajouter un contrôle dans la vue XAML.
Ajouter le contrôle dans le code.

L’illustration suivante montre Visual Studio utilisé pour créer des applications Silverlight pour Windows Phone. Dans Visual Studio, quand vous ajoutez et manipulez des contrôles dans votre application, vous pouvez utiliser plusieurs fonctionnalités de Visual Studio, incluant la Toolbox, Design View, la vue Xaml, et la fenêtre de propriétés. Pour plus d’informations sur la vue de conception (Design View) de Visual Studio, consultez la section Silverlight Designer pour Visual Studio.

La Toolbox de Visual Studio affiche plusieurs contrôles que vous pouvez utiliser dans votre application. L’illustration suivante montre plusieurs contrôles Windows Phone dans la Toolbox.

astuce

Le Toolkit Silverlight pour Windows Phone contient des contrôles pour le développement mobile. Le Toolkit contient des contrôles qui sont à différentes étapes de développement. Comme ils deviennent stables, plusieurs contrôles dans le Toolkit sont déplacés dans le runtime. Plusieurs contrôles dans le Toolkit sont complètement supprimés. Pour plus d’informations et pour télécharger ces contrôles additionnels, voir la section Toolkit Silverlight pour Windows Phone.

Pour ajouter un contrôle à votre application, double-cliquez-le dans la Toolbox. Vous pouvez aussi glisser le contrôle dans la vue Design.

XAML

Code Snippet
<TextBox Height="72" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBox1"
             Text="TextBox" VerticalAlignment="Top" Width="460" />

Définir le nom d’un Control

Chaque contrôle a un nom. Pour travailler avec un contrôle à partir du code, vous utilisez son nom. Vous pouvez changer le nom d’un contrôle en définissant sa propriété Name. Vous pouvez définir le nom dans la fenêtre de propriétés de Visual Studio ou dans le Xaml. L’illustration suivante montre comment changer le nom du contrôle actuellement sélectionné en utilisant le nom de la TextBoxen haut de la fenêtre des propriétés.

L’illustration suivante montre comment vous pouvez changer le nom d’un contrôle dans la vue Xaml en modifiant l’attribut Name

Définir les propriétés d’un Control

Vous utilisez les propriétés pour définir l’apparence, le contenu, ou d’autres attributs du contrôle. Vous pouvez définir les propriétés d’un contrôle dans la fenêtre propriété, en XAML, ou dans le code. Pour changer la couleur de fond d’un Textbox, vous définissez la propriété Foreground du contrôle. L’illustration suivante montre comment définir la propriété Foreground en utilisant la fenêtre Propriétés.

L’illustration suivante montre comment défini la propriété Foreground dans la vue XAML. Notez que la fenêtre IntelliSense de Visual Studio s’ouvre pour vous aider avec la syntaxe.

L’illustration suivante montre le résultat XAML après avoir définit la propriété Foreground

XAML

Code Snippet
<TextBox Height="72" HorizontalAlignment="Left" Margin="10,10,0,0"
         Name="MyTB" Text="TextBox" VerticalAlignment="Top" Width="460"
         Foreground="Red" />

L’exemple suivant montre comment définir la propriété Foregroundpar le code

Code Snippet
SolidColorBrush scb = new SolidColorBrush(Colors.Red);
MyTB.Foreground = scb;

Visual Basic

Code Snippet
 
Dim scb As SolidColorBrush = New SolidColorBrush(Colors.Red)
MyTB.Foreground = scb

Plusieurs propriétés, comme Width, Height ou Margin peuvent être changées, simplement en sélectionnant et manipulant le contrôle dans la vue Design. L’illustration suivante montre plusieurs outils de redimensionnement disponible en vue Design.

Création d’un Event Handler

Chaque contrôle possède un évènement qui vous permet de répondre aux actions de l’utilisateur. Par exemple, un contrôle Button contient un évènement Click qui est levé quand le Button est cliqué. Vous créez une méthode, appelée sur un gestionnaire d’évènement (Event Handler), pour gérer cet évènement. Vous pouvez créer un Event Handler dans la fenêtre Properties ou dans le XAML. Vous pouvez aussi créer un gestionnaire d’évènement manuellement dans le code. Pour plus d’informations sur les évènements, consultez la section Vue d’ensemble des Events pour Silverlight.

Vous pouvez créer un gestionnaire d’évènements en utilisant l’onglet Events de la fenêtre Properties. Pour créer un Event Handler, vous sélectionnez le contrôle et cliquez alors sur l’onglet Events en haut de la fenêtre Properties. La fenêtre Properties liste tous les évènements disponibles pour ce contrôle. L’illustration suivante liste plusieurs évènements pour un TextBox.

Pour créer un Event Handler avec un nom par défaut, vous double-cliquez sur le nom de l’évènement dans la fenêtre Properties. L’Event Handler est créé et le fichier du code-behind est ouvert dans l’éditeur de code. Le code suivant montre l’Event Handler sur l’évènement TextChanged d’un TextBox nommé MyTB. Quand le texte dans le contrôle TextBox est changé, la propriété Text du TextBlock appelée MyBlock est changée en « You entered text»

Code Snippet
 
private void MyTB_TextChanged(object sender, TextChangedEventArgs e)
{
    MyBlock.Text = "You entered text!";
}

Visula Basic

Code Snippet
Private Sub MyTB_TextChanged(ByVal sender As Object, ByVal e As TextChangedEventArgs)
    MyBlock.Text = "You entered text!"
End Sub

Vous pouvez aussi créer un Event Handler dans le XAML. Dans la vue XAML, tapez le nom d’un évènement que vous voulez gérer. La vue XAML affiche une fenêtre InelliSense quand vous commencez à saisir. L’illustration suivante montre comment spécifier l’évènement TextChangeden XAML

Une fois que vous avez spécifié l’évènement, vous pouvez double-cliquer dans la fenêtre IntelliSense qui apparaît pour créer un nouveau Event Handler avec un nom par défaut. L’illustration suivante montre la fenêtre IntelliSense qui apparaît pour vous aider à créer un nouveau gestionnaire d’évènement.

Le XAML suivant montre que l’évènement TextChangedest associé avec un gestionnaire d’évènement nommé MyTB_TextChanged

XAML

Code Snippet
<TextBox Height="72" HorizontalAlignment="Left" Margin="10,10,0,0"
          Name="MyTB" Text="TextBox" VerticalAlignment="Top" Width="260"
          Foreground"Red"
          TextChanged="MyTB_TextChanged" />

Code Snippet
MyTB.TextChanged +=new TextChangedEventHandler(MyTB_TextChanged);

Visual Basic

Code Snippet
AddHandler MyTB.TextChanged, AddressOf Me.MyTB_TextChanged

Et après

Vous connaissez maintenant les bases pour ajouter un contrôle à votre application, définir les propriétés d’un contrôle, ainsi que la création des Event Handlers. Au prochain chapitre, vous en apprendrez plus sur les contrôles qui peuvent être utilisés pour un but donné : Control 2 : Choisir les contrôles et ajouter du contenu

Voir aussi

Les contrôles pour Windows Phone

WPF – Tip – AllowsTransparency + Popup = brain cast exception

papayet — Fri, 29 Apr 2011 14:57:00 GMT

Hi there!

Today I would like to share with you a tip that I encountered on my current project in .Net 3.5.

Problem
I was seeing why my WebBrowser component didn't want to work in a custom popup. And I didn't know why, I had the same effect on my ComboBox component... I mean that the combo box stopped showing its items ... After spent a lot of time with debbuger tools (snoop, vs output ans so on) I was tired and the last thing that I didn't see was resource dictionary file.

Solution
And it was exactly the problem! Indeed, the popup style enabled the AllowsTransparency property (AllowsTransparency=true) I've reproduced the problem with a webBrowser in a popup control as you can see:

And if you set AllowsTransparency = true, the popup will not show it in the WebBrowser component...
So, if you want to see your popup correctly in your project, you have to isolate your code (WebBrowser, ComboBox) that you want to display inside your popup and set AllowsTransparency = false on it.

Hope this help !

PS: Thanks to Arnaud Auroux for having investigated this problem with me :D