Archives de Catégorie: Silverlight

Le Silverlight en pratique, nouveautés et astuces

[Imagine Cup 2011] Competition Windows Phone 7

Hier soir était la fin du round 2 pour la Compétition Windows Phone 7 de l’Imagine Cup 2011.

Après avoir passé le round 1 sur dossier, le but était de présenter notre application en vidéo. Nous sommes donc 100 équipes à concourir pour 5 places pour la finale à New-York.

Les résultats du round 1 sont disponibles ici : Imagine Cup 2011 Leaderboards

N’hésitez pas a nous donner votre « feedback » !

Sinon dans la compétition Software Design, la finale est jeudi prochain, le 5 mai, dans les locaux de Microsoft France. Les résultats vers 18h30!

Au passage j’en profite pour faire l’écho de l’équipe Re-Eco-World, qui vient de sortir une nouvelle vidéo de leur jeu, catégorie Game Design : c’est ici

Par Hubert Casadepax

Geocoding en Silverlight avec Bing Map

Le geocoding permet de transformer une adresse en coordonnée (latitude, longitude). Au contraire, le reverse geocoding permet de récupérer une adresse à partir de coordonnées.

Nombreuses sont les ressources autour de ce sujet en utilisant les services Bing Map. Que ce soit par une référence web ou en REST en requêtant depuis notre application.
Mais l’utilisation en silverlight est moins documentée. Le développeur se retrouvant dans l’impossibilité d’ajouter une web reference, avec des noms des classes différents, et une utilisation asynchrone…

Dans cet article nous allons donc présenter les prérequis et dégrossir le fonctionnement du geocoding par le code.

Créer un compte bing map

Première étape, créez votre compte Bing Map sur https://www.bingmapsportal.com/.

Une fois votre compte créez cliquez sur “Create or view keys” :

ScreenBingMapPortal

Dans “Application name” entrez le nom de votre application.
Pour “Application URL” donnez l’adresse de la page de votre application ou une adresse quelconque.
Le champ “Application Type” est important, n’hésitez pas à cliquer sur le bouton “What’s this ?” pour plus d’explications. En effet, cela concerne la licence et l’utilisation du service Bing Map par votre application.
Pour cette démo nous utiliserons le type “Developer”.

Une fois la clef générée, gardez-la sous la main nous allons bientôt l’utiliser.

Au sein du projet Silverlight (ou WP7)

Créez donc votre projet silverlight ou Windows Phone 7.
Ajoutez une référence de service à l’adresse : http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc/mex
Pour cet article nous nommerons la référence “GeocodeService”.

Déclarons un objet de type Credentials qui permettra de nous authentifier au service.
Déclarons aussi un objet de type GeocodeRequest pour formuler notre requête.

private GeocodeRequest GeocodeRequest;
private Credentials myCredentials;

Créons ensuite une méthode InitGeocode() dans laquelle nous préparerons l’authentification au service.

private void InitGeoCodeRequest()
{
myCredentials = new Credentials();
myCredentials.ApplicationId = VOTRE_CLEF_GENEREE_DANS_LA_PARTIE_PRECEDENTE;
GeocodeRequest = new GeocodeRequest();
GeocodeRequest.Credentials = myCredentials;
}

Il ne nous reste plus qu’à faire une méthode qui recevra en paramètre un lieu et qui le geocodera.

private void MakeGeocodeRequest(string query)
{
    try
    {
        GeocodeRequest.Query = query;
        var geocodeService = new GeocodeService.GeocodeServiceClient(« BasicHttpBinding_IGeocodeService »);
geocodeService.GeocodeCompleted += delegate(object sender, GeocodeService.GeocodeCompletedEventArgs e)
{
if (sender != null)
{
//Location est une variable que j’utilise pour stocker le résultat de la méthode. A vous de voir comment vous souhaiter le traiter.
Location = e.Result.Results[0].Locations[0];
}
};
geocodeService.GeocodeAsync(GeocodeRequest);
}
   catch(Exception ex)
{
MessageBox.Show(« An exception occurred: «  + ex.Message);
}
}

De la même manière, pour récupérer une adresse depuis des coordonnées, il vous suffit de passer en paramètre un objet de type GeocodeLocation et d’utiliser l’event handler ReverseGeocodeCompleted à la place de GeocodeCompleted.
Bien évidemment, le delegate prendra un ReverseGeocodeCompletedEventArgs à la place du GeocodeCompletedEventArgs.
Ensuite faites l’appel asynchrone avec la méthode ReverseGeocodeAsync (et non plus GeocodeAsync) sur un objet de type ReverseGeocodeRequest initalisé de la même manière que le GeocodeRequest.
L’objet retourné sera de type Address.

Pour aller plus loin :
http://msdn.microsoft.com/en-us/library/cc966793.aspx
qui vous expliquera ce que retourne le  service : un GeocodeResponse. Il contient un GeocodeResult et la doc est intéressante au niveau de cet élément (plusieurs attributs peuvent vous intéresser comme le type Address introduit plus haut).

Par JC VASSELON

[WP7] Windows Phone 7 et les icônes

Dans cet article nous allons faire le point sur les besoins en illustrations et en icônes d’une application Windows Phone 7.
Pour rappel, vous trouverez un fichier .PSD regroupant les éléments de l’interface dans cet article : https://onefor4.wordpress.com/2010/09/17/wp7-panorama-du-designer-au-developpeur/

Vis-à-vis des icônes officielles – notamment celles qu’on peut retrouver dans les ApplicationBar – un pack a longtemps été disponible au téléchargement à cette adresse : http://go.microsoft.com/fwlink/?LinkId=187311 mais il est maintenant installé par défaut avec vos tools WP7. Vous le trouverez sur votre disque dur à l’emplacement : C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons\

Parlons maintenant des illustrations dont a besoin votre application. Notamment l’icône dans la liste des applications, celle que l’on peut placer sur la page d’accueil et la splashcreen.

icones dans le projet

ApplicationIcon.png : Fichier png en 62*62. Correspond à l’illustration dans le menu des applications
Background.png : Fichier png en 173*173. Correspond à l’illustration sur la page d’accueil.
SplashScreenImage.jpg : Attention fichier jpeg ! C’est la page qui s’affichera lors du lancement de votre application.

Attention, dans le cas où vous avez bien ces fichiers dans votre projet et que certains ne s’affichent pas, pensez à bien mettre la Build Action sur « Content« .

Propriété Content

Lors de l’ajout sur le Marketplace. Il vous sera demandé :
– Une illustration png en 173*173
– Une illustration png en 99*99 pour le marketplace mobile
– Une illustration png en 200*200 pour le marketplace pc
– Au moins une impression écran png en 480*800 de votre application

Optionnellement vous pouvez ajouter 7 impressions écran de plus et une image png en 1422*800 pour les campagnes de pub sur le background du panorama du marketplace (l’image de fond qu’il y a quand vous vous rendez sur le marketplace depuis votre téléphone).

Par JC VASSELON

Microsoft Image Composite Editor

Vous avez certainement déjà du voir des exemples de Giga photo comme celle de Paris ou dernièrement celle de Budapest : http://70gigapixel.cloudapp.net/
Nous allons apprendre dans cet article comment réaliser ce genre de chose (à notre échelle!).
Microsoft Research à réalisé un logiciel « Image Composite Editor » permettant d’importer des images pour la création de panorama et de vision à 360°

Vous aurez besoin tout d’abord de télécharger le petit logiciel Image Composite Editor  puis de l’installer:
Version 32Bits : http://bit.ly/HmVLb
Version 64Bits : http://bit.ly/9Mbs1m

Une fois que le logiciel est lancé, sélectionnez les images dans votre dossier et faites un drag and drop dans la fenêtre du logiciel. Vous pouvez aussi sélectionner vos photos à partir du logiciel en cliquant sur « File » –> « New »
Une fois ceci fait, le logiciel les assemble pour former votre panorama.

