Construire son système de verrouillage sous Windows Phone 7

Publié le 1/12/2010, par Patrick Payet dans Tutoriel, Valtech | Ajouter un commentaire

Il existe sur vos smartphones un moyen de pouvoir bloquer votre écran afin de protéger vos programmes des autres personnes qui gravitent autour de vous (collègues, amis et autres). Sur les téléphones Androïd, vous avez (pour la plupart d’entre vous) un écran bloquant de ce type :

Le but de notre exemple aujourd’hui est donc de montrer que l’on peut avoir nous aussi (je parle ici de la communauté Windows phone 7) un système similaire, c’est-à-dire un moyen de tracer un chemin pour pouvoir débloquer à nouveau notre mobile. Pour notre exemple, nous prendrons l’interface bloquante ci-dessus pour notre démo en cinq étapes.

Par ailleurs, le but de cette démonstration n’est pas de détailler tout le code, je vous invite donc à télécharger les sources à la fin de ce billet.

Etape 1: Création de notre composant principal

Afin de calquer au modèle de l’écran d’introduction, nous allons créer un premier objet qui encapsulera 2 cercles comme suit :

Afin de créer un cercle, nous obtenons le code suivant :

private static Ellipse CreateCircleElement(String name, int width, Color fillColor, Color? strokeColor)
{
     var ellipse = new Ellipse {Name = name, Width = width, Height = width, Margin = new Thickness(2) };
     if (strokeColor.HasValue) {
           ellipse.Stroke = new SolidColorBrush(strokeColor.Value) { Opacity = 1.0 };
           ellipse.StrokeThickness = 5.0;
     }
     ellipse.Fill = new SolidColorBrush{ Color = fillColor, Opacity = 0.8 };
     return ellipse ;
}

Cette méthode permettra de créer aussi bien le plus petit des cercles ainsi que le plus grand.

Etape 2: Créer une grille et observer les premiers résultats

Le conteneur de nos cercles sera donc une grille. Afin de pouvoir accueillir les cercles nous allons la définir de la manière suivante:

<Grid Margin="8,85,8,63" Grid.Row="1" x:Name="AnimateGrid" >
	<Grid.RowDefinitions>
		<RowDefinition />
		<RowDefinition />
		<RowDefinition />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions></p>
		<ColumnDefinition />
		<ColumnDefinition />
		<ColumnDefinition />
	</Grid.ColumnDefinitions>
</Grid>

Ce que l’on peut voir, c’est une définition de plusieurs lignes et de colonnes. Elles sont ici pour définir le nombre d’éléments à afficher sur la grille. Nous avons définit 3 lignes et 3 colonnes, nous obtiendrons donc 9 objets à afficher sur la grille. D’un point de vue du code, les éléments seront disposés grâce à la précédente définition du code XAML de notre grille.

private void InitializeGrid() {
 for (int row = 0, maxRows = AnimateGrid.RowDefinitions.Count; row &lt; maxRows; ++row) {
   for (int col = 0, maxCols = AnimateGrid.ColumnDefinitions.Count; col &lt; maxCols; ++col)
   {
	var circle = new CircleElement(string.Concat(row, col), 120, (row + 1*10) + col, Colors.Black, Colors.White);
	circleElement.GridPosition(row, col);
	AnimateGrid.Children.Add(circleTouch.BigEllipse);
	AnimateGrid.Children.Add(circleTouch.SmallEllipse);
        circle.GridPosition(row, col);
        AnimateGrid.Children.Add(circle.BigEllipse);
        AnimateGrid.Children.Add(circle.SmallEllipse);
   }
  }
}

Cette étape étant réalisée nous observons à l’exécution de ce code, une grille composée de 9 objets:

Etape 3: Création d’un évènement au passage de la souris sur l’un de nos composants

L’évènement utilisé va se faire sur le plus petit des cercles pour que celui-ci redessine les bordures du plus grand des cercles:

Etape 4: Créer un trait pour montrer la liaison entre chaque élément

Pour montrer à l’utilisateur que la liaison entre deux cercles est bien réalisée, alors nous allons créer un trait qui se fera de la manière suivante :

private void DrawLine() {
  if (2 &gt; MyPattern.Count) return;
  ...
  var line = new Line {
       Stroke = SelectedBrush,
       StrokeThickness = smallEllipse.Width,
       X1 = ptSource.X,
       X2 = ptDest.X,
       Y1 = ptSource.Y,
       Y2 = ptDest.Y,
       IsHitTestVisible = false,
       Opacity = 0.5,
       StrokeDashCap = PenLineCap.Round,
       StrokeEndLineCap = PenLineCap.Round
  };
  line.SetValue(Grid.RowSpanProperty, AnimateGrid.RowDefinitions.Count);
  line.SetValue(Grid.ColumnSpanProperty, AnimateGrid.ColumnDefinitions.Count);
  line.SetValue(Canvas.ZIndexProperty, 0);
  AnimateGrid.Children.Add(line);

Le résultat de ce code affichera une ligne entre nos deux cercles de la manière suivante:

Comme vous avez dû le constater dans le code précédent, nous avons la ligne suivante :

line.SetValue(Canvas.ZIndexProperty, 0);

Celle-ci va positionner notre ligne en fond, du moins derrière nos autres objets, sans cela nous aurions eu une ligne au dessus des autres cercles:

Etape 5: Tracer un chemin et … tester l’application!

Arrivé à cette étape, il ne vous reste plus qu’à essayer de concevoir votre chemin et de tester celui-ci.

On peut dès à présent penser à tout autre type d’écran bloquant dérivant de cela (Mettre plus de forme sur l’écran, mettre en place des combinaisons de forme, ainsi de suite).

Leave a Reply