Utilisation du Binding dans une application Windows Phone

Le Binding est essentiellement une conversion entre un élément Windows Phone et un objet standard du CLR (Common Language Runtime). Plus simplement, on peut dire qu’il s’agit d’établir une liaison entre un élément et une source de données.

NOTIONS DE BASE

Les éléments clés dans une opération de Binding sont les propriétés suivantes:

Source qui est l’objet qui fournit les données ;

Path qui est le nom de la propriété dans l’objet Source ;

Mode qui est le sens de déplacement des données : OneTime, OneWay ou TwoWay.

Le code ci-dessous définit un objet MesDonnees directement dans le XAML comme ressource. Dans le TextBlock, l’attribut Source pointe sur la ressource MesDonnees, Path sur les propriétés MesDonnees.AppTitle et MesDonnees.PageTitle.

<phone:PhoneApplicationPage ...>
<phone:PhoneApplicationPage.Resources>
<local:MyData x:Key="MyData" ID="1" AppTitle="Real Estate Explorer" PageName="Commercial Real Estate" />
</phone:PhoneApplicationPage.Resources> ...
<TextBlock x:Name="ApplicationTitle" Text="{Binding Path=AppTitle, Source={StaticResource MyData}, Mode=OneTime}" ... />
<TextBlock x:Name="PageTitle" Text="{Binding Path=PageName, Source={StaticResource MyData}, Mode=OneTime}" ... />
...
</Grid>
</phone:PhoneApplicationPage>

Pour lier plusieurs propriétés à un même objet, on assigne le contexte de données DataContext à un objet source et on lie ensuite chaque propriété. L’exemple ci-dessous associe MesDonnees au DataContext, Text et Tag étant liés à des propriétés dans l’objet source.

<TextBlock  DataContext="{StaticResource MyData}" Text="{Binding Path=AppTitle}" Tag="{Binding Path=ID}" .../>

Le DataContext peut être défini depuis un conteneur et être accessible au niveau de ses descendants. Ci-dessous, le DataContext est associé à l’élément Grid et seules les

propriétés de l’objet source ont besoin d’être explicitement liées aux éléments cibles ApplicationTitle et PageTitle.

<phone:PhoneApplicationPage ...>
<phone:PhoneApplicationPage.Resources>
<local:MyData x:Key="MyData" ID="1" AppTitle="Real Estate Explorer" PageName="Commercial Real Estate"/>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" DataContext="{StaticResource MyData}">...
<TextBlock x:Name="ApplicationTitle" Text="{Binding Path=AppTitle}" Tag="{Binding Path=ID}" />
<TextBlock x:Name="PageTitle" Text="{Binding Path=PageName" />...
</Grid>
</phone:PhoneApplicationPage>

BINDING DEPUIS LE CODE-BEHIND

Le Binding requiert trois objets : un élément dit FrameworkElement pour afficher les données, un objet du CLR pour contenir les données et un objet Binding pour gérer la conversion entre les deux.

Exemple:

// créer une instance d’objet du CLR
TypeVelo typeVelo = new TypeVelo() {NomType = "VTT",    DescriptionType = "Vélo Tout Terrain durable." };
// créer un objet Binding
Binding binding = new Binding() {Source = typeVelo, Path = new PropertyPath("NomType"), Mode = BindingMode.OneTime };
// assigner l’objet binding au FrameworkElement BindInCodeTextBox.SetBinding(TextBox.TextProperty, binding);

BINDING DES OBJETS

Au long de cette partie nous allons apprendre en quelques étapes à relier des objets et des collections d’objets à des éléments.

  • Créez une nouvelle application Windows Phone et nommez-la BindingDesObjets.
  • Ajoutez une classe nommée MesDonnees.cs. Pour cela, dans l’explorateur de solution faites un clic droit sur le nom du projet, sélectionnez Ajouter>Classe… et saisissez MesDonnees dans la boîte de dialogue, puis validez sur OK.
  • Dans  le code, remplacez la classe MesDonnees par ceci :

public class Element
{
public string NomArtiste
{ get; set; }
public string TitreMusique
{ get; set; }
}
public class MesDonnees : List<Element>
{
public string TitreAppli
{ get; set; }
public string NomPage { get; set; }
public MesDonnees()
{
this.TitreAppli = "Musiques camerounaises";
this.NomPage = "Découvrir";
this.Add(new Element
{
NomArtiste = "Stanley Enow",
TitreMusique = "Hein Père"
}
);
this.Add(new Element
{
NomArtiste = "Lady Ponce",
TitreMusique = "Poisson Fumé"
}
);
this.Add(new Element
{
NomArtiste = "Majoie Ayi",
TitreMusique = "Qui a bu boira"
}
);
this.Add(new Element
{
NomArtiste = "Mani Bella",
TitreMusique = "Pala Pala"
}
);
}
}

  • Ouvrez le fichier MainPage.xaml.
  • Ajoutez un espace de noms XML nommé local qui fait référence au projet actuel dans lequel la classe MesDonnees se trouve, comme ceci :

xmlns:local="clr-namespace:BindingDesObjets"

  • Ajoutez ceci en dessous de l’élément PhoneApplicationPage :

<phone:PhoneApplicationPage.Resources>
<local:MesDonnees x:Key="MesDonnees" />
</phone:PhoneApplicationPage.Resources>
Vous pouvez maintenant faire référence à MesDonnees comme ressource statique.

  • Retrouvez l’élément Grid nommé « LayoutRoot » et attribuez lui la ressource statique  MesDonnees comme contexte de données tel que ci-dessous :

<Grid x:Name="LayoutRoot" DataContext="{StaticResource MesDonnees}" Background="Transparent">

  • Retrouvez les TextBlock dont les propriétés Text contiennent « MY APPLICATION »et « page name » et modifiez-les comme ci-dessous :

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="{Binding Path=TitreAppli}" Margin="12,0" Style=" {StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="{Binding Path=NomPage}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

  • Retrouvez l’élément Grid nommé “ContentPanel“ et ajoutez un ItemsControl avec la propriété ItemsSource assignée à la ressource statique MesDonnees. Puis, ajoutez “Title“ au DisplayMemberPath.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ItemsControl ItemsSource="{StaticResource MesDonnees}" DisplayMemberPath="NomArtiste"/>
</Grid>

Le résultat devrait ressembler à ceci dans l’émulateur:

BindingDesObjets

 

Maintenant, la dernière étape :

Applaudissez pour vous-même, vous venez de faire du Binding des objets! 🙂

Ajouter un Commentaire

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