Logiciel ICE
logiciel ICE
Votre panorama créé vous pouvez le recadrer, soit directement au niveau de l’image soit en utilisant la fenêtre « Crop ». De base il conserve la totalité du panorama, en utilisant l’option « automatique crop » il va rogner les bords pour faire un panorama rectangulaire
Vous avez ensuite la fenêtre pour paramétrer l’exportation de votre document, avec notamment le format Deep Zoom.
En cliquant sur « Deep Zoom settings » vous accédez à la fenêtre vous permettant de choisir la qualité de la compression, les options pour le Web. Si vous choisissez l’option HD View utilisant DirectX votre projet ne sera visible que sur Windows avec IE ou Firefox. Par contre si vous choisissez HD View SL utilisant Silverlight votre projet sera visible sur Windows et MacOs avec IE, Firefox, Safari, Chrome, Opéra.
Une fois vos paramètres entrés, cliquez sur OK, puis à droite de la fenêtre cliquez sur « Export to disk… » (attention ça enregistre 1 dossier et 4 fichiers)
L’option « Publish to Photosynth » permet quant à elle de mettre votre panorama en ligne sur Photosynth

Vous pourrez ensuite, a votre goût, intégrer votre projet à un site web par exemple.
Si vous voulez nous montrer vos créations n’hésitez pas à mettre un lien dans vos commentaires

Dans un prochain article je vous parlerai de Deep Zoom Composer et des mosaïques d’images

Référence : http://research.microsoft.com/en-us/um/redmond/groups/ivm/ice/

Par Hubert Casadepax

Utilisation simple de IValueConverter : l’Horloge

Vous connaissez sans doute tous le DataBinding en XAML, celui ci nous permet de manière simple de lier des données à des contrôles de notre vue. Ces données peuvent aussi bien venir d’un autre élément de notre vue que d’une source externe (DataContext).
Imaginons par exemple que nous voulons afficher l’heure dans un TextBlock, pour cela dans notre ViewModel, nous créons une propriété de type String qui retournera l’heure courante et grâce à DispatcherTimer réglé sur 500 millisecondes, nous signalons à la vue le changement de valeur de l’heure deux fois par seconde:

using System;
using System.ComponentModel;
using System.Windows.Threading;

namespace HorlogeSilverlight.ViewModel
{
   public class HorlogeViewModel : INotifyPropertyChanged
   {
       DispatcherTimer timer;
       public string Heure
       {
          get
          { return
DateTime
.Now.TimeOfDay.ToString(); }

}

public
HorlogeViewModel()
{
timer = new DispatcherTimer();
timer.Interval =
newTimeSpan(500);
timer.Tick += new EventHandler(timer_Tick);
timer.Start();
}

void
timer_Tick(object sender,
EventArgs
e)
{

if
(PropertyChanged != null)
NotifyPropertyChanged(« Heure »);
}

public
event
PropertyChangedEventHandler
PropertyChanged;

protected
void NotifyPropertyChanged(params string[]
propNames)
{

if
(PropertyChanged != null)
{

foreach
(string name
in
propNames)
{
PropertyChanged(this, new
PropertyChangedEventArgs
(name));
}
}
}
}
}

Puis notre TextBlock sera ainsi (en ayant au préalable défini la classe précédente
comme DataContext de notre vue):
<TextBlock Text= »{Binding Heure, Mode=OneWay} »/>
Vous pouvez d’ores et déjà voir que le TextBlock se met à jour toute les demi secondes dans le designer de Visual Studio et d’Expression Blend.
Notre horloge est déjà fonctionnelle mais disons qu’elle manque un peu de grâce.
Pourquoi ne pas faire une horloge avec des aiguilles qui tournent ?
Pour représenter les aiguilles, nous allons faire avec trois simples « Path » dont le bas est au centre de la fenêtre, nous déplaçons de même leur centre de rotation pour le positionner en bas :
<Path x:Name= »Secondes«  Data= »M167,28 L167,99.063354″ Fill= »#FFF4F4F5″HorizontalAlignment= »Center » Height= »100″ Stretch= »Fill » Stroke= »Black » UseLayoutRounding= »False » VerticalAlignment= »Center » Width= »3″ Margin= »0,0,0,100″ RenderTransformOrigin= »0,1″>

<
Path.RenderTransform>

<
CompositeTransform Rotation= »0″/>

</
Path.RenderTransform>
</Path>
<Path x:Name= »Minutes » Data= »M167,28 L167,99.063354″ Fill= »#FFF4F4F5″HorizontalAlignment= »Center » Height= »100″ Stretch= »Fill » Stroke= »Black » UseLayoutRounding= »False » VerticalAlignment= »Center » Width= »3″StrokeThickness= »2″ Margin= »0,0,0,100″ RenderTransformOrigin= »0,1″>

<
Path.RenderTransform>

<
CompositeTransform Rotation= »0″/>

</
Path.RenderTransform>
</Path>
<Path x:Name= »Heures«  Data= »M167,28 L167,99.063354″ Fill= »#FFF4F4F5″HorizontalAlignment= »Center » Height= »100″ Stretch= »Fill » Stroke= »Black » UseLayoutRounding= »False » VerticalAlignment= »Center » Width= »3″StrokeThickness= »3″ Margin= »0,0,0,100″ RenderTransformOrigin= »0.5,1″>
<Path.RenderTransform>
<CompositeTransform Rotation= »0″/>
</Path.RenderTransform>
</Path>
La propriété qui nous intéresse de binder est la propriété « Rotation » de CompositeTransform de chaque Path, mais cette propriété est de type Double et notre propriété Heure est elle de type String, si nous effectuons le binding directement, cela ne fonctionnera pas !!
Heureusement, il est possible de convertir une valeur source juste avant de l’affecter à une propriété cible et cela grâce à des classes implémentant l’interface IValueConverter.
Cette interface contient deux méthodes, Convert et ConvertBack renvoyant toutes deux un Object et prenant quatres paramètres. Ces paramètres sont un object qui est la valeur source à convertir, un Type représentant le type de valeur cible, un object permettant de passer un paramètre au converter et enfin des informations sur la culture. Ici, ce sont les paramètres « value » et « parameter » qui vont nous intéresser.
L’idée ici est de récupérer un objet de type DateTime à partir de la valeur source, de le formater à partir d’une chaine de caractère passée en paramètre du converter afin de récupérer une information spécifique de l’Heure (soit le nombre de secondes, soit le nombre de minutes, soit le nombre d’heures) et afin par un simple calcul passer cette information en un double entre 0 et 360 (un tour complet d’aiguilles).
Le code du converter sera donc le suivant (la méthode ConvertBack n’est pas implémentée ici car elle ne sert que lors de binding en mode TwoWay ou OneWayToSource) :
public
class
HeureToRotationConverter :
IValueConverter
{

public
object Convert(object
value, Type targetType,
object
parameter, System.Globalization.CultureInfo
culture)
{

try
{
string format = (string)parameter;

if
(string.IsNullOrEmpty(format))

return
0;

var
d = DateTime.Parse(value.ToString());

if
(format.Equals(« ss »))

return
double.Parse(d.ToString(format))
* 6;

else
if (format.Equals(« mm »))

return
double.Parse(d.ToString(format))
* 6 + (double.Parse(d.ToString(« ss »))
/ 10);

else
if (format.Equals(« HH »))

return
double.Parse(d.ToString(format))
* 30 + (double.Parse(d.ToString(« mm »))
/ 10);

else

return
d.ToString(format);
}

catch
(Exception ex)
{

throw
newException(« Paramètre de formatage invalide. » + ex.Message);
}
}

public
object ConvertBack(object
value, Type targetType,
object
parameter, System.Globalization.CultureInfo
culture)
{
thrownewNotImplementedException();
}
}
Maintenant, il ne nous reste plus qu’à revenir dans notre vue, déclarer notre converter dans les ressources de la page et faire notre binding en utilisant notre converter et en passant en paramètre le format à appliquer à la date (« ss », « mm » ou « HH ») :
<UserControl.Resources>
<conv:HeureToRotationConverter x:Key= »HeureToRotationConverter »/>
</UserControl.Resources>
<Path x:Name= »Secondes » Data= »M167,28
L167,99.063354″
Fill= »#FFF4F4F5″ HorizontalAlignment= »Center » Height= »100″ Stretch= »Fill » Stroke= »Black » UseLayoutRounding= »False » VerticalAlignment= »Center » Width= »3″ Margin= »0,0,0,100″ RenderTransformOrigin= »0,1″>

