Utilisation des Converters dans une application Windows Phone

En gros, on peut dire que les converters sont des « adaptateurs » placés entre les données qui viennent de la source et celles qui sont envoyées à un élément sur l’interface.

Par exemple, un converter peut prendre les valeurs « Oui », « Non », « Peut-être » et les convertir en des valeurs correspondantes. Par exemple « Vert », « Rouge », « Orange », respectivement.

Utiliser un converter requiert trois étapes :

-Créer une classe du converter implémentant IValueConverter ;

-Définir le converter comme une ressource qui peut être utilisée dans le XAML ;

-Ajouter un attribut Converter à une extension de balisage de Binding.

IValueConverter possède uniquement deux méthodes, Convert() et ConvertBack().

L’exemple ci-dessous présente un converter simplifié qui retourne une valeur enumeration Visibility basée sur une entrée booléenne.

public class BoolToVisibilityConverter : IValueConverter

{

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

{

return (bool)value ? Visibility.Visible : Visibility.Collapsed;

}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

throw new NotImplementedException();

}

}

Ci-dessous, le converter BoolToVisibilityConverter a « VisibilityConverter » comme valeur de sa propriété x:Key et sera référencé plus loin dans l’expression de Binding. Une autre ressource, « MesDonnees », possède deux propriétés: Titre et EstFavori, de types string et bool respectivement.

<phone:PhoneApplicationPage.Resources>

   <local:BoolToVisibilityConverter x:Key="VisibilityConverter"/>

<local:MesDonnees x:Key="MesDonnees" Titre="Gâteau à la vanille" EstFavori="true"/> </phone:PhoneApplicationPage.Resources>

Le Binding se fait alors de la façon suivante:

<TextBlock DataContext="{StaticResource MesDonnees}" Text="{Binding Path=Titre}" Visibility="{Binding Path=EstFavori, Converter={StaticResource VisibilityConverter}}"/>

IMPLÉMENTATION

Dans la suite nous allons apprendre à faire du Binding en utilisant un converter. Il s’agit d’associer à chaque niveau d’avancement d’un projet une couleur.

Le converter adapte une valeur enumeration à un objet Brush utilisé pour colorer un élément Ellipse.

  • Créez une nouvelle application Windows Phone.
  • Ajoutez une nouvelle classe au projet et nommez-la Projet.cs. Pour cela, faites un clic droit sur le nom du projet dans l’Explorateur de Solution et sélectionnez Ajouter>Classe…, puis saisissez Projet dans la boîte de dialogue et validez sur OK.
  • Remplacez le code de la classe Projet par le code ci-dessous:

public enum Etat { NonCommence, Transmis, EnCours, Termine };
public class Projet

{
public Etat AvancementProjet { get; set; }
public string TitreProjet { get; set; }
}

  • Ajoutez à la page les directives ci-dessous:

using System.Windows.Data;

using System.Windows.Media;

  • Ajoutez une seconde classe au projet et nommez-la « ConvertisseurEtat_Couleur ». Ici on fait correspondre à chaque état d’avancement du projet, une couleur différente. Remplacez le code de la classe par le code ci-dessous:

public class ConvertisseurEtat_Couleur:IValueConverter
{
public object Convert(object valeur, Type typeCible, object parametre,     System.Globalization.CultureInfo culture)
{
switch ((Etat)valeur)
{
case Etat.Termine: return new SolidColorBrush(Colors.Black);
case Etat.Transmis: return new SolidColorBrush(Colors.LightGray);
case Etat.EnCours: return new SolidColorBrush(Colors.Green);
case Etat.NonCommence: return new SolidColorBrush(Colors.Red);
default: return Colors.Transparent;
}
}
public object ConvertBack(object valeur, Type typeCible, object parametre, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}

  • Ajoutez également les directives suivantes à la classe:

using System.Windows.Data;
using System.Windows.Media;

  • Ouvrez la page MainPage.xaml et ajoutez un espace de noms XML nommé local qui pointe sur le projet courant:

xmlns:local="clr-namespace:ImplementationConverter" si votre projet est nommé ImplementationConverter.

  • Définissez les ressources suivantes:

<phone:PhoneApplicationPage.Resources>
<local:Projet x:Key="Projet1" TitreProjet="Application de e-commerce" AvancementProjet="EnCours"/>
<local:ConvertisseurEtat_Couleur x:Key="ConvertisseurEtat_Couleur"/>
</phone:PhoneApplicationPage.Resources>

  • Retrouvez le Grid nommé « ContentPanel » et remplacez-le par les éléments ci-dessous:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Top" DataContext="{StaticResource Projet1}">
<Ellipse Fill="{Binding Path=AvancementProjet, Converter={StaticResource ConvertisseurEtat_Couleur}}" Width="25" Height="25" VerticalAlignment="Top" Margin="5"/>
<TextBlock Text="{Binding Path=TitreProjet}" VerticalAlignment="top" Margin="5"/>
</StackPanel>
</Grid>

  • Allez au designer, le résultat devrait ressembler à ceci:

Img_conv

Il est également possible d’afficher un « template » de données ayant beaucoup plus d’éléments. Cette fois là, le Binding ne se fera plus pour un seul élément mais pour un DataTemplate.

 

J’espère que ce tuto vous a été utile! Alors, laissez un commentaire et à très bientôt pour un nouvel article.

Ajouter un Commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *