Le bougre est un outil de prototypage super intuitif et exportable dans une multitude de formats comme des documents word, powerpoint, etc.

Disponible depuis Expression Blend 3 le soft permet actuellement de créer 3 types d’esquisses d’applications :

• Silverlight
• WPF
• Windows Phone 7

Voici un aperçu du démarrage :

On va principalement parler des croquis de type Windows Phone 7 mais les exemples peuvent être utilisés dans les 3 versions citées. Sketchflow tire son originalité de son manque de design, celui-ci étant proche au possible du style « fait main » tellement apprécié des fans de Comic sans Ms :

Cliquez sur l’image pour agrandir

Les fins observateurs remarqueront que les rectangles eux aussi affichés dans le style fait main ainsi qu’un petit menu de navigation juste en dessous permettant de savoir les redirections entre chaque page.

Sinon voici un aperçu de ce que ça vaut dans une vraie application :

Cliquez sur l’image pour agrandir

Et finalement le résultat peut être exporté sous forme d’un site web avec asp.net et silverlight, plutôt cool en somme :

La recette n’a pas changé : si tu cliques ça s’agrandit

Avec animations et interface style desktop, j’avoue ça claque. Si vous désirez utiliser le template pour Windows Phone, un seul lien : SketchFlow Template for Windows Phone.

Je voulais une petite application capable de me donner la description des articles ainsi qu’un lien pour rediriger l’utilisateur vers le site ou il pourrait commenter etc. Pourquoi ne pas afficher le contenu directement dans l’application ? Parce que :

1. Il est impossible de récupérer le détail des visiteurs si ceux-ci passent par l’application et pas par la page web (celle-ci est optimisée pour mobiles à peu de choses prés).
2. Les visiteurs n’auraient pas pu commenter, partager ou autre depuis l’application, ça faisait du travail inutile en plus.

Donc j’ai commencé mes recherches. Savez-vous que tous les sites en WordPress ont un flux rss ?

RSS (sigle venant de l’anglais « Rich Site Summary ») désigne une famille de formats XML utilisés pour la syndication de contenu Web.

Flux qui peut être récupéré pour afficher la description, titre et lien ? \o/ Il suffit d’écrire l’adresse du blo wordpress suivi de /feed et c’est bon Ici le lien est : www.geekozaurus.com/feed

Donc il suffit simplement de récupérer le flux rss (qui est en fait un xml) et d’afficher le résultat. Pour cette petite opération rien de plus simple la fine équipe a déjà écrit un papier dessus : http://www.wp7team.com/wp7-lire-un-flux-rss/.

Ici on récupérera le titre, le lien, la description et une image. Je me suis pas foulé l’image est dans le répertoire du projet et je la ré-affiche à chaque article, je trouve que ça fait plus présentable mais chacun ses goûts.

Voici donc ma requête Linq :

            //On va remplir notre listbox avec les différents Items parcourus dans le XML
            lbContent.ItemsSource = from x in xmlItems.Descendants("item")
                                    select new RSSitem //On crée un nouvel élément RSSitem
                                    {
                                        // Pour chaque élément RSS on va extraire les informations suivante que l'on va placer
                                        // dans l'élément RSSitem que l'on vient de créer.
                                        Description = RSSitem.Convert(x.Element("description").Value), // valeur de l'élément <description>
                                        Title = RSSitem.Convert(x.Element("title").Value), //valeur de l'élément <title>
                                        Link = RSSitem.Convert(x.Element("link").Value),
                                        ImageSource = @"img/MarketplaceTile.png"
                                    };

lbContent représente ma listbox et xmlItems mon XElement. Je veux faire un lien comme en wordpress à savoir un petit bouton ‘lire plus’ qui serait généré en fonction de chaque lien de chaque article, rien de plus simple :

<HyperlinkButton Content="Lire plus"
NavigateUri="{Binding Link}"
Foreground="LightGray"
FontSize="20" TargetName="_blank"
Margin="-12,0,0,0"
HorizontalAlignment="Left"
HorizontalContentAlignment="Left" />

Vous constaterez que j’ai défini en dur la propriété Content et que j’ai mis le Binding sur NavigateUri. Les petits malins remarqueront que dans ma propriété Margin j’ai des négatifs. C’est tout à fait possible dans le cas ou je veux que mon lien soit aligné sur la même ligne que le reste du texte. L’origine du décalage vient du fait que Microsoft a défini une bordure interne de 12 pixels au cas ou on cliquerait légèrement à coté du lien parce qu’on a tous des gros doigts.

Voici notre résultat final :

Cliquez pour agrandir

Si vous désirez voir la dernière version une seule adresse : ici

Pour bien comprendre le fonctionnement, nous allons faire un exercice très simple. Pour se faire, on va créer un bouton dans notre application et lorsqu’on cliquera sur ce bouton, la vibration va se déclencher pendant 3 secondes.

Nous déclarons donc notre « vibrateur »

VibrateController vibro = VibrateController.Default;

Ensuite, sur notre bouton, nous allons faire débuter notre vibration :

private void button1_Click(object sender, RoutedEventArgs e)
{
   vibro.Start(new TimeSpan(0, 0, 3));
}

Et maintenant si on veut stopper la vibration avant les 3 secondes (pour une cause quelconque) il suffira de lui dire stop.

vibro.Stop();

Astuce

Si l’on se réfère à la documentation du VibrateController, il n’est pas possible de faire une vibration de plus de 5 secondes (http://msdn.microsoft.com/en-us/library/microsoft.devices.vibratecontroller(v=vs.92).aspx). Si vous désirez donc faire une vibration de 10 secondes par exemple, il faudra passer par un Timer qui fera un Tick toutes les 5 secondes et qui relancera votre Vibration.

Attention qu’il y’a un petit piège à faire ceci, quand vous recevrez un coup de téléphone et que vous n’avez pas coupé votre Timer et votre Vibration, elle continuera durant l’appel et ça ne passera pas la certification. Un article à venir parlera de la résolution de ce problème.

Voila, l’article est assez court, mais peut s’avérer utile. Vous retrouverez les sources de l’exemple en cliquant sur la trombone ci-dessous.

Code source de l'application

Source de l’article : Blog de Devillu  http://blog.devillu.com/tutoswp7/wp7-declencher-une-vibration/

Pourquoi une page ?

Celles-ci sont définies par défaut au publique, donc toutes les informations (ça inclut vos posts, documents, etc.) sont accessibles par n’importe qui.

Pourquoi ne pas récupérer simplement le flux rss de la page ?

Tout d’abord parce que c’est pas le but aujourd’hui, je vous rappelle qu’on est là pour apprendre comment fonctionne l’api de Facebook. Ensuite parce qu’ici nous allons découvrir une technologie qui sera approfondie par la suite par la récupération d’informations privées, opération qui est un poil plus complexe.

Pour commencer il faut aller sur le site developers.facebook.com et créer une application. Si l’opération se passe bien vous arrivez devant pareilles informations :

Cliquer sur l’image pour plus de détails

Pour info l’API key contient 15 chiffres et donc ressemble à 125478569852365 tandis que l’App Secret contient une trentaine de caractères chiffres et lettres du style c16456d5646164fg649d46459g465. Quand on aura récupéré ces informations, il suffira d’utiliser un lien bien particulier avec nos 2 informations pour récuperer la 3eme nommée access token ou, pour les anglophobes un jeton d’accès. Ce qu’il est en fait, car avec cette suite de caractères on peut demander à Facebook certaines informations et le serveur regardera en fonction du jeton si on a le droit d’y accéder.

Ok c’est clairement pas clair, je fais un dessin :

Pareil que le premier, si tu cliques sur l’image Magie ! Ça s’agrandit.

Voici le lien en question :

https://graph.facebook.com/oauth/access_token?client_id= + App_Id + &client_secret= + App_Secret + &grant_type=client_credentials

Voici le résultat qu’on est censé obtenir :

access_token=1564563123415645610563|f561564dfs46ezd

Comme vous êtes des génies, vous aurez compris qu’il faut remplacer les trucs en gras (App Id et App Secret) par les valeurs qu’on a récupéré plus tôt

Ensuite on refait plus ou moins la même opération, à savoir un lien et une information, ici on parle de l’access token et du lien suivant :

https://graph.facebook.com/techdaysbe/feed? + _accessToken

De là 3 remarques :

1. Je suis un gros flemmard : la variable accessToken ici représente access_token=La valeur et pas seulement La valeur.
2. Le premier mot en gras représente l’id de la page facebook, ici j’ai choisi la page des Techdays Be.
3. Le 2eme mot en gras c’est parce que je demande de récupérer toutes les infos relatives au mur, parce que en général pour une page Facebook c’est le contenu le plus intéressant.

De là on récupère toutes les informations de la page sous forme d’un fichier json. Je vous sert encore un ptit schéma :

Voilà un aperçu de ce à quoi le JSON ressemble (il n’est pas complet) :

{
   "data": [
      {
         "id": "175942322416940_316583778389003",
         "from": {
            "name": "Microsoft TechDays Belgium",
            "category": "Local business",
            "id": "175942322416940"
         },
         "message": "Report of the Private Cloud Day (February 16) by Tijl Deneut [Dutch]: ",
         "picture": "http://external.ak.fbcdn.net/safe_image.php?d=AQDPArvxS8t5__m-&w=90&h=90&url=http\u00253A\u00252F\u00252Fwww.itprofessional.be\u00252Fzd_images\u00252F2012\u00252F08\u00252Fdynamic-optimization_par.jpg",
         "link": "http://www.itprofessional.be/blogs/136565/techdays-be-2012-dag-3-private-cloud/",
         "name": "Techdays BE 2012 - dag 3: private cloud - blogs - ITProfessional - pagina: 1",
         "caption": "www.itprofessional.be",
         "description": "Op dag 3 van de Belgische Microsoft Techdays 2012 werd het private cloud thema van nabij gevolgd. Enkele interessante samenvattingen - blogs - ITProfessional - deel: 1",
         "icon": "http://static.ak.fbcdn.net/rsrc.php/v1/yD/r/aS8ecmYRys0.gif",
         "type": "link",
         "created_time": "2012-02-21T14:08:42+0000",
         "updated_time": "2012-02-21T14:08:42+0000",
         "likes": {
            "data": [
               {
                  "name": "Microsoft TechDays Belgium",
                  "category": "Local business",
                  "id": "175942322416940"
               },
               {
                  "name": "Willy Van den Houten",
                  "id": "1423670758"
               }


De là on peut décemment commencer à parler code en Windows Phone 7. Donc on commence avec un projet tout propre dans lequel on lance un WebClient :

WebClient getAccess = new WebClient();
                getAccess.DownloadStringAsync(new System.Uri(
				String.Format(
				"https://graph.facebook.com/oauth/access_token?client_id={0}&client_secret={1}&grant_type=client_credentials",
				App_Id,
				App_secret)));
                getAccess.DownloadStringCompleted += new DownloadStringCompletedEventHandler(GetAccessDownloadStringCompleted);

Vous noterez que le lien contient l'App Id et l'App secret cité précédemment. Après il suffit de gérer le résultat obtenu :

        public void GetAccessDownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            _accessToken = e.Result;
            WebClient getWall = new WebClient();
            getWall.DownloadStringAsync(new System.Uri("https://graph.facebook.com/Ucrew.be/feed?" + _accessToken));
            getWall.DownloadStringCompleted += new DownloadStringCompletedEventHandler(GetWallDownloadStringCompleted);
        }

On récupère l'access token et on lance le second téléchargement avec un autre WebClient, il ne reste qu'à traiter le contenu en json :

        public void GetWallDownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            TreatJSon(JObject.Parse(e.Result));
        }

On utilise ici le framework JSon.net pour créer un JObject et chipoter dessus. Un Jobject représente une page Facebook et si on veut récuperer chaque post, il suffit de diviser notre objet en JToken :

private void TreatJSon(JObject jobject)
{
    List<JToken>listData = jobject.SelectToken("data").Select(s=>s).ToList();
    foreach(JToken tmp in ListData)
    {

Pour récuperer chaque information de chaque post il suffit de lancer la recherche sur le JToken. Si on désire récuperer le nom du créateur du post, il suffit de faire : Username = MonJToken["from"]["name"]; récupérer le message ? Message = MonJToken.SelectToken("message");

Enfin il ne reste plus qu'à créer une listbox dynamique pour stocker tout ça :

<ListBox Height="605" HorizontalAlignment="Left" Margin="0,0,0,6" Name="lbContent" VerticalAlignment="Bottom" Width="450">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical" Height="Auto">
                                <TextBlock Text="{Binding UserName}"  Foreground="#FF2276BB" FontSize="28" />
                                <TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Et c'est bon ! Vous avez toutes les clés en main pour créer votre application avec du contenu issu de Facebook

Coder sans débugger, c’est un peu comme avancer dans un labyrinthe les yeux bandés! Dès que vous vous retrouvez face à un mur, vous êtes incapable de dire comment vous êtes arrivés là.

Sans être un expert en la matière, je pense pouvoir vous donner quelques conseils très très basiques qui pourront peut-être vous éviter des crises de nerfs!

1/ Lancer l’appli en Debug.

Premièrement, passez en mode Debug. Pour lancer l’exécution de votre application en Debug, cliquez sur la flèche verte ou appuyez sur F5 (Start Debugging).

Configuration: Debug

2/ Placer des breakpoints.

Breakpoints: points d'arrêt

Dans la barre de gauche il y a des points rouges. Ce sont des points d’arrêts, et quand je lance mon appli en mode debug, comme c’est le cas ici, l’exécution s’arrêtera à chaque point d’arrêt !

Donc, lancez l’application, et vous verrez le premier point d’arrêt rencontré se surligner en jaune :

La ligne surlignée en jaune est celle sur le point d'être exécutée!

Notez bien que la ligne surlignée n’a pas encore été exécutée!

Si vous vous arrêtez sur la ligne suivante, myObject ne sera pas encore initialisé et aura null pour valeur.

MyObject myObject = new MyObject();

3/ Naviguer en debug

Le bouton « play »  (F5) permet de relancer l’exécution jusqu’à ce qu’on rencontre un nouveau point d’arrêt. Vous pouvez stopper ou redémarrer l’application: 

Pas loin, vous trouverez des contrôles assez intéressants: 

Le premier, StepInto (F11), va passer à la ligne suivante où rentrer à l’intérieur d’une méthode si la ligne sur laquelle on se trouve fait appel à une méthode !

Celui du milieu, StepOver (F10), va passer à la ligne suivante, sans s’occuper des appels de méthodes.

Et le dernier, StepOut (Maj + F11), va relancer l’exécution jusqu’à ce qu’on remonte d’un niveau, c’est à dire jusqu’à ce que l’on sortant de la méthode dans laquelle on se trouve pour arriver au code ayant fait appel à cette méthode.

4/ Observer

Un des avantages des points d’arrêts est qu’ils vous permettent à un moment donné d’observer la valeur des variables que vous avez créées. Cela vous aidera peut-être à comprendre pourquoi votre programme ne se comporte pas comme vous l’espériez!

Il existe plus moyens pour observer vos variables, comme cette vue, que vous devriez apercevoir lorsque vous lancez votre application en debug:

Si cette vue n’est pas affichée chez vous, allez dans le menu Debug > Windows.

Affichez « Locals » et dans « Watch » affichez « Watch1 » (On parlera de celle-ci plus bas ).

Une autre possibilité pour espionner vos variables consiste simplement à placer le curseur de votre souris par dessus un nom de variable.

Sur l’image ci-dessus, en passant par-dessus le« e », vous pouvez voir grâce au menu contextuel que cette variable représente un DownloadStringCompletedEventArgs. Même pas besoin de connaître le début du code! Si l’on avait placé le curseur par dessus le « Cancelled« , vous pourriez voir apparaître [ e.Cancelled |false ] (ou true évidemment c’est selon! )

Regardons un exemple un peu plus complexe, tiré d’un code de MSDN:

Ici, l’objet this est un objet de type MainForm de l’espace de nom PluginRegistrationTool. Les valeurs affichées juste en dessous représentent les valeurs des propriétés , et les champs private de l’objet.

La première ligne, « base« , permet d’accéder aux propriétés et champs hérités de la super-classe qui est ici System.Windows.Forms.Form.  On peut décider d’aller voir ce qu’il s’y cache:

On peut voir que cette classe hérite elle-même de System.Windows.Forms.ContainerControl, qui possède une quantité de propriétés. Vous pouvez bien évidemment décortiquer chacune de ces propriétés exactement de la même manière

5/ Evaluer des expressions

Explorer à la souris, c’est pratique et rapide, mais parfois ce ne sera pas suffisant. C’est le cas dans l’exemple suivant:

J’aimerais beaucoup savoir ce que vaut Math.Pow(z, y) à ce moment du programme, parce que ça m’aiderait à comprendre pourquoi je n’ai pas de chance et ne satisfait jamais la condition! Mais je suis nul en math :/ Et en fait, j’aimerais aussi savoir combien vaut mon opération si vraiment ce n’est pas égal à 100!

C’est là qu’intervient la vue Watch que je vous ai fait ajouter tout à l’heure!

Pour l’utiliser, rien de très compliqué, il suffit de sélectionner une expression, et de la glisser sur la vue On sait maintenant que le résultat est…

Et puis rien ne nous empêche de mettre le premier membre de l’expression tout entier!

Effectivement, on est loin du compte...

Et ce qui est tout aussi pratique, c’est que vous pouvez finalement taper n’importe quelle expression directement dans la colonne Name de la vue Watch:

5/ Les exceptions

Pour terminer, parlons d’un des points essentiels: les exceptions! Je vais reprendre le problème rencontré par le développeur qui nous avons contacté et qui a fait que j’écris ce post aujourd’hui.

Cette personne développait une application pour Windows Phone et utilisait un HyperlinkButton, avec pour valeur de la proprité NavigateUri un lien vers une page web. Dans son dernier mail, cette personne me disait:

[...] je suis incapable de comprendre pourquoi lorsque je clique sur le titre du post, sur lequel j’ai fait pointer l’url de la vidéo désormais, fait planter l’application, au lieu d’ouvrir IE [...]

Là, j’ai compris que je ne pouvais pas le laisser continuer à développer sans lui apprendre à lire et comprendre les exceptions.

Je ne vais pas faire ici un cours complet sur ce qu’est une exception. Le but n’est pas que vous sachiez comment créer les vôtres, mais bien de comprendre ce qu’elles veulent dire. Sachez déjà que lorsqu’une exception est lancée dans votre application, cela signifie que quelque chose ne s’est pas passé comme prévu, et cela empêche votre programme de continuer à s’exécuter! En général, chez un débutant, cela signifie tout simplement le plantage et la fermeture de l’application illico!

Si toutefois vous ne savez pas comment gérer ses exceptions, je vous invite grandement à lire ceci: try-catch (C#).

Revenons au problème:

J’ai mon HyperlinkButton, et sa propriété NavigateUri pointe vers une url tout à fait correcte. Lorsque je lance l’application en debug, et que je clique sur le lien, il y a effectivement une erreur, et je me retrouve dans cette partie du code :

Ici, l’exception est traitée par le code généré par visual studio quand vous créez un projet (c’est un peu un cas particulier) mais en général quand il y a une exception, l’application s’arrête et un pop-up apparaît dans visual studio en pointant sur la ligne de code qui a déclenché l’exception !

NullReferenceException signifie que vous essayez d'appeler une méthode sur une référence null. Généralement, le type de l'exception est assez explicite pour comprendre quel est le problème.

Dans le cas du problème de navigation, ce n’est à première vue pas aussi simple. Mais les techniques apprises plus haut vont vous permettre de vous en sortir sans difficulté!

Si vous exploriez le paramètre « e », vous verriez dans e.Exception.Message la valeur : {« Navigation is only supported to relative URIs that are fragments, or begin with ‘/’, or which contain ‘;component/’.\r\nParameter name: uri »}.

On comprends donc bien que l’HyperlinkButton ne permet tout simplement pas de naviguer vers une page web mais uniquement vers des pages de l’application même.

Matthieu Vandenhende apporte une petite correction dans les commentaires! N’hésitez pas à visiter son blog. C’est plein de bons conseils sur le développement Windows Phone!

 Il est tout à fait possible de naviguer vers une page web depuis un HyperLinkButton. La solution est de préciser comment va s’ouvrir la page avec l’attribut TargetName. Ex:

<HyperlinkButton Content="Devillu BLOG"
                 NavigateUri="http://blog.devillu.com" TargetName="_blank" />

Voilà, donc, comment Visual Studio peut vous permettre de mieux comprendre les problèmes rencontrés, et vous aider à vous corriger

La solution, en bonus! (pour ceux que ça intéresse )

Pour naviguer vers une page web sur Windows Phone 7, il faut utiliser l’un des nombreux launchers disponibles dans le SDK. Il s’agit du WebBrowserTask.

WebBrowserTask webBrowserTask = new WebBrowserTask();

webBrowserTask.Uri = new Uri("http://msdn.microsoft.com", UriKind.Absolute);

webBrowserTask.Show();

Source: Renaud Dumont http://www.renauddumont.be/2011/le-b-a-ba-du-debug-avec-visual-studio

La première étape est de se créer une clé pour l’api de bing. Pour se faire, rendez-vous sur la page : http://www.bing.com/developers/default.aspx . Une fois sur cette page, loguez vous avec votre LIVE ID grâce au bouton « Sign in ». Il vous reste donc maintenant à cliquer sur « Get started by applying for an AppID now. ». Une fois les champs complétés et les Terms of use approuvés, cliquez sur « Agree » et vous obtiendrez vos clé API.

Maintenant ajoutons une référence à BingService dans notre application. Faites un clique droit sur votre projet et choisissez « Add Service Reference ».

Ceci fait, une fenêtre va s’ouvrir. Renseignez l’adresse suivante dans « Address » : http://api.search.live.net/search.wsdl?Appid=VOTRECLEAPI    . Ensuite, cliquez sur GO. Dans « Services » devrait alors s’afficher BingService. Renseignez maitenant un nom de namespace (ex : BingService) et cliquez sur OK.

Maintenant, créez le code votre interface. Je vous mets le code du pivot IMAGE de mon application. Je vous passe les explications, c’est une listbox très simple (voir screen pour le résultat)

 <controls:PivotItem Header="images">
                <Grid>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                        <TextBox x:Name="_searchBox" Width="350" />
                        <Button x:Name="_searchButton" Content="GO" Click="_searchButton_Click" />
                    </StackPanel>

                    <ListBox x:Name="_resultListBox" Margin="0,78,0,0">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image x:Name="_listboxImage" toolkit:TiltEffect.IsTiltEnabled="True"
                                           Width="200" Height="200"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>

                    <toolkit:PerformanceProgressBar x:Name="_progressBar" IsIndeterminate="False"/>
                </Grid>
 </controls:PivotItem>

Ce code vous donnera donc ceci :

Passons donc maintenant aux choses intéressantes, c’est à dire le code qui sera exécuté au click du bouton « GO ».

 private void LaunchSearchImage()
        {
            BingPortTypeClient clientImage = new BingPortTypeClient();
            SearchRequest request = new SearchRequest();

            //Renseignemet obligatoire
            request.AppId = APIKEY; //Par exemple : APIKEY = "AD862B3DA164DE3A642C43E87569276ED2E52FCB"
            request.Sources = new SourceType[] { SourceType.Image }; //Ce que l'on veut rechercher (on peut rechercher plusieurs sources en même temps)
            request.Query = _searchBox.Text; //Notre texte recherché

            //Renseignement optionel
            request.Image = new ImageRequest();
            request.Image.Count = 40; //Nombre d'élément que l'on veut récupérer
            request.Image.CountSpecified = true;

            clientImage.SearchCompleted += new System.EventHandler<SearchCompletedEventArgs>(clientImage_SearchCompleted);
            clientImage.SearchAsync(request);
        }

Je pense que le code est vraiment assez simple et les commentaires suffisent pour le comprendre.

Pour finir, on va donc récupérer les images et les afficher dans notre application

 void clientImage_SearchCompleted(object sender, SearchCompletedEventArgs e)
        {
            SearchResponse response = e.Result;
            ImageResponse imageResponse = e.Result.Image;

            _resultListBox.Items.Clear(); //On nettoi notre listbox
            if (response.Image.Results != null)
            {
               //On va parcourir notre liste de résultat pour récupérer les images.
                foreach (ImageResult bingImage in response.Image.Results)
                {
                    Image image = new Image();
                    image.Source = new BitmapImage(new Uri(bingImage.Thumbnail.Url));
                    image.Stretch = System.Windows.Media.Stretch.UniformToFill;
                    image.Margin = new System.Windows.Thickness(5);
                    image.Width = 200;
                    image.Height = 200;
                    _resultListBox.Items.Add(image); //On ajoute l'image créé à notre listbox.
                }
            }
            else
                MessageBox.Show("Aucun résultats");
        }

Et voila ! Vous avez mis en place une recherche avec bing search !

Je trouve vraiment que c’est très simple à mettre en place et vraiment très propre. J’espère que ce tutoriel vous aidera. Si vous avez un problème, je mets les sources de l’exemple ci dessous. (Attention, n’utilisez pas la clé API qui se trouve dans cet exemple pour votre application )

Code source de l'application

Source : Devillu  http://blog.devillu.com/home/?p=440

Je suis sur que certains d’entre vous se sont déjà dis qu’ils aimeraient une MessageBox qui ne produise pas de son, ni de vibration (comme Microsoft l’utilise dans certaines applications). Avec le control MessageBox de Silverlight, il n’est pas possible de faire cela.

De plus, il serait intéressant de pouvoir faire des boutons personnalisés sur notre MessageBox … et encore une fois avec Silverlight ce n’est pas possible. Pour ce faire voici un petit tutorial ou nous allons créer un control personnalisé grâce aux services XNA.

Pour ce faire, créons simplement une nouvelle classe que nous allons nommé ‘SilenceMessageBox’ et dont la structure est la suivante :

namespace WindowsPhoneMessageboxExample.Controls
{
    public enum SilenceMessageBoxResult
    {
        LeftButton,
        RightButton,
        None
    }
    public static class SilenceMessageBox
    {
        /// <summary>
        /// Displays a message box that contains the specified text, title bar caption, and two response buttons.
        /// </summary>
        /// <param name="messageBoxText">The message to display.</param>
        /// <param name="caption">The title of the message box.</param>
        /// <param name="button1">The title of the first button.</param>
        /// <param name="button2">The title of the second button. Pass null if you only want one button.</param>
        /// <returns>A value that indicates the user's response to the message.</returns>
        public static SilenceMessageBoxResult Show(string messageBoxText, string caption, string LeftButton, string RightButton)
        {
            int? returned = null;
            using (var mre = new System.Threading.ManualResetEvent(false))
            {
                string[] buttons;
                if (RightButton == null)
                    buttons = new string[] { LeftButton };
                else
                    buttons = new string[] { LeftButton, RightButton };

                Microsoft.Xna.Framework.GamerServices.Guide.BeginShowMessageBox(
                    caption,
                    messageBoxText,
                    buttons,
                    0,
                    Microsoft.Xna.Framework.GamerServices.MessageBoxIcon.None,
                    result =>
                    {
                        returned = Microsoft.Xna.Framework.GamerServices.Guide.EndShowMessageBox(result);
                        mre.Set();
                    }, null);

                mre.WaitOne();
            }

            if (!returned.HasValue)
                return SilenceMessageBoxResult.None;
            else if (returned == 0)
                return SilenceMessageBoxResult.LeftButton;
            else if (returned == 1)
                return SilenceMessageBoxResult.RightButton;
            else
                return SilenceMessageBoxResult.None;
        }
    }
}

PS : Il ne faut pas oublier d’ajouter la référence ‘Microsoft.Xna.Framework.GamerServices’ au projet.

Maintenant, rien de plus simple quand vous voulez créer une MessageBox personnalisée, on va faire appel à notre classe ‘SilenceMessageBox’ :

   if (SilenceMessageBox.Show("Mon message", "Mon titre", "Je valide", "Pas d'accord") == SilenceMessageBoxResult.LeftButton)
            {
                // Ecrire en console debug
                Debug.WriteLine("Ok, c'est validé !");
            }

Nous avons donc la structure .Show(« Votre Message », « Votre titre », « Message du bouton de gauche », « Message du bouton de droite »)

SilenceMessageBox

Pour ceux qui préfèrent un bel exemple fonctionnel, je mets les sources d’un projet exemple ci dessous :

Code source de l'application

Source : Devillu  http://blog.devillu.com/home/?p=429

Tout d’abord, il ne faut pas oublier d’ajouter le toolkit. Voici comment procéder :

1. Ajouter la référence à l’assembly Microsoft.Phone.Controls.Toolkit
2. Dans votre xaml, ajouter cette ligne pour déclarer le toolkit :

   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Ensuite voici un exemple de ContextMenu dans une ListBox:

<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Participants}">
	<ListBox.ItemTemplate>
		<DataTemplate>
			<StackPanel Margin="0,0,0,17" Width="432" Background="#FFF3F3EB">
				<toolkit:ContextMenuService.ContextMenu>
					<toolkit:ContextMenu>
						<toolkit:MenuItem Header="Modifier" Click="menuItemEdit_Click"/>
						<toolkit:MenuItem Header="Supprimer" Click="menuItemDelete_Click"/>
					</toolkit:ContextMenu>
				</toolkit:ContextMenuService.ContextMenu>
				<TextBlock Text="{Binding Nom}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="Black"/>
				<TextBlock Text="{Binding ComptePour}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="#99000000"/>
			</StackPanel>
		</DataTemplate>
	</ListBox.ItemTemplate>
</ListBox>

Dans cet exemple, le ContextMenu portera sur le StackPanel de chacun des items de la ListBox comme le montre l’image ci dessous.

Vous remarquerez que le background du StackPanel est précisé alors que le background de ma page est déjà de cette couleur. Cela n’est pas anodin. En effet, si vous ne le précisez pas à nouveau, lorsque l’utilisateur fera apparaître le ContextMenu votre objet deviendra tout noir sans aucune raison apparente.

Dans votre menuItemEdit_Click, si vous souhaitez récupérer l’objet via lequel l’utilisateur a accédé au menu vous pouvez faire ceci :

TypeOfMyObject myObject = ((sender as MenuItem).DataContext) as TypeOfMyObject;

Et pour ceux qui comprennent mieux avec un petit exemple, voici les sources de l’exemple :

Code source de l'application

using Microsoft.Xna.Framework.Audio;

Dans notre cas nous avons utilisé le SoundEffect pour récupérer et exécuter le son. On déclare donc le son

 private SoundEffect monSon;

Ensuite, dans le constructeur de la page, on va charger le son dans la variable créée auparavant avec la méthode « Load ». Le son se trouve dans un dossier Sounds que nous avons créé.

LoadSound("Sounds/monSon.wav", out monSon);

Pour pouvoit utiliser le LoadSound, voici la méthode qui est a créer:

//<summary>
//Loads a wav file into an XNA Framework SoundEffect.
//</summary>
//<param name="SoundFilePath">Relative path to the wav file.</param>
//<param name="Sound">The SoundEffect to load the audio into.</param>
private void LoadSound(String SoundFilePath, out SoundEffect Sound)
 {
   // For error checking, assume we'll fail to load the file.
   Sound = null;

   try
   {
       // Holds informations about a file stream.
       StreamResourceInfo SoundFileInfo = App.GetResourceStream(
                         new Uri(SoundFilePath, UriKind.Relative));

       // Create the SoundEffect from the Stream
       Sound = SoundEffect.FromStream(SoundFileInfo.Stream);
   }
   catch (NullReferenceException)
   {
       // Display an error message
       MessageBox.Show("Couldn't load sound " + SoundFilePath);
   }
}

Ensuite, dans votre constructeur, vu qu’on travaille avec le framework XNA, il faut simuler la boucle du xna. On réalise ceci de la manière suivante :

            // Timer to simulate the XNA game loop (SoundEffect
            // classes are from the XNA Framework)
            DispatcherTimer XnaDispatchTimer = new DispatcherTimer();
            XnaDispatchTimer.Interval = TimeSpan.FromMilliseconds(50);

            // Call FrameworkDispatcher.Update to update
            // the XNA Framework internals.
            XnaDispatchTimer.Tick += delegate { try {
                        FrameworkDispatcher.Update();
                        } catch { } };

            // Start the DispatchTimer running.
            XnaDispatchTimer.Start();

Voila, il ne vous reste plus qu’a lancer votre son ou vous le voulez, dans cet exemple, je le mets sur le click d’un bouton

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            monSon.Play();
        }

Now, enjoy !

Tout d’abord on crée les boutons :

public MaPage()
{
	InitializeComponent();

	// Initialisation des ApplicationBarIconButton
	button1 = new ApplicationBarIconButton(new Uri("/icons/appbar.check.rest.png", UriKind.Relative));
	button1.Text = "Bouton 1";
	button1.Click += new EventHandler(appbar_bt_validation_Click);

	button2 = new ApplicationBarIconButton(new Uri("/icons/appbar.stop.rest.png", UriKind.Relative));
	button2.Text = "Bouton 2";
	button2.Click += new EventHandler(appbar_bt_deco_Click);

	button3 = new ApplicationBarIconButton(new Uri("/icons/appbar.add.rest.png", UriKind.Relative));
	button3.Text = "Bouton 3";
	button3.Click += new EventHandler(ApplicationBarIconButton_Click);
	// fin de l'initialisation

	DataContext = App.ViewModel;
	this.Loaded += new RoutedEventHandler(MaPage_Loaded);
}

Ensuite, dans le xaml, il vous suffit de prendre en compte l’event SelectionChanged de votre pivot :

<controls:Pivot SelectionChanged="Pivot_SelectionChanged">

Et pour finir, vous retournez dans le c#  et vous ajoutez ceci :

private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
	switch (((Pivot)sender).SelectedIndex)
	{
		case 0:
			this.ApplicationBar.Buttons.Clear();
			this.ApplicationBar.Buttons.Add(button1);
			break;

		case 1:
			this.ApplicationBar.Buttons.Clear();
			this.ApplicationBar.Buttons.Add(button2);
			this.ApplicationBar.Buttons.Add(button3);
			break;
	}

}