<
Path.RenderTransform>

<
CompositeTransform Rotation= »{Binding Heure, ConverterParameter=ss, Converter={StaticResource HeureToRotationConverter}, Mode=OneWay} »/>

</
Path.RenderTransform>

</
Path>

<
Path x:Name= »Minutes » Data= »M167,28 L167,99.063354″ Fill= »#FFF4F4F5″ HorizontalAlignment= »Center » Height= »100″ Stretch= »Fill » Stroke= »Black » UseLayoutRounding= »False » VerticalAlignment= »Center » Width= »3″ StrokeThickness= »2″ Margin= »0,0,0,100″ RenderTransformOrigin= »0,1″>

<
Path.RenderTransform>

<
CompositeTransform Rotation= »{Binding Heure, ConverterParameter=mm, Converter={StaticResource HeureToRotationConverter}, Mode=OneWay} »/>

</
Path.RenderTransform>

</
Path>

<
Path x:Name= »Heures » Data= »M167,28 L167,99.063354″ Fill= »#FFF4F4F5″ HorizontalAlignment= »Center » Height= »100″ Stretch= »Fill » Stroke= »Black » UseLayoutRounding= »False » VerticalAlignment= »Center » Width= »3″ StrokeThickness= »3″ Margin= »0,0,0,100″ RenderTransformOrigin= »0.5,1″>
<Path.RenderTransform>
<CompositeTransform Rotation= »{Binding Heure, ConverterParameter=HH, Converter={StaticResource HeureToRotationConverter},
Mode
=OneWay} »/>
</Path.RenderTransform>
</Path>
Cet exemple est simple, mais il permet de voir un cas typique d’utilisation des converters, une autre utilisation courante est le « BoolToVisibilityConverter », mais je vous laisse essayer de le réaliser par vous même 🙂
A bientôt sur notre blog !!

[WP7] Panorama : du designer au développeur

Bonjour, et bienvenue sur notre blog pour ces premiers articles

Ça y est la RTM pour les développeurs est sortie et téléchargée! Elle apporte son lot de nouveautés, notamment l’intégration du système de pivot et de panorama.
Tout le monde commence à connaître le principe de panorama qui permet d’afficher les menus les uns à la suite des autres de manière horizontale. La page suivante apparaissant légèrement sur la droite du téléphone. Le tout formant une boucle permettant de passer rapidement du dernier écran au premier.
Ce nouveau style de présentation permet à Microsoft de se démarquer de la concurrence et de la navigation comme celle de l’iPhone, qui fonctionne sur le système de création de nouvelle page.

Voilà le petit rappel de fait, passons à la création.

Du côté designer :
Le principe de panorama facilite grandement, à mon avis, le travail du designer. Tout se fait à plat, les écrans les uns à la suite des autres

Le panorama se compose de 3 parties distinctes, le titre de l’application, le titre des sections, et le contenu des sections.
La police employée est Segoe WP, avec des variations suivants les parties :
– pour le titre, Segoe WP Light, 140 pt
– pour les titres de sections, Segoe WP Semilight 54pt
– pour le contenu, Segoe WP Semilight 24pt.

Pour ce qui est du background du panorama, il est conseillé d’opter pour une taille entre 800×480 et 800×1024. Le but étant d’assurer un temps de chargement minimal. Pensez à la lisibilité de votre texte, jouez sur les contrastes, préférez des tons proches et évitez les fonds surchargés de détails.

