> Tech > Partage de contrôles avec Windows Phone 7

Partage de contrôles avec Windows Phone 7

Tech - Par iTPro - Publié le 22 décembre 2011
email


Supposons que vous vouliez un contrôle tout simple qui permet à l’utilisateur de faire glisser des bitmap sur l’écran. Une approche très facile consiste à placer à la fois un élément Image et un contrôle Thumb dans une grille à une seule cellule, le contrôle ayant la

même taille que l’élément Image et étant superposé sur ce dernier. Si le ControlTemplate pour le contrôle Thumb est un simple rectangle transparent, Thumb est invisible mais n’en continue pas moins de déclencher des événements de déplacement.

Essayons de créer un tel contrôle, utilisable dans les projets Silverlight classiques et les projets Windows Phone 7. Nous supposons que vous avez installé Windows Phone 7 Developer Tools (create.msdn.com). Ces outils permettent de créer des projets Windows Phone 7 à partir de Visual Studio.

Commençons par créer un projet Silverlight 4 classique intitulé DragImage. La solution DragImage résultante contient le projet DragImage habituel (à savoir, le programme Silverlight proprement dit) et un projet DragImage.Web (qui héberge le programme Silverlight dans une page HTML ou ASP.NET).

Ensuite, ajoutez un nouveau projet de type Windows Phone Application à la solution. Intitulez-le DragImage.Phone. (Il est probable que vous ne souhaitez pas afficher ce nom dans la liste des programmes du téléphone ou de l’émulateur de téléphone. Par conséquent, vous pouvez modifier le nom d’affichage dans l’attribut Title de la balise App au niveau du fichier WMAppManifest.xml.)

En cliquant avec le bouton droit de la souris sur le projet DragImage.Web ou le projet DragImage.Phone, vous obtenez un menu contextuel permettant de sélectionnant Set as StartUp Project et d’exécuter le programme Silverlight classique ou le programme Windows Phone 7. Une liste déroulante de barre d’outils dans Visual Studio vous permet de déployer le programme de téléphone sur un téléphone physique ou sur l’émulateur de téléphone. (Visual Studio ne va pas créer les projets si cette liste déroulante est définie pour Windows Phone 7 Device et si aucun téléphone n’est associé.)

Dans le projet DragImage (projet Silverlight classique), ajoutez un nouvel élément du type contrôleur utilisateur Silverlight. Appelez-le DraggableImage. Comme d’habitude, Visual Studio crée les fichiers DraggableImage.xaml et DraggableImage.xaml.cs pour ce contrôle. La figure 2 illustre DraggableImage.xaml avec l’arborescence visuelle du contrôle. La grille (Grid) extérieure standard nommée LayoutRoot occupe les dimensions complètes du conteneur du contrôle ; la grille intérieure est alignée sur le coin supérieur gauche, mais un TranslateTransform est affecté à sa propriété RenderTransform afin de le déplacer au sein de la grille extérieure. Cette grille intérieure contient un élément Image avec un contrôle Thumb par-dessus, dont la propriété Template est paramétrée sur une arborescence visuelle contenant uniquement un rectangle transparent.

Notez que la propriété Source de l’élément Image est liée à la propriété Source du contrôle proprement dit. Celle-ci est définie dans le fichier DraggableImage.xaml.cs illustré sur la figure 3. Ce fichier traite également l’événement DragDelta du contrôle Thumb en modifiant les propriétés X et Y de TranslateTransform.

Pour partager ce contrôle avec le projet Windows Phone 7, cliquez avec le bouton droit de la souris sur le projet DragImage.Phone et sélectionnez Add | Existing Item afin d’ouvrir la boîte de dialogue Add Existing Item. Accédez au dossier du projet DragImage. Sélectionnez DraggableImage.xaml et DraggableImage.xaml.cs, mais ne cliquez pas sur le bouton Add. Cliquez plutôt sur la petite flèche à droite du bouton Add et sélectionnez Add as Link. Les fichiers apparaissent dans le projet DragImage.Phone avec de petites flèches sur les icônes, afin de montrer que les fichiers en question sont partagés entre les deux projets.

Vous pouvez désormais apporter des modifications aux fichiers DraggableImage et les deux projets utiliseront les versions révisées.

Pour tester l’ensemble, il vous faut un bitmap. Stockez-le dans un dossier Images au sein de chacun des projets. (Il est inutile d’effectuer des copies du bitmap. Vous pouvez l’ajouter au dossier Images au moyen d’un lien.)

Vous devez avoir deux fichiers MainPage.xaml dans les parages, l’un provenant du projet Silverlight classique et l’autre du projet Windows Phone 7. Dans le fichier MainPage.xaml pour le projet Silverlight, ajoutez une liaison d’espace de nom XML intitulée (traditionnellement) « local » :

xmlns:local="clr-namespace:DragImage"
Now you can add DraggableImage to the page:
< Grid x:Name="LayoutRoot" Background="White">
Source="Images/BuzzAldrinOnTheMoon.png" />
< /Grid>

La classe MainPage pour le projet Windows Phone 7 réside dans un espace de nom intitulé DragImage.Phone, mais la classe DraggableImage partagée est dans l’espace de nom DragImage. Il faut une liaison d’espace de nom XML pour l’espace de nom DragImage, que vous pouvez appeler « shared » :

xmlns:shared="clr-namespace:DragImage"
Now you can add DraggableImage to the content area of the page:
< Grid x:Name="ContentPanel"
Grid.Row="1" Margin="12,0,12,0">
Source="Images/BuzzAldrinOnTheMoon.png" />
< /Grid>

Il s’agit probablement de la méthode la plus simple pour partager un contrôle entre deux projets Silverlight, un pour le Web et un pour Windows Phone 7. Comme le contrôle emploie le contrôle Thumb, les deux programmes sont compatibles avec la souris ou la fonction tactile.

Le code téléchargeable pour la solution DragImage inclut également un projet nommé DragImage.Wpf, lequel est un programme WPF qui utilise également ce contrôle. En règle générale, toutefois, le partage de contrôles entre Silverlight et WPF est plus ardu qu’entre Silverlight et Windows Phone 7.
 

Téléchargez gratuitement cette ressource

Comment sécuriser la Digital Workplace ?

Comment sécuriser la Digital Workplace ?

Avec le recours généralisé au télétravail, les entreprises ont ouvert davantage leur SI. En dépit des précautions prises, elles ont mécaniquement élargi leur surface d’exposition aux risques. Découvrez 5 axes à ne pas négliger dans ce Top 5 Sécurité du Télétravail.

Tech - Par iTPro - Publié le 22 décembre 2011