Veillez à respecter les proportions et les marges décrites dans le UI Design & Interaction Guide, elles prennent en compte l’utilisation des doigts (touche, double touche…), à faire des contrôles trop près les uns des autres, vous risquez de gêner l’utilisateur.

Le style panorama est pratique pour faire des présentations, il permet d’avoir un visuel global sur son projet.

Je vous ai concocté un fichier .psd (Photoshop) reprenant un exemple de template et sa découpe.
Et un autre reprenant tous les contrôles existants sur un seul fichier (slider, bouton, list view…) avec une archive contenant les polices : télécharger
WP7 GUI
Avec l’aide de ses deux fichiers vous serez capable de réaliser des designs de panorama assez rapidement.

Du côté développeur :
Tout aussi simple que pour le designer. Microsoft a vraiment facilité le développement en Silverlight pour son nouveau téléphone. Pas besoin d’être un cador du C# pour réaliser une application sympa.

Comment ça se passe ?
Tout d’abord ouvrez Microsoft Visual Studio 2010 Express for Windows Phone, la nouvelle version depuis la RTM.
Cliquez sur « New Project… », on s’aperçoit que la liste des choix s’est agrandie, avec notamment l’apparition de « Windows Phone Panorama Application, et Pivot Application ».
Pour le moment intéressons-nous  à l’application Panorama. Choisissez le nom de votre solution, et c’est partie !
De base VS se présente sous la forme de deux fenêtres, à gauche le designer avec le téléphone et à droite votre code. Avec cet exemple d’application on nous montre deux types de contenu possible : une liste d’item classique ou alors une liste agrémentée d’image devant chaque item. Pour visualiser vos différentes sections dans le designer, cliquez simplement sur la partie de code correspondante.
Un jeu d’enfant à partir de là de concevoir des applications simples. Le style, les marges sont déjà créées et ne demandent qu’à être utilisées.

Vous pouvez tester votre application dans l’émulateur du téléphone en appuyant sur F5, le premier lancement prend un peu de temps.
Dans votre application vous pouvez naviguer verticalement sur la première page pour visualiser tous les items, ou naviguer horizontalement pour passer à la page suivante.

Voilà pour le premier aperçu de votre application. Maintenant si vous désirez personnaliser votre application, commencez par changer le background. Demandez à votre designer préféré de vous en faire un et ajoutez le dans l’Explorer de solution.
Vous pouvez en faire autant avec le « SplashScreen » qui est l’écran de chargement.

Observons un peu le code.
Les différentes pages sont commentées par  < !–Panorama item one–> < !—Panorama item two–> …
Le code est indenté de telle manière qu’on repère rapidement les pages. Un simple copier-coller de ce bout de code permet de créer une nouvelle page intégrée dans le panorama. Ou rajouter un <controls:PanoramaItem>

Intéressons-nous maintenant au contenu du StackPanel
La première ligne de Textblock correspond au texte apparaissant dans le designer en plus gros (design one, two…). La deuxième ligne est pour le texte écrit en plus petit (le latin), cette ligne sert de légende.
On s’aperçoit que le style est défini par « PhoneTextExtraLargeStyle » pour la première ligne, et est facilement réutilisable pour tous vos textes.

Vous pouvez facilement éditer le template de l’application, mais ce n’est pas recommandé, il est préférable de respecter le design Metro créé pour le Windows Phone 7.

On a pu donc voir la facilité de mise en place du style panorama, aussi bien pour le designer que pour le développeur. Les outils mis à notre disposition correspondent bien avec nos attentes. Plus besoin de rajouter de dll.

Avant la RTM nous utilisions un code mis à notre disposition sur codeplex. Vous pouvez retrouver un article d’explication sur http://blogs.dotnet-france.com/gregoryc/

Pour notre prochain article nous expliquerons comment faire les tilts effects quand on maintient un bouton appuyé.

Par Hubert Casadepax