Windows Phone 7.

D�veloppez pour Windows Phone 7 en C# et Xaml. Cours complet

Publié le 19 octobre 2012

�� Version PDF � Version hors-ligne � Version ePub � Version Azw � Version Mobi

�

IV. XAML et interface utilisateur
IV-A. D�finition du XAML
IV-B. Balisage
IV-C. Casse, espace, tabulation, commentaire
IV-D. Objet, attribut, propri�t�
IV-E. �l�ment racine
IV-F. Code-behind, �v�nements
IV-G. Extension de balisage
IV-H. Espace de noms
IV-I. Remarque importante
V. Silverlight pour WP
V-A. La classe 'Control'
V-A-1. Ajouter un contr�le
V-A-2. Particularit�s des contr�les
V-A-3. �v�nements
V-A-4. Saisie tactile
V-A-5. Mod�le de contenu
V-B. Les applications et pages
V-C. Conteneur, position, dimensions des contr�les
V-C-1. Hi�rarchie des contr�les, arbre
V-C-2. Nom, position et dimensions d'un contr�le
V-C-3. Plan
V-D. Aspect des contr�les
V-D-1. Propri�t�s des contr�les
V-D-2. Contr�le contenant des contr�les
V-D-3. Aspect visuel des contr�les: template visuel, style
V-D-4. Transformation
V-D-5. Font
V-E. Couleur, remplissage de surface
V-E-1. Couleur
V-E-2. SolidColorBrush
V-E-3. LinearGradientBrush
V-E-4. RadialGradientBrush
V-E-5. ImageBrush
V-E-6. Masque d'opacit�
V-E-7. Nombre de couleurs et d�grad�s
V-F. Ressources
V-F-1. Les dictionnaires de ressources
V-F-1-a. Ressources 'simples'
V-F-1-b. Les styles
V-F-1-c. Les mod�les de contr�le�: ControlTemplate
V-F-1-d. Les mod�les de donn�es�: Data Template
V-F-2. Les fichiers de ressources
V-F-3. Ressources Windows Phone
V-G. Les liaisons de donn�es ou Binding
V-G-1. Principes du Binding
V-G-2. Liaison entre contr�les
V-G-3. Liaison Collection-ListBox
V-G-4. Liaison collection d'objets, ListBox
V-G-5. Convertisseur
V-G-6. Binding avec tri, filtrage, image
V-G-7. G�n�rateur de liaison
V-G-8. Erreur dans le binding

IV. XAML et interface utilisateur

IV-A. D�finition du XAML

Windows Phone 7 utilise pour d�crire l'interface une version sp�cifique de Silverlight. Le code source de silverlight est en XAML= "eXtensible Application Markup Language". Prononcez "Zammel". Il s'agit d'un langage XML permettant de d�finir des interfaces d'applications (WPF, silverlight). En d'autres termes, quand vous dessinez une interface utilisateur en silverlight, elle est enregistr�e en XAML.

Le code XAML respecte la syntaxe XML�; il est enregistr� dans un fichier ayant l'extension .xaml.

IV-B. Balisage

XAML est un langage 'balis�'.

Qu'est ce qu'une balise ? '�l�ment S�mantique de base' des langages de balisage. En XML une balise est un mot cl�, un �l�ment. Elle est comprise entre crochets et poss�de un nom et parfois des attributs. En XAML l'�l�ment est le nom d'un objet visuel (Buttom, TextBlock�)d'une propri�t� de cet objet visuel (Background,Content�), ou de tout �l�ment intervenant dans l'UI (une Brush, un ListItem�) .

Toutes les balises doivent �tre ouvertes puis referm�es . On retrouvera donc toujours une balise de d�but et une balise de fin. La balise de fin porte le m�me nom que la balise de d�but � l'exception du signe / qui le pr�c�de.

Exemple�:


<Button>
</Button>

On peut combiner balise de d�but et de fin�:


<Button />

Cela suffit � afficher un bouton.

Les balises peuvent �tre intriqu�es�:


<Grid>
 <Button> 
 </Button>
</Grid>

La derni�re balise ouverte doit �tre la premi�re ferm�e. Ici on a mis un bouton dans une grille.

IV-C. Casse, espace, tabulation, commentaire

XAML est sensible � la casse�: majuscules et minuscules ne sont pas �quivalentes. Les espaces et tabulations sont ignor�s.

Attention donc quand on tape du code XAML�: 'grid' ou 'click' ne sont pas accept�s, il faut taper 'Grid' et 'Click'. Le nom des types et attributs commence par une majuscule.

Les commentaires sont ignor�s. Voici un commentaire en XAML�:


<!--Commentaire
    ici -->

IV-D. Objet, attribut, propri�t�

On a vu que pour cr�er un objet, il suffit d'�crire�:


<Button>
</Button>

Un objet visuel a des propri�t�s�: la couleur de fond, les dimensions d'un bouton, le texte dans un TextBlock sont les propri�t�s. Il y a diff�rentes mani�res d'indiquer les valeurs d'une propri�t� d'un objet en XAML.

1- Les propri�t�s des objets visuels peuvent s'�crire sous forme d' attributs. Un attribut est le nom d'une propri�t� de la balise souvent associ� � une valeur, il est mis dans la balise d'ouverture apr�s le nom de la balise�:


<Button Background="Blue" Foreground="Red" Content="C'est un bouton"/>

Ici dans un bouton, on a utilis� les attributs Background, Foreground Content, pour indiquer la couleur du fond, du texte et le texte � afficher dans le bouton. � un attribut on affecte une valeur qui est entre guillemets et est un simple texte. On remarque que la syntaxe est simple mais on ne peut mettre que des valeurs simples. Les attributs sont s�par�s par un espace.

2- Les propri�t�s des objets visuels peuvent aussi s'�crire sous forme d'objet balis� dans un format alternatif appel� "Property element syntax" (syntaxe d'�l�ment propri�t�), qui �tend la syntaxe de XML. Une propri�t� a aussi une balise de d�but et de fin, la syntaxe est celle de l'XML c'est � dire de la forme�:


<TypeName.Property>

Voyons, par exemple, la propri�t� Background d'un bouton�:


<Button.Background>
</Button.Background>

L'int�r�t de cette syntaxe est qu'entre les deux balises, on peut mettre d'autres balises ou un �l�ment complexe (comme une Brush, par exemple).

Voici l'exemple de notre bouton�:


<Button>
<Button.Background>
<SolidColorBrush Color="Blue"/>
</Button.Background>
<Button.Foreground>
<SolidColorBrush Color="Red"/>
</Button.Foreground>
<Button.Content>
C'est un bouton
</Button.Content>
</Button>

3- Propri�t� par d�faut.

Pour le texte affich� dans un bouton, on a vu qu'on pouvait l'�crire avec l'attribut content.


<Button Content="Cliquez ici !"/>

Et aussi sous forme d'objet.


<Button>
<Button.Content>
Cliquez ici
</Button.Content>
</Button>

Mais comme Content est la propri�t� par d�faut des boutons, on peut l'�crire aussi comme cela�:


<Button>Cliquez ici !</Button>

De m�me la propri�t� 'Text' d'un TextBlock peut s'�crire ainsi�:


<TextBlock>
Hello!
</TextBlock>

On parle ici d'�l�ment de contenu.

Remarque�: on a acc�s dans un objet aux propri�t�s qui sont h�rit�es de la classe de base. Par exemple, dans un bouton, on a acc�s � la propri�t� BackGround qui est une propri�t� h�rit�e de 'controls'.

4- Propri�t� attach�e.

On peut utiliser dans un objet une propri�t� 'attach�e' appartenant au parent�:


<DockPanel>
    <Button DockPanel.Dock="Left">Annuler</Button>
</DockPanel>

Dans le bouton on utilise DockPanel.Dock qui n'est pas une propri�t� des boutons mais une propri�t� du DockPanel, le parent.
Le bouton est coll� sur le bord gauche du DockPanel gr�ce � la propri�t� 'attach�e' Dock qui prend la valeur 'Left' de l'�num�ration Dock.

5- Propri�t� de liste.
Beaucoup de contr�les conteneurs peuvent contenir des contr�les enfants. Exemple avec un StackPanel (conteneur permettant d' empiler des contr�les) dans lequel on met plusieurs boutons�; on devrait normalement utiliser la balise 'StackPannel.Child'.


<StackPanel>
  <StackPanel.Children>
    <Button>First Button</Button>
    <Button>Second Button</Button>
  </StackPanel.Children>
</StackPanel>

En fait, comme c'est une liste, on peut omettre cette balise 'StackPanel.Child' car silverlight sait que dans un StackPanel il y a une collection de contr�les�:


<StackPanel>
    <Button>First Button</Button>
    <Button>Second Button</Button>
</StackPanel>

IV-E. �l�ment racine

Il doit y avoir un �l�ment racine (root) et un seul dans un fichier XAML, il contient tous les autres. En WP c'est une grille.


<!--LayoutRoot est la grille racine o� tout le contenu de la page est plac�-->
<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

    <!--TitlePanel contient le nom de l'application et le titre de la page-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="MON APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="nom de la page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

        <!--ContentPanel - placez tout contenu suppl�mentaire ici-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
          
        </Grid>
    </Grid>

IV-F. Code-behind, �v�nements

L'interface est en XAML. Le code (dit code-behind) est en C#. Le code XAML et le code-behind sont identifi�s en sp�cifiant un espace de noms et une classe.

Soit un logiciel nomm� 'CalculeTout', par exemple.

En haut du fichier XAML qui d�crit l'interface (fichier .xaml)�:


<phone:PhoneApplicationPage 
x:Class="CalculeTout.MainPage"

La classe se nomme "CalculeTout.MainPage" (cela correspond � 'EspacedeNom.NomPage').
On remarque que WP a pris, pour le nom de l'espace de noms, le nom de l'application. Et la page de d�marrage se nomme par d�faut 'MainPage'.

En haut du fichier C# contenant le code (fichier .xaml.cs)�:


namespace CalculeTout
{

    public partial class MainPage : PhoneApplicationPage
    {}
}

On a bien l'espace de noms qui est le m�me que celui de la page XAML (nom de l'application par d�faut) et la page qui est en fait une classe dont le nom est 'MainPage'. C'est une classe partielle (partial), l'autre partie de la classe �tant dans le code XAML.

Si dans la page on ajoute un Bouton et si on double-clique sur ce bouton, on se retrouve dans le code-behind en C# qui a �t� cr�e automatiquement dans le fichier .cs�:


namespace CalculeTout
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructeur
        public MainPage()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Hello");
        }
    }
}

Il y a eu cr�ation d'une fonction 'button1_Click' qui contient le code li� � l'�v�nement. Elle sera ex�cut�e quand l'utilisateur cliquera sur le bouton.

On aurait pu cr�er soi-m�me la gestion des �v�nements en nommant la fonction li�e au 'Click' du bouton dans le code XAML�:


<Button Name="Button1" Click="MyButtonClick">

Il faut dans ce cas ensuite cr�er une fonction MyButtonClick en C#.


 private void MyButtonClick(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Hello");
        }

sender est l'objet qui a d�clench� l'�v�nement (le bouton ici).

e est de type RoutedEventArgs et contient les arguments de l'�v�nement.

On remarque que pour pallier la disparition des 'groupes de contr�les' et pour que le clic, sur plusieurs boutons, ex�cute la m�me fonction, on peut indiquer Click="MyButtonClick" pour plusieurs boutons.


<Button Name="Button1" Click="MyButtonClick">
<Button Name="Button2" Click="MyButtonClick">

IV-G. Extension de balisage

On a vu qu'un attribut avait une valeur, mais il peut aussi avoir comme valeur une extension.

Les principales extensions sont les Binding et les ressources.

Les caract�res { et } indiquent une extension de balisage (markup extension).

Exemple d'une extension�: dans un 'Border', on utilise comme Style une ressource (staticResource) nomm�e PageBackground.


<Border Style="{StaticResource PageBackground}">

Exemple d'une extension avec ici une liaison de donn�es (Binding). Ici le texte du TextBlock prendra la valeur de Title.


<TextBlock Text="{Binding Title}" />

x:Key.

D�finit une cl� unique (un 'nom' unique ) pour chaque ressource dans un ResourceDictionnary�; pour utiliser cette ressource, on l'appellera par son nom.
Cr�ons une ressource pour une grille, c'est un LinearGradientBrush (un d�grad�) que l'on 'nomme' "FunkyBrush" (c'est son nom, une cl� unique).


<Grid.Resources>
    <LinearGradientBrush x:Key="FunkyBrush">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Green" Offset="1" />
    </LinearGradientBrush>
</Grid.Resources>

Ensuite on peut l'utiliser dans la grid�:


<Button Background="{StaticResource FunkyBrush}">Click Me</Button>

Code complet�:


<Grid>
  <Grid.Resources>
    <LinearGradientBrush x:Key="FunkyBrush">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Green" Offset="1" />
    </LinearGradientBrush>
  </Grid.Resources>
  <Button Background="{StaticResource FunkyBrush}">Click Me</Button>
</Grid>

La derni�re ligne peut aussi �tre �crite sans extension de balisage, sous la forme�:


<Button Content="Click Me">
<Button.Foreground>
<StaticResource ResourceKey="FunkyBrush" />
</Button.Foreground>
</Button>

On ajoute que�:

x:Name.

Identifie de mani�re unique les �l�ments d�finis en XAML comme les contr�les.

x:Class.

D�finit l'espace de noms et le nom d'une classe.

IV-H. Espace de noms

Chapitre difficile�! � lire plus tard et plusieurs fois.

On a vu qu'au d�but du fichier XAML, on pouvait inclure un espace de noms gr�ce � 'xmlns:' (XML Name Space) et ainsi donner acc�s � des objets ext�rieurs.

La syntaxe est�:


xmlns:<alias>="<namespace identifier>"

alias est maintenant le nom local de l'espace de noms 'namespace identifier'.

Pour utiliser un objet de l'espace de noms.


QName = <alias>:<local name>

Voyons les espaces de noms qui sont d�j� pr�sents.
D�clarations des espaces de noms silverlight et XAML
Ce sont les deux premi�res lignes du code XAML. Elle indiquent une adresse Web.

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

C'est l'espace de noms XAML.
:x est l� pour cr�er l'alias x (remarquer le ':').
La ligne indique l'espace de noms 'xaml', dessous il se nommera 'x:',
on le retrouve dans x:Key, x:Name�

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
C'est l'espace de noms silverlight (� noter que cet espace de noms contient les classes des objets visuels. Il contient les classes Button, ListBox�)
On remarque que la ligne commence par xmlns= sans ':' il n'y a donc pas d'alias et les classes de cet espace de noms peuvent �tre utilis�es sans pr�fixe.

On pourra instancier un objet dont la classe est dans cet espace de noms�:


<Button Name="ButtonOk"/>

On remarque qu'on utilise 'Name' car c'est l'espace de noms par d�faut.

On va maintenant voir comment inclure d'autres espaces de noms dans le code XAML.
Il faudra utiliser 'clr-namespace'�: espace de noms CLR (Common Language Runtime) d�clar� dans l'assembly qui contient les types publics. On d�clarera l'espace de noms et si n�cessaire l'assembly (nom de la DLL)�; ici on n'utilise plus l'URL.

Exemple�: espace de noms: 'MyNameSpace' contenant une classe 'SuperButton'.


xmlns:Mns="clr-namespace:MyNameSpace"

Remarquons qu'on a donn� un nom, un alias (Mns) � l'espace de noms 'MyNameSpace' gr�ce � 'xmlns:Mns'.
On utilise les ':'. Maintenant quand on utilise 'Mns' on utilise en fait 'MyNameSpace'.
L'assembly peut �tre omis si l'espace de noms r�f�renc� est d�fini dans le m�me assembly que l"application.

Ensuite, toujours en XAML on peut utiliser un objet de cet espace de noms�:


<Mns:SuperButtom x:Name="ButtonOk" />

Remarquons qu'on utilisera la syntaxe 'Espacedenom:Objet' avec 'Mnp:MyObjet'.
On utilise 'x:Name' car l'instance appartient � un autre espace de noms que celui par d�faut.
Cela permettra d'utiliser le nom dans le code-behind.

Si l'espace de noms fait partie d'un autre assembly (d'une autre ddl), il faudra ajouter le nom de l'assembly.

Par exemple, on a un espace de noms 'CustomClasses' qui est dans un assembly nomm� 'Custom' (la DLL custom.dll)�; on veut utiliser la classe 'MyControle' de cet espace de noms, on doit �crire�:


xmlns:mycustom="clr-namespace:CustomClasses;assembly=Custom"

On remarque apr�s 'assembly' il y a '='.

Puis pour utiliser 'MyControle'.


<mycustom:MyControle  x:Name="MyControle" />

Exemples�: comment utiliser dans le code XAML une classe cr��e dans le code C#.

Je cr�e une classe 'MyButton' (qui h�rite de Button) dans l'espace de noms 'MyControle'.

Voyons le code C# (il est dans le code C# de l'application)�:


using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using Microsoft.Phone.Shell;
using Microsoft.Phone.Controls;

namespace MyControle
{
    public class MyButton : Button
    {
        // Constructeur
        public MyButton()
        {
        }
    }
}

Pour utiliser MyButton dans le code XAML�:


xmlns:MyControle="clr-namespace:MyControle"

<MyControle:MyButton  x:Name="ButtonOk">Ok</MyControle:MyButton>

L'interface a un comportement bizarre. Il faut compiler le projet ce qui compile le code correspondant � la classe ensuite pas de probl�me.

Autre exemple�: si je veux utiliser des string dans un dictionnaire de ressources, il faut que j'importe l'espace de noms 'system' de mscorelib.dll�:


xmlns:system="clr-namespace:System;assembly=mscorlib"
<!--l'alias de system est ici system-->

<!-- Ensuite, dans une ressource je pourrais d�clarer une string nomm�e 'LeTitre'-->
<!--gr�ce � system:String-->
    <phone:PhoneApplicationPage.Resources>
        <system:String x:Key="LeTitre">Cours Wp</system:String>
    </phone:PhoneApplicationPage.Resources>

Ne pas oublier que �:
x:Class NameSpace.PageName, qui est la premi�re ligne de la page XAML, permet d'indiquer l'espace de noms et le nom de la classe de la page et de faire ainsi le lien entre la classe XAML et la classe partielle de m�me nom contenant le code en C#.

x:Name identifie de mani�re unique des �l�ments objets afin d'acc�der � l'objet instanci� � partir du code-behind ou du code g�n�ral.
x:Key est lui, utilis� dans les ressources.

IV-I. Remarque importante

Il est important de comprendre que tout le code �crit en XAML peut aussi �tre �crit en C#.


<StackPanel>
<Button Name="MonBouton"  Width = "300"  Height="100" >Ok</Button>
</StackPanel>

Ce code, dans la fen�tre XAML cr�e un bouton�; on peut aussi cr�er ce bouton dans le code C#�:


StackPanel ContentPanel;
Button MyButton= new Button ();
MyButton.Width = 300;
MyButton.Height = 100;
MyButton.Content = "Ok";
ContentPanel.Children.Add(MyButton);

Ici on d�clare un bouton, on donne ses dimensions et le texte, enfin on l'ajoute au StackPanel nomm� ContentPanel.

V. Silverlight pour WP

Windows Phone 7.1 utilise silverlight 4 avec certaines particularit�s pour Windows Phone:
Il y a en plus dans WP 7.1 les �l�ments relatifs aux op�rations de touch� de l'�cran.

On peut charger la Documentation silverlight 4 Offline (fichier .CHM) en fran�ais,
Documentation silverlight 4 Attention c'est silverlight et pas silverlight pour Windows Phone, mais c'est une bonne doc�!

V-A. La classe 'Control'

Les contr�les permettent de cr�er une interface utilisateur.

Les contr�les silverlight d�rivent de la classe Control qui fait partie de l'espace de noms System.Windows.Controls.
Voici les classes dont d�rive Control�:
System.Object
System.Windows.DependencyObject
System.Windows.UIElement
System.Windows.FrameworkElement
System.Windows.Controls.Control.

C'est la classe UIElement qui donne le pouvoir d'appara�tre comme objet visuel et de recevoir des entr�es.
La classe Control h�rite des propri�t�s des classes parentes.
Aussi tous les contr�les ont des propri�t�s communes�:
Les propri�t�s de d�pendances.
Les propri�t�s de positionnement�: Height, Width, Margin, HorizontalAlignment�
Les �v�nement de vie�: Load, Unload, DataContext.
Le style.
Les ControlTemplate.
Les polices de caract�res utilis�es�: FontFamily, FontSize�

V-A-1. Ajouter un contr�le

Pour mettre un contr�le dans une page, un bouton par exemple, il y a quatre mani�res�:

- en mode 'Design', aller le chercher dans la bo�te � outils et le d�poser sur la page (drag and drop)�;

-l'ajouter � l'aide de code XAML�;

Il faut taper dans la fen�tre XAML�:


<Button>Ok</Button>

Cela ajoute � la page un bouton sur lequel est affich� 'Ok'.

-l'ajouter dans le code C#�:


Button MyButton= new Button ();
MyButton.Width = 300;
MyButton.Height = 100;
MyButton.Content = "Ok";
ContentPanel.Children.Add(MyButton);

On note qu'apr�s avoir d�clar� le bouton, on l'a ajout� aux enfants d'un conteneur nomm� ContentPanel.

- utiliser 'Expression Blend' l'application graphique.

Il est possible ensuite de modifier ses propri�t�s.

Modifions la couleur de l'arri�re plan du bouton, par exemple.

- En mode 'Design', dans la fen�tre de propri�t� en bas � droite.

-� l'aide de code XAML (ajout d'attribut 'simple')�:


<Button Background="Blue" >Ok</Button>

ou de mani�re plus complexe par ajout d'une Brush sur le fond�:


<Button FontSize="14" FontWeight="Bold">
   <Button.Background>
    <LinearGradientBrush StartPoint="0,0.5" 
                            EndPoint="1,0.5">
      <GradientStop Color="Green" Offset="0.0" />
      <GradientStop Color="White" Offset="0.9" />
    </LinearGradientBrush>
  </Button.Background>
  Ok
</Button>

-A l'aide de code C#�:


MyButton.Background= new SolidColorBrush (Colors.Blue);

On cr�e une nouvelle instance de SolidColorBrush de couleur bleue.

V-A-2. Particularit�s des contr�les

Propri�t�s de d�pendance�:

Les propri�t�s des contr�les et leur valeur ne sont pas 'fig�es' (comme dans les Windows Forms o� elles ont une valeur donn�e) mais elles peuvent 'd�pendre' d'autres choses. Les propri�t�s de d�pendance permettent de calculer la valeur d'une propri�t� en fonction de la valeur d'autres entr�es. Ces autres entr�es peuvent �tre des propri�t�s syst�me (des th�mes et des pr�f�rences utilisateur), des valeurs d�termin�es au dernier moment (liaison de donn�es, animations), des ressources et des styles ou des valeurs issues de relations parent-enfant d'autres �l�ments.

Propri�t�s attach�es�:

Les propri�t�s attach�es permettent � des �l�ments enfants de sp�cifier des valeurs pour une propri�t� d�finie dans un �l�ment parent. Cela permet de faire en sorte que les �l�ments enfants informent l'�l�ment parent sur la mani�re dont ils doivent �tre pr�sent�s dans l'interface.

La propri�t� DockPanel.Dock en est un exemple. Dans un Panel, il y a plusieurs enfants, plusieurs boutons, par exemple. La propri�t� DockPanel.Dock de chaque bouton (enfant) permet au Panel (le parent) de positionner les boutons dans le Panel.

Particularit�s des contr�les Silverlight:

Les contr�les qui ont une propri�t� 'Content' (les boutons, par exemple) peuvent contenir un Objet (du texte oui mais aussi une Grid, une Image, un StackPanel�), c'est extr�mement puissant.

V-A-3. �v�nements

Cr�ons un bouton avec le code XAML suivant�:


<Button>Ok</Button>

Si je double-clique sur ce bouton dans le designer, je me retrouve dans le code-behind en C# qui a cr�� automatiquement la fonction �v�nement suivante�:


 private void button_Click(object sender, RoutedEventArgs e)
        {
          
        }

Quand l'utilisateur du logiciel clique sur le bouton, c'est cette fonction qui sera ex�cut�e.

De plus il y a eu un ajout dans le code XAML du bouton�:


<Button Click="Button_Click>Ok</Button>

Click="Button_Click indique que lorsque l'�v�nement Click survient sur le bouton la fonction Button_Click est ex�cut�e.

On aurait pu ajouter l'attribut Click="OnClick" en le tapant au clavier, cela aurait donn� le code XAML suivant.


<Button Click="OnClick">Ok</Button>

Dans ce cas, en double-cliquant sur le bouton, la routine suivante aurait �t� cr��e�:


private void OnClick(object sender, RoutedEventArgs e)
        {
          
        }

Il est aussi possible de taper 'Click="bouton_click"', puis de mettre le curseur sur bouton_click et de faire un clic droit. Cela ouvre un menu, cliquez sur 'Naviguer vers le gestionnaire d'�v�nements'.

Cela cr�e dans le code-behind la fonction �v�nement�:


  private void bouton_click(object sender, RoutedEventArgs e)
        {

        }

sender est l'objet qui a d�clench� l'�v�nement, je dis bien 'Object' (il faudra le convertir en Button pour utiliser la propri�t� Name par exemple).

e contient les arguments de l'�v�nement, remarquons que e est de type RoutedEventArgs (et pas EventArgs comme dans les Windows Forms).

Sur un Windows Phone l'utilisateur tape avec son doigt sur l'�cran.
Quel �v�nement utiliser�? Bien s�r pour un bouton c'est Click. Sur une ListBox il y a les �v�nements KeyDown, KeyUp, MouseLeftButtonDown, SelectionChanged, MouseLeftButtonUp�; ce dernier semble bien fonctionner pour intercepter la 'tape' du doigt.

�v�nement rout�:

Quand survient un �v�nement sur un contr�le, un clic sur un bouton, par exemple, si cet �v�nement n'est pas trait� au niveau du bouton, un parent comme le StackPanel qui contient le bouton peut traiter l'�v�nement. Cela est possible car l'�v�nement 'remonte' de parent en parent.

On peut ainsi dans le StackPanel 'parent' g�rer l'�v�nement Click de tous les boutons enfants�:


  <StackPanel Background="LightGray" Orientation="Horizontal" Button.Click="ClickHandlerCommun">
    <Button Name="ButtonOui" Width="Auto" >Oui</Button>
    <Button Name="ButtonNon" Width="Auto" >Non</Button>
  </StackPanel>

Dans le code C# on peut cr�er un contr�le et le gestionnaire d'�v�nements rout� correspondant�:


 //D�claration d'un bouton
            Button myButton = new Button();// 'cr�ation d'un bouton 
            
            // Modification des propri�t�s du bouton
            myButton.Name="Bouton1";
            myButton.Height = 133;        // modification des dimensions du bouton
            myButton.Width = 155;
            myButton.HorizontalAlignment = HorizontalAlignment.Stretch;
            myButton.Content = "Button";
            
            //Gestion de l'�v�nement Click
            myButton.Click += new  RoutedEventHandler(button1_Click);
            
            //Ajout du bouton au conteneur
            ContentPanel.Children.Add(myButton);// 'met le bouton dans le conteneur ContentPanel

myButton.Click += new RoutedEventHandler(button1_Click) permet de cr�er un RoutedEventHandler qui indique d'ex�cuter la fonction 'Button1_Click' quand l'utilisateur clique sur le button1.

On peut �crire plus simplement�:


myButton.Click += button1_Click;

V-A-4. Saisie tactile

On utilise habituellement les �v�nements souris.

Un doigt qui touche un bouton d�clenche un �v�nement Click.
Soit un bouton en Xaml :


<Button Click="Button_Click>Ok</Button>

Le Click ex�cute :


 private void Button_Click(object sender, RoutedEventArgs e)
        {

        }

Un doigt qui touche un objet visuel (UIElement) est converti en un �v�nement de souris�; �v�nement MouseLeftButtonDown lorsque vous placez votre doigt, �v�nement MouseLeftButtonUp lorsque vous levez votre doigt, MouseMove lorsque vous faites glisser votre doigt.
Il y a aussi MouseLeave (sortie de la zone) et MouseEnter (entr�e dans la zone).
Les arguments de ces �v�nements sont�: Sender l'objet d'o� vient l'�v�nement et e de type MouseButtonEventArgs.

Exemple, gestion de l'�v�nement MouseLeftButtonUp sur un rectangle�:


 <Rectangle Height="67" Name="rectangle1" Width="331" 
 Fill="Transparent"
 MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"/>

Noter que pour que cela fonctionne, il faut remplir le rectangle�; ici on met une couleur transparente gr�ce � Fill.
La m�thode suivante sera ex�cut�e lors du 'lev�' du doigt sur le rectangle.


 private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {

        }

Il existe aussi des �v�nements de bas niveau, des �v�nements de haut niveau sur le UIElement (Tap, DoubleTap �) et des �v�nements de gesture dans le toolkit (voir chapitre sur les gestures).

V-A-5. Mod�le de contenu

Pour �tre complet, il y a quatre mod�les de contenu�:

- ContentControl�:

sa propri�t� Content contient un objet. Exemple�: Button�;

- HeaderContentControl�:

sa propri�t� Content contient un objet. Sa propri�t� Header fournit un titre au contr�le. Exemples�: GroupBox, TabItem�;

- ItemsControl�:

sa propri�t� Items contient une collection d'objets de m�me type. Exemple�: ListBox contient des ListBoxItem, il y a les objets conteneurs 'Panel' (comme les Grid, StackPanel�) qui contiennent une collection d'objets (Children)�;

- HeaderItemsControl�:

sa propri�t� Header fournit un titre au contr�le. Sa propri�t� Items contient une collection d'objets.

V-B. Les applications et pages

Une application Windows Phone contient une Frame dans laquelle se trouve des Pages.

Chaque page est dans un fichier .xaml.
La page correspond au contenu d'un �cran. Un appareil Windows Phone 7 poss�de un �cran de 480 � 800 pixels.

Quand on cr�e un nouveau projet nomm� MyProjet, Visual Studio cr�e une page nomm� MainPage.xaml (la page de d�marrage) qui contient�:


<phone:PhoneApplicationPage 
    x:Class="MyProjet.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot est la grille racine o� tout le contenu de la page est plac�-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contient le nom de l'application et le titre de la page-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MON APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="nom de la page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - placez tout contenu suppl�mentaire ici-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
          
        </Grid>
    </Grid>
 
    <!--Exemple de code illustrant l'utilisation d'ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Bouton 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Bouton 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="�l�mentMenu 1"/>
                <shell:ApplicationBarMenuItem Text="�l�mentMenu 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

Dans la balise PhoneApplicationPage�:
x:Class="MyProjet.MainPage indique l'espace de noms (le nom du projet par d�faut) et la classe de la page.
En effet une page se pr�sente comme une classe (dans le code XAML) plus le code C# correspondant qui se trouve dans une classe partielle.

On a ensuite la d�claration des espaces de noms (xml name space) utilis�s dans la page�:
L'espace de nom silverlight�:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
L'espace de nom XAML�:
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
L'espace de noms contenant les contr�les�:
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
Et d'autres�:
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

On remarque que la premi�re ligne commence par xmlns= sans ':', il n'y a donc pas d'alias et les classes de cet espace de noms peuvent �tre utilis�es sans pr�fixe. Dans les autres lignes il y a un alias (:x par exemple) ce qui oblige � utiliser l'alias ( x:Name par exemple).

Le "d" (de "designer") et le "mc" (de "markup compatibility") dans la d�claration des espaces de noms sont utilis�s par les programmes comme Expression Blend et le designer de Visual Studio. DesignerWidth et DesignerHeight sont ignor�s durant la compilation.

Puis on indique la police � utiliser dans la page, sa taille et le Foreground (couleur des caract�res)�:
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"

On indique aussi l'orientation support�e et l'orientation en cours�:
SupportedOrientations="Portrait" Orientation="Portrait".
shell:SystemTray.IsVisible="True" indique d'afficher la barre syst�me.

On a ensuite une grille qui est l'�l�ment racine.
Cette grille contient des StackPanel affichant le titre de la page puis le contenu de l'application.

Il doit y avoir un �l�ment racine (root) et un seul dans un fichier XAML, il contient tous les autres�: c'est la grille 'LayoutRoot'.

Il y a aussi cr�ation d'un fichier MainPage.xaml.cs qui contient le code en C#.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace MyProjet
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructeur
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

L'espace de noms est celui du projet (MyProjet). Il y a une 'partial class' nomm�e MainPage.
La page est donc compos�e d'une classe en XAML compl�t�e d'une partie C#�: une classe partielle.
L'interface graphique �crite en XAML sera g�n�r�e � la compilation et fusionnera avec le reste de la classe partielle d�finie dans le code-behind. Nous avons donc une seule et m�me classe d�finie dans deux fichiers diff�rents (le fichier g�n�r� � partir du XAML �tant cach� de l'utilisateur et se nommant MainPage.Xaml.g.i.cs).

L'explorateur de solution en haut � droite permet de voir de quoi se compose le projet 'MyProjet'.

Properties donne acc�s aux propri�t�s du projet.

R�f�rences indique les DLL charg�es dans le projet.

On voit aussi�:
le code XAML de l'application�: App.xaml et en developpant, App.xaml.cs�;
les ic�nes et images du projet�: ApplicationIcon.png, Background.png, SplashScreenImage.jpg�;
la page (MainPage ici) compos�e de l'interface (MainPage.xaml) et du code C# (MainPage.xaml.cs).

Voyons le d�tail du fichier App.xaml, le fichier 'Application' dans lequel on peut mettre les ressources de l'application (balise Application.resources).


<Application 
    x:Class="MyProjet.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">

    <!--Ressources d'applications-->
    <Application.Resources>
    </Application.Resources>

    <Application.ApplicationLifetimeObjects>
        <!--Objet requis qui g�re les �v�nements de dur�e de vie pour l'application-->
        <shell:PhoneApplicationService 
            Launching="Application_Launching" Closing="Application_Closing" 
            Activated="Application_Activated" Deactivated="Application_Deactivated"/>
    </Application.ApplicationLifetimeObjects>

</Application>

Voyons le d�tail du fichier App.xaml.cs (pour le voir, cliquer sur le petit triangle � droite de 'App.xaml'), le fichier comporte, par d�faut, des commentaires qui expliquent bien la fonction de chaque ligne.


namespace CalculeTout
{
    public partial class App : Application
    {
      
      
        /// <summary>
        /// Permet d'acc�der facilement au frame racine de l'application t�l�phonique.
        /// </summary>
        /// <returns>Frame racine de l'application t�l�phonique.</returns>
        public PhoneApplicationFrame RootFrame { get; private set; }

        /// <summary>
        /// Constructeur pour l'objet Application.
        /// </summary>
        public App()
        {
            // Gestionnaire global pour les exceptions non intercept�es. 
            UnhandledException += Application_UnhandledException;

            // Initialisation Silverlight standard
            InitializeComponent();

            // Initialisation sp�cifique au t�l�phone
            InitializePhoneApplication();

            // Affichez des informations de profilage graphique lors du d�bogage.
            if (System.Diagnostics.Debugger.IsAttached)
            {
                // Affichez les compteurs de fr�quence des trames actuels.
                Application.Current.Host.Settings.EnableFrameRateCounter = true;

                // Affichez les zones de l'application qui sont redessin�es dans chaque frame.
                //Application.Current.Host.Settings.EnableRedrawRegions = true;

        // Activez le mode de visualisation d'analyse hors production, 
        // qui montre les zones d'une page sur lesquelles une acc�l�ration GPU est produite avec une superposition color�e.
        //Application.Current.Host.Settings.EnableCacheVisualization = true;

        // D�sactivez la d�tection d'inactivit� de l'application en d�finissant la propri�t� UserIdleDetectionMode de l'objet
            // PhoneApplicationService de l'application sur D�sactiv�.
            // Attention :- � utiliser uniquement en mode de d�bogage. Les applications qui d�sactivent 
			//la d�tection d'inactivit� de l'utilisateur continueront de s'ex�cuter
            // et seront aliment�es par la batterie lorsque l'utilisateur ne se sert pas du t�l�phone.
            PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Disabled;
            }

        }

        // Code � ex�cuter lorsque l'application d�marre (par exemple, � partir de D�marrer)
        // Ce code ne s'ex�cute pas lorsque l'application est r�activ�e
        private void Application_Launching(object sender, LaunchingEventArgs e)
        {
           
        }

        // Code � ex�cuter lorsque l'application est activ�e (affich�e au premier plan)
        // Ce code ne s'ex�cute pas lorsque l'application est d�marr�e pour la premi�re fois
        private void Application_Activated(object sender, ActivatedEventArgs e)
        {
           
        }

        // Code � ex�cuter lorsque l'application est d�sactiv�e (envoy�e � l'arri�re-plan)
        // Ce code ne s'ex�cute pas lors de la fermeture de l'application
        private void Application_Deactivated(object sender, DeactivatedEventArgs e)
        {
            // Assurez-vous que l'�tat de l'application requis est persistant ici.
           
        }

        // Code � ex�cuter lors de la fermeture de l'application (par exemple, lorsque l'utilisateur clique sur Pr�c�dent)
        // Ce code ne s'ex�cute pas lorsque l'application est d�sactiv�e
        private void Application_Closing(object sender, ClosingEventArgs e)

        {
           
        }

        // Code � ex�cuter en cas d'�chec d'une navigation
        private void RootFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            if (System.Diagnostics.Debugger.IsAttached)
            {
                // �chec d'une navigation�; arr�t dans le d�bogueur
                System.Diagnostics.Debugger.Break();
            }
        }

        // Code � ex�cuter sur les exceptions non g�r�es
        private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
        {
            if (System.Diagnostics.Debugger.IsAttached)
            {
                // Une exception non g�r�e s'est produite�; arr�t dans le d�bogueur
                System.Diagnostics.Debugger.Break();
            }
        }

        #region Initialisation de l'application t�l�phonique

        // �viter l'initialisation double
        private bool phoneApplicationInitialized = false;

        // Ne pas ajouter de code suppl�mentaire � cette m�thode
        private void InitializePhoneApplication()
        {
            if (phoneApplicationInitialized)
                return;

            // Cr�ez le frame, mais ne le d�finissez pas encore comme RootVisual�; cela permet � l'�cran de
            // d�marrage de rester actif jusqu'� ce que l'application soit pr�te pour le rendu.
            RootFrame = new PhoneApplicationFrame();
            RootFrame.Navigated += CompleteInitializePhoneApplication;

            // G�rer les erreurs de navigation
            RootFrame.NavigationFailed += RootFrame_NavigationFailed;

            // Garantir de ne pas retenter l'initialisation
            phoneApplicationInitialized = true;
        }

        // Ne pas ajouter de code suppl�mentaire � cette m�thode
        private void CompleteInitializePhoneApplication(object sender, NavigationEventArgs e)
        {
            // D�finir le Visual racine pour permettre � l'application d'effectuer le rendu
            if (RootVisual != RootFrame)
                RootVisual = RootFrame;

            // Supprimer ce gestionnaire, puisqu'il est devenu inutile
            RootFrame.Navigated -= CompleteInitializePhoneApplication;
        }

        #endregion
    }
}

En r�sum�: une page est donc une classe, elle est compos�e d'une partie XAML et d'une partie C#, tout cela est dans l'espace de noms ayant le nom de l'application.

Comment ouvrir une page nomm�e 'PageConvert.xaml' dans le code C#�?


 NavigationService.Navigate(new Uri("/PageConvert.xaml", UriKind.Relative));

V-C. Conteneur, position, dimensions des contr�les

Le positionnement des contr�les est fondamental, il faut bien le comprendre.

Comparaisons avec les WindowsForms.

En Windows Forms on pouvait mettre autant de contr�les que l'on voulait dans une fen�tre et on utilisait simplement les coordonn�es du coin sup�rieur gauche d'un contr�le pour d�finir sa position. En Windows Forms, en cas de changement d'�cran ou de modification des dimensions d'une fen�tre, si on voulait un r�agencement, il faudrait tout g�rer soit m�me.

En silverlight il faut utiliser la notion de conteneur et de position dans ces conteneurs. Le positionnement est relatif. Il y a capacit� d'adaptation aux modifications d'affichage et de disposition des fen�tres. Silverlight g�re la n�gociation entre les contr�les pour d�terminer la disposition. Un contr�le informe son parent de l'emplacement et de la taille dont il a besoin�; deuxi�mement, le parent informe le contr�le de l'espace dont il peut disposer. Cette disposition dynamique fait qu'un contr�le est positionn� sur une page en fonction de son contenu, de son conteneur de disposition parent.

La disposition silverlight est bas�e sur les grilles (Grid), l'empilement (Stack) et l'ancrage des contr�les.

V-C-1. Hi�rarchie des contr�les, arbre

Contr�les conteneurs et non conteneurs.

Certains contr�les (dits 'non conteneurs') ne peuvent contenir qu'un contr�le. Essayer de mettre deux TextBlock dans un bouton avec le designer ou une image et un texte dans un bouton�: impossible�!

Certains contr�les (dits 'conteneurs') peuvent contenir plusieurs contr�les. Une Grid, par exemple, qui peut contenir un �l�ment dans chacune de ses cellules�; un StackPanel peut contenir en empilement de contr�les.

Pour un bouton par exemple, en C#�:


MyButton.Content = "Ok";

affiche le texte 'Ok' dans le bouton.

En XAML�:


<Button Content="Ok"/>

Content.

Dans un contr�le non conteneur, la propri�t� 'Content' ne peut contenir qu'un objet et un seul.
Pour un bouton par exemple, on a deux mani�res d'�crire le texte du bouton�:


<Button Content="Ok"/>

ou�:


<Button> Ok </Button>

car Content est la propri�t� par d�faut.

Content peut contenir un texte mais pas seulement�; en fait il peut contenir un Objet (un seul)�: du texte mais aussi un objet conteneur comme une Grid, un Canvas, un StackPanel� qui lui peut contenir plusieurs contr�les. Cela revient � mettre autant de contr�les que l'on veut dans un contr�le.

Les conteneurs comme une Grid par exemple, ont une propri�t� nomm� Children qui permet d'ajouter plusieurs contr�les.


 MyGrid.Children.Add (Button1);

� titre d'exemple, on peut mettre une Grid dans un bouton et mettre dans les cellules de cette Grid deux textes, une image, une vid�o�

Voyons maintenant un exemple en XAML d'un conteneur, un StackPanel contenant un TextBlock et trois boutons�:


<StackPanel >
<TextBlock>Faire un choix:</TextBlock>
<Button >Option 1</Button>
<Button >Option 2</Button>
<Button >Option 3</Button>
</StackPanel>

Pour �tre complet certains contr�les ont un contenu sp�cifique�: un TextBlock par exemple, qui ne peut afficher que du texte, a une propri�t� 'text' permettant d'inclure du texte (et uniquement du texte).

Graphes d'objets.

Ainsi il y a des objets dans d'autres et donc une hi�rarchie des contr�les qui peut �tre repr�sent�e par un graphe.

Cela a son importance car on a vu qu'un �v�nement (un clic, par exemple) qui survient sur un contr�le (l'image en bas � droite) peut �tre rout�, remonter et �tre exploit� plus haut (au niveau de la grille, par exemple).

La classe VisualTreeHelper permet de trouver le parent ou les enfants d'un contr�le�:


// GetParent permet de r�cup�rer le parent de button1, un DependencyObjet
DependencyObject tb = VisualTreeHelper.GetParent (button1) as DependencyObject;

// Combien button1 a d'enfants?
int nbEnfant =VisualTreeHelper. GetChildrenCount( bouton1);


//R�cup�rer le premier enfant (index 0) de bouton1
TextBlock tb =VisualTreeHelper. GetChild( bouton1,0) as TextBlock;

// comme on sait que GetChild retourne un TextBlock on cast le dependencyObjet en TextBlock
//gr�ce � "as TextBlock"

� noter que GetChild retourne parfois des choses bizarres�! bogue�?

V-C-2. Nom, position et dimensions d'un contr�le

Ajoutons un bouton � la page, d�pla�ons le � la souris�:

Cela affiche le code XAML suivant�:


 <Button Content="Button" Height="95" HorizontalAlignment="Left" Margin="49,128,0,0" 
 Name="button1" VerticalAlignment="Top" Width="345" />

Name indique le nom du contr�le.
Content indique le texte affich� dans le bouton.
Height et Width indiquent les dimensions du bouton.
Margin indique les marges autour du bouton.
HorizontalAlignment indique sur quoi est ancr� le bouton.

Voyons cela en d�tails�:

Dimensions d'un contr�le.

Les dimensions sont, par d�faut, en pixels (px) ou "device independente unit".

Noter que les valeurs des dimensions et coordonn�es sont des 'Double' (nombre r�el en virgule flottante double pr�cision).


 <Button Name="button1" Content="Button" Height="80"  Width="150" />

En C#�:


Button1.Width="50";
Button1.Height="30;"

On peut utiliser une unit� diff�rente�:
px (valeur par d�faut) repr�sente les device-independente units ou pixels (1/96th inch per unit�;)
in est l'abr�viation du mot anglais � inches � (pouces)�; 1 in = 96 px�;
cm correspond � centim�tres�; 1 cm = (96/2,54) px�;
pt correspond � points�; 1 pt = (96/72) px.

Exemple�:


 <Button Name="button1" Content="Button" Height="4cm"  Width="1cm" />

Largeur et hauteur du bouton en centim�tres.


 <Button Name="button1" Content="Button" FontSize="36" />

Hauteur de la police�: 36 pixels soit 36x72/96 = 24 points.

Width et Height peuvent aussi prendre la valeur Auto. L'�l�ment remplit alors la largeur ou la hauteur disponible dans le conteneur (cela semble fonctionner uniquement s'il n'y a pas de HorizontalAlignment ou de VerticalAlignment ni de Margin).

On peut sp�cifier�:
MinWidth et MaxWidth (0 et infinity par d�faut),
MinHeight et MaxHeigth.
MinWidth et MinHeight servent � indiquer des dimensions minimales afin qu'un texte, par exemple, ne soit pas tronqu�.

Enfin ActualWidth et ActualHeigth indiquent les dimensions actuelles r�elles, si des contraintes (relation avec les autres contr�les, disposition�) imposent des dimensions diff�rentes de celles qu'on d�sirait. La disposition peut parfois rejeter les dimensions propos�es.

Alignement�:

VerticalAlignement et HorizontalAlignment d�finissent sur quoi est align� le contr�le. Le contr�le y sera 'ancr�', si on modifie les dimensions du conteneur, le contr�le suivra.

Cela remplace la propri�t� 'Anchor' des Windows Forms.

Rappelons que si on modifie la taille du conteneur, le contr�le reste � �gale distance du bord sur lequel il est align� (ancr�).

Valeur possible pour VerticalAlignement�: Top, Bottom, Center, Stretch (�tire le contr�le et le remplit verticalement).

Valeur possible pour HorizontalAlignment�: Left, Right, Center, Stretch (�tire le contr�le et le remplit horizontalement).

Attention, si on renseigne Width et Height Stretch ne fonctionne pas�!

Margin d�finit les distances au conteneur, les marges.

Margin="30,64,128,0" indique les marges gauche, sup�rieure, droite, inf�rieure.

Margin="30" indique que toutes les marges sont � 30.

Dans la fen�tre des propri�t�s d'un contr�le, la fl�che � droite de la propri�t� 'Margin' ouvre l'�diteur de marges�:

Paddding d�finit l'�paisseur d'une marge dans le contr�le. (valable dans certains contr�les seulement).

En pratique on positionne et on dimensionne le contr�le � la souris ce qui modifie en cons�quence les propri�t�s Width, Height et Margin.

En r�sum�:
Silverlight commence par regarder la propri�t� "Width". Si elle est d�finie, c'est cette valeur qui est utilis�e pour la largeur du composant, m�me si "HorizontalAlignment=Strech". Si aucune valeur n'est sp�cifi�e ou qu'elle vaut "Auto", Silverlight regarde la valeur de "HorizontalAlignment". Si la valeur est "Strech", la largeur sera tout l'espace disponible. Sinon, la propri�t� "Width" �tant sur "Auto", la largeur s'adaptera au contenu.

Bien comprendre qu'on ne travaille plus en coordonn�es absolues de position du contr�le (Left, Top c'est fini�) mais plut�t en accrochant les contr�les (avec une marge autour) dans un conteneur (Grid, StackPanel).

Dans ce chapitre, on voit le positionnement d'un contr�le dans un conteneur, pour �tre complet, il faut aussi voir le chapitre sur les conteneurs et les r�gles de positionnement dynamique. Dans une grille par exemple, dans chaque cellule on pourra positionner un contr�le comme indiqu� ici avec une 'margin' autour.

Exemple de cr�ation de contr�le enti�rement en C#�:
On peut avoir besoin au cours du d�roulement de l'application de cr�er de toute pi�ce un bouton.
Ici on a mis le code dans le constructeur de la page.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace courscsharp
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructeur
        public MainPage()
        {
            InitializeComponent();
            
            //D�claration d'un bouton
            Button myButton = new Button();// 'cr�ation d'un bouton 
            
            // Modification des propri�t�s du bouton
            myButton.Name="Bouton1";
            myButton.Height = 133;        // modification des dimensions du bouton
            myButton.Width = 155;
            myButton.HorizontalAlignment = HorizontalAlignment.Stretch;
            myButton.Content = "Button";  // texte affich�
            myButton.Margin = new Thickness(0, 0, 0, 370);
            
            //Gestion de l'�v�nement Click
            myButton.Click += new  RoutedEventHandler(button1_Click);
            
            //Ajout du bouton au conteneur
            ContentPanel.Children.Add(myButton);
			// 'met le bouton dans le conteneur ContentPanel
        }
        
        private void button1_Click(object sender, RoutedEventArgs e)
        //routine ex�cut�e lors de l'�v�nement Click
        {
            MessageBox.Show("Ok");
        }
    }

On remarque que si on cr�e un contr�le dans le code C#, il est n�cessaire d'ajouter ce contr�le � un conteneur d�j� pr�sent sinon le contr�le n'appara�t pas.
On voit aussi que Margin (comme Padding) accepte un objet Thickness (�paisseur). On en cr�e un avant de l'affecter � la propri�t� Margin.

V-C-3. Plan

Les objets peuvent �tre au premier plan ou au second plan�: l'objet de premier plan appara�tra au dessus des autres et les cachera s'il n'est pas transparent.

Dans le designer, cliquer sur un objet visuel, clic droit puis 'Ordre' puis 'Mettre au premier plan'.

En fait, il n'y a pas de propri�t� indiquant le plan, silverlight affiche les objets qui se trouvent dans un conteneur dans l'ordre du code XAML�; le fait de mettre un objet au premier plan met le code XAML de l'objet � la fin du conteneur�:


 <!--ContentPanel - placez tout contenu suppl�mentaire ici-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,-18">
 <ScrollViewer Height="193" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Left" Margin="2,463,0,0" 
              Name="scrollViewer1" VerticalAlignment="Top" Width="448">
    <TextBlock Name="TextLong" TextWrapping="Wrap" Width="417" Height="525" />
  </ScrollViewer>
  <TextBlock HorizontalAlignment="Center" Margin="15,354,24,244" Name="resultat2" Style="{StaticResource TextResultat}" 
              Text="" TextAlignment="Center" Width="417" />
  <Button Content="-" Height="81" Click="FaireMoins" HorizontalAlignment="Left" Margin="315,0,0,540" Name="ButtonMoins" 
              Style="{StaticResource MyButton}"
       VerticalAlignment="Bottom" Width="116" />
  <TextBlock Name="resultat" HorizontalAlignment="Center" Margin="22,180,17,392" Text="" Width="417" 
        Style="{StaticResource TextResultat}" TextAlignment="Center" />
  <Image Name="Image" HorizontalAlignment="Left" Margin="245,134,0,244" Stretch="Fill" Width="186" />
</Grid>

Ici l'image nomm�e 'Image' sera au premier plan.

V-D. Aspect des contr�les

Quand on d�pose un bouton dans un formulaire, il a un aspect 'standard', on a souvent besoin de modifier sa couleur ou sa forme, son aspect visuel�; c'est ce que nous allons voir. Dans ce chapitre on travaille sur UN contr�le. Dans le chapitre sur les ressources, on verra comment cr�er des mod�les de contr�les (avec les Styles et les Templates) pour les appliquer � un, plusieurs ou tous les contr�les.

V-D-1. Propri�t�s des contr�les

Ici on garde l'aspect g�n�ral du cont�le, on modifie simplement ses propri�t�s (Couleur, texte, font�).

On veut avoir ce beau bouton (bof�!), ci-dessous l'exemple�:

Avec le designer, on prend un bouton dans la bo�te � outils, on le pose dans un conteneur (une grid, par exemple).

Pour d�finir les dimensions, la couleur et le texte dans le bouton, on va modifier les propri�t�s dans la fen�tre de propri�t�s en bas � droite�:

Height et Width permettent de modifier les dimensions�;
Foreground et Background donnent la couleur du texte et du fond�;
BorderBrush et BorderThickness indique la couleur et l'�paisseur des bords�;
FontFamily indique le nom de la police de caract�res�;
FontSize indique la hauteur de la police�;
FontStyle permet de choisir entre Normal, Italic, Oblique�;
FontWeight permet de choisir entre Normal, Bold, Heavy��;
Name donne le nom du bouton en haut de la fen�tre�;
Content indique le texte � afficher.

En bas de l'�cran dans la fen�tre XAML, appara�t le code XAML correspondant au bouton.


<Button 
Height=" 100" Width="200" 
Foreground="White" Background="Red" 
BorderBrush="Green" BorderThickness="100" 
FontFamily="Algerian" FontSize="24" FontStyle="Italic" FontWeight="Bold"
Name="mybutton">Beau Bouton</Button>

Dans une fen�tre vide, on aurait pu coller le code XAML entre les balises Grid et voir appara�tre le bouton.

On aurait pu cr�er le bouton avec du code C#�:


            //D�claration d'un bouton
            Button myButton = new Button();// 'cr�ation d'un bouton 
            // Modification des propri�t�s du bouton
            myButton.Name="Bouton1";
            myButton.Height = 133;        // modification des dimensions du bouton
            myButton.Width = 155;
            myButton.HorizontalAlignment = HorizontalAlignment.Stretch;
            myButton.Content = "Button";          
            myButton.Background = new SolidColorBrush(Colors.Red);
            myButton.Foreground = new SolidColorBrush(Colors.White);
            myButton.BorderBrush = new SolidColorBrush(Colors.Green);
            myButton.BorderThickness = new Thickness(100);
            myButton.FontFamily = new FontFamily("Algerian");
            myButton.FontSize = 24;
            myButton.FontStyle = FontStyles.Italic;
            myButton.FontWeight = FontWeights.Bold;
            //Gestion de l'�v�nement Click
            myButton.Click += new  RoutedEventHandler(button1_Click);
            //Ajout du bouton au conteneur
            ContentPanel.Children.Add(myButton);
			// 'met le bouton dans le conteneur ContentPanel

On a � notre disposition une classe Colors qui contient les couleurs�:

On ne peut pas affecter directement une couleur � une propri�t� d�finissant une couleur�: myButton.Background = Colors.Red; ne fonctionne pas.

Il faut instancier et utiliser une SolidColorBrush�:


myButton.Background = new SolidColorBrush(Colors.Red);

Il en est de m�me avec FontFamily, FontStyle, FontWeight et Thickness (�paisseur). Il faut instancier une FontFamily, un FontStyle, un FontWeight ou un Thickness pour donner une valeur � la propri�t� correspondante.

L'�num�ration Brushes que l'on peut utiliser en WPF ne fonctionne pas ici�:


myButton.Background = Brushes.Red; //ne fonctionne pas

Au lieu de mettre une couleur unie dans le fond d'un contr�le, on peut y mettre une 'LinearGradientBrush' ce qui produit un bel aspect de Background d�grad�.

Cela donne�:

En XAML�:


 <Button Content="Inverse le Calcul" Height="69" HorizontalAlignment="Left" Margin="32,63,0,0" 
 Name="button1" VerticalAlignment="Top" Width="390" Click="button1_Click" >
                <Button.Background>
                <LinearGradientBrush >
                    <GradientStop Offset="0" Color="Blue" />
                    <GradientStop Offset="1" Color="SkyBlue" />
                </LinearGradientBrush>
                </Button.Background>              
            </Button>

Un contr�le peut �tre visible ou non�: (Visible ou Collapsed qui correspond � une taille de z�ro et n'occupe pas d'espace dans le layout.)


<Button Visibility="Collapsed" Content="Calcul" Height="69" Margin="32,63,0,0"

En C#�:


BtCalculer.Visibility = Visibility.Visible;
BtCalculer2.Visibility = Visibility.Collapsed;

On peut ajouter l'attribut Opacity dont la valeur va de 0 � 1.


<Image Source="C:/test.JPG" Opacity="0.5"/>

Avec la valeur 0.5 l'image est semi-transparente.

On peut aussi modifier les propri�t�s d'un contr�le ou d'un type de contr�le (tous les boutons de l'application) � l'aide des Ressources des Styles�; voir le chapitre 'Ressources'. Enfin on peut utiliser les data templates et contr�les templates (voir plus bas).

V-D-2. Contr�le contenant des contr�les

On a vu que la propri�t� Content d'un bouton pouvait contenir un objet mais un seul. On peut y mettre du texte, mais comment mettre un texte et une image dans un bouton�?

Il faut mettre un StackPanel (ou une Grid) dans le bouton (puisque celui-ci ne peut contenir qu'un seul objet), dans ce StackPanel (qui lui est un conteneur qui peut contenir x contr�les empil�s) mettre un TextBlock et une Image. Dans le designer c'est difficile de mettre un StackPanel dans un Button, il se met dessus et pas dedans (c'est gal�re�!), donc tapez ou collez le code XAML du StackPanel dans le bouton. De plus l'image doit �tre dans les ressources�: passer par le menu 'Projet' puis 'Ajouter un �l�ment existant', indiqu� 'resources' dans les 'options de g�n�ration' en bas. Voir le chapitre sur les ressources.


 <Button  Height="161" HorizontalAlignment="Left" Margin="32,63,0,0" Name="button1" 
 VerticalAlignment="Top" Width="390" Click="button1_Click" >
        <StackPanel   Name="StackPanel">
        <TextBlock HorizontalAlignment="Center"  TextAlignment="right">
                         Ok
        </TextBlock>
    <Image   HorizontalAlignment="Stretch" Source="wpfsilverlight.jpg" Height="67" Width="188">
                </Image>
        </StackPanel>
 </Button>

Cela donne�:

On se rend compte de la puissance de silverlight�: on peut mettre autant de contr�les que l'on veut dans un contr�le en utilisant des conteneurs. Dans notre bouton on aurait pu mettre deux images, deux textes�

V-D-3. Aspect visuel des contr�les: template visuel, style

Ici on modifie l'aspect profond des contr�les.

Chaque contr�le poss�de un template visuel ou Control Template qui permet de d�finir l'aspect visuel du contr�le, le template indique comment il sera dessin� (forme, arri�re plan, bords, coins, contenu�).

Ce template est entre les balises 'Button.Template' pour un bouton. On peut bien s�r modifier ce template, ce qui modifie l'aspect du bouton. On peut ainsi obtenir des boutons ronds, elliptiques�

Dans le template du bouton, ici, on va d�finir la forme qui est un rectangle mais aussi la forme des coins (radius).

On va donc faire un bouton Cyan avec des coins ronds (gr�ce � Rectangle RadiusX="39" RadiusY="39").


<Button Name="Button2" Margin="32,93,60,329" FontSize="40">
                <Button.Template>
                    <ControlTemplate>
                        <Grid>
                            <Rectangle RadiusX="39" RadiusY="39" Fill= "Cyan">
                            </Rectangle>
                            <ContentPresenter HorizontalAlignment="Center"
                             VerticalAlignment="Center" Content="BoutonTemplate"/>                          
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
</Button>

Cela donne�:

On voit qu'� partir du moment ou on utilise le ControlTemplate, il faut tout refaire, la forme du contr�le (Rectangle), mais aussi l'aspect du contenu ce qui explique l'usage du ContentPresenteur qui permet de g�rer le contenu. On aurait pu ajouter l'aspect du bouton s'il est 'Enabled', 'Focused' ou 'cliqu�' (voir le d�tail d'un template dans le chapitre sur les ressources).
Pour les listes on a un ItemsPresenter.

Si au lieu de mettre 'Rectangle Radius�' on met 'Ellipse', le bouton est en forme d'ellipse.


<Button Name="Button2" Margin="32,93,60,329" FontSize="40">
                <Button.Template>
                    <ControlTemplate>
                        <Grid>
                            <Ellipse Fill= "Cyan">
                            </Ellipse>
                            <ContentPresenter HorizontalAlignment="Center"
                             VerticalAlignment="Center" Content="BoutonTemplate"/>                          
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
</Button>

Cette exemple fonctionne mais est incomplet car comme dans le template, on n'a pas d�fini l'aspect du bouton en cas de clic ou quand il a le focus, le bouton ne change donc jamais d'aspect m�me quand on clique dessus�!

On pourrait cr�er un Style pour un bouton. En fait c'est beaucoup plus simple d'utiliser une propri�t� (les Styles sont plut�t utilis�s dans les ressources).

Dans ce chapitre, on a modifi� UN contr�le directement, il est possible de modifier un contr�le avec un style ou plusieurs contr�les de m�me type. Voir le chapitre sur les ressources qui parle des mod�les de contr�les et donne un exemple complet. Enfin, pour �tre complet, il est possible de modifier l'aspect des donn�es dans un contr�le gr�ce aux Data Template (mod�le de donn�es).

V-D-4. Transformation

Pour effectuer une transformation 2D sur un UIElement, on utilise la propri�t� RenderTransform.
On peut modifier l'�chelle, la rotation, l'oblicit�, le d�placement.

�chelle�:
on peut effectuer une transformation horizontale ou verticale gr�ce � un ScaleTransform.
Pour cela on d�finit ScaleX et ScaleY.

Dans un bouton, on dessine une loupe (avec un Path), puis on va l'agrandir gr�ce � RenderTransform.
ScaleX="3" ScaleY="3" indiquent d'agrandir de trois fois.


<Button   Name="btnStart" Click="btnStart_Click" Width="260" Margin="98,284,98,239">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
        <Path Fill="Blue" Data="F1 M 2.339,6.489 C 1.193,5.343 1.193,3.485 2.339,2.339 C 3.485,1.192 5.344,1.193 6.489,2.339 
                C 7.635,3.485 7.635,5.343 6.489,6.489 C 5.344,7.636 3.485,7.636 2.339,6.489 Z M 11.711,10.209 L 8.185,6.684 
                C 9.207,4.986 9.000,2.757 7.535,1.293 C 5.812,-0.431 3.017,-0.431 1.293,1.293 
                C -0.431,3.017 -0.431,5.812 1.293,7.536 C 2.757,8.999 4.988,9.206 6.685,8.185 
                L 10.209,11.710 L 11.711,10.209 Z" Margin="0,0,5,0" Height="36" Width="17">
                            <Path.RenderTransform>
                                <ScaleTransform ScaleX="3" ScaleY="3" />
                            </Path.RenderTransform>
        </Path>
        <TextBlock Foreground="White" Text="Chercher" Margin="20 0 0 0" />
        </StackPanel>
    </Button.Content>
</Button><br/>

Si ScaleX ou ScaleY sont n�gatifs, il y a inversion de l'�l�ment.
Attention pour que l'�l�ment reste au m�me endroit, il faut modifier l'origine de la transformation dans l'�l�ment (origine est par d�faut sur le coin sup�rieur gauche ce qui d�placerait l'�l�ment en haut � gauche).
Exemple avec un bouton.


<Button Content="Click"  RenderTransformOrigin="0.5, 0.5">
                <Button.RenderTransform >
                    <ScaleTransform ScaleX="-1" ScaleY="1" />
                </Button.RenderTransform>
</Button>

Rotation�:
On peut effectuer une rotation gr�ce � un RotateTransform.
Pour cela on d�finit Angle et si n�cessaire CenterX et CenterY.
Exemple�: texte vertical.


<TextBlock Text="Texte vertical" FontSize="32" Foreground="Teal" Margin="74,3,183,547">
  <TextBlock.RenderTransform>
    <RotateTransform Angle="90" />
  </TextBlock.RenderTransform>
</TextBlock>

Inclinaison�:
On peut effectuer une inclinaison gr�ce � un SkewTransform.
Pour cela on d�finit AngleX AngleY et si n�cessaire CenterX et CenterY.
Exemple�: texte pench�.


<TextBlock Text="Texte italique" FontSize="32" Foreground="Teal" Margin="74,3,183,547">
  <TextBlock.RenderTransform>
     <SkewTransform AngleX="45" />
  </TextBlock.RenderTransform>
</TextBlock>

D�placement�:
TranslateTransform permet de d�placer un �l�ment�; on renseigne ici X et Y qui indiquent le d�placement en pixels.
Ici on va d�placer le texte quand on pose le doigt dessus�; il revient � sa place quand on l�ve le doigt.


<TextBlock  MouseLeftButtonDown="Bouge" MouseLeftButtonUp="Bouge2"
                        Text="Texte qui bouge" FontSize="32" Foreground="Teal" Margin="74,3,114,547">
  <TextBlock.RenderTransform>
      <TranslateTransform x:Name="myTransform" />
  </TextBlock.RenderTransform>
</TextBlock>


private void Bouge(object sender, MouseButtonEventArgs e)
        {
            myTransform.X = myTransform.X + 15;
            myTransform.Y = myTransform.Y + 15;
        }

private void Bouge2(object sender, MouseButtonEventArgs e)
        {
            myTransform.X = myTransform.X - 15;
            myTransform.Y = myTransform.Y - 15;
        }

On peut aussi cr�er des effets visuels.


<TextBlock Text="Translate Transform"
Foreground="{StaticResource PhoneForegroundBrush}"
FontSize="48"
HorizontalAlignment="Center"
VerticalAlignment="Center" />

<TextBlock Text="Translate Transform"
Foreground="{StaticResource PhoneBackgroundBrush}"
FontSize="48"
HorizontalAlignment="Center"
VerticalAlignment="Center" >
<TextBlock.RenderTransform>
<TranslateTransform X="2" Y="2" />
</TextBlock.RenderTransform>
</TextBlock>

V-D-5. Font

Les 'fonts' correspondent aux polices de caract�res.

Quand on cr�e une page, les polices standards (ressources Windows Phone) sont utilis�es pour la page�:


<phone:PhoneApplicationPage 
    x:Class="MainPage"
    
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"

PhoneFontFamilyNormal correspond � la police M�tro 'Segoe WP'. PhoneFontSizeNormal correspond � 20 pixels.

Pour un contr�le comme un TextBlock, on peut modifier la police.


<TextBlock Text="15:03" FontFamily="Georgia"/>

Quand on tape FontFamilly=" la liste des polices disponibles s'affiche.

Pour ajouter une autre police�: charger une police gratuite et redistribuable (fichier .ttf), la mettre dans un r�pertoire /fonts du projet. L'ajouter au projet et dans les propri�t�s de la police mettre 'Option de g�n�ration' � 'contenu' et 'Copier dans le r�pertoire de sortie' � 'Copier si plus r�cent'.
Il semble que si on la met avec 'Option de g�n�ration' � Resources, on la voit dans la liste des polices (� v�rifier).
Pour l'utiliser�:


<TextBlock Text="15:03" FontFamily="fonts/DigitalDream.ttf#Digital Dream" FontSize="60"/>

Avant # il y a le nom du fichier '.ttf'.
Apr�s # il y a le nom de la police (ouvrir le fichier .ttf en cliquant dessus, il peut y avoir plusieurs polices dedans, voir le nom en haut).

Il faut trouver des polices redistribuables (licence GNU par exemple) et pas des polices pour usage personnel�:
voir ici http://www.dafont.com/fr/top.php?l[]=10.

On peut sp�cifier la hauteur de la police avec FontSize (en pixels)�:


<TextBlock Text="15:03"  FontSize="36"/>

En fait, la hauteur occup�e est de 33 % sup�rieur � la hauteur indiqu�e par FontSize car il y a quelques pixels blancs au dessus et au dessous.
Comme Point=3/4 *Pixels, une FontSize de 36 correspond � 24 Points.

V-E. Couleur, remplissage de surface

V-E-1. Couleur

Dans le code XAML, les couleurs sont d�sign�es directement�:


<Button Background="Red"/>

En fait il y a une conversion implicite du texte "Red" en System.Windows.Media.Brushes.Red.

On aurait pu �crire�:


<Button>A Button
  <Button.Background>
    <SolidColorBrush Color="Red" />
  </Button.Background>
</Button>

ou en donnant le code couleur du rouge en hexad�cimal�:


<Button>A Button
  <Button.Background>
    <SolidColorBrush Color="#FFFF0000" />
  </Button.Background>
</Button>

Les couleurs sont cod�es sur 32 bits�: composante alpha (transparence) sur 8 bits et R (rouge), B (bleu), G (vert) chacun sur 8 bits.

Quand dans le code XAML on tape Color=" une liste des couleurs s'ouvre�; il suffit de choisir une couleur. L� il y a une multitude de couleurs.

Voici les couleurs disponibles et leur valeur hexad�cimale�:

Bien s�r on peut agir sur la composante alpha pour rendre une couleur plus ou moins transparente, il y a aussi une couleur transparente�:


<StackPanel Background="Transparent" />

En C#�
On peut utiliser l'�num�ration Color de System.Windows.Media pour d�clarer une variable qui contient une couleur.
La classe Colors permet d'avoir la valeur de 15 couleurs diff�rentes�:


Color myColor = Colors.Green;

Les couleurs sont cod�es sur 32 bits�: composante alpha (transparence) et RBG.

On peut utiliser FromArgb pour indiquer les param�tres alpha, R, B, G.


myColor= Color.FromArgb(255, 0, 0, 255);
MessageBox.Show(myColor.ToString());//Affiche #FF0000FF

Il y a 15 couleurs dans la classe 'Colors', aussi pour utiliser dans le code C# les autres couleurs de la palette ci dessus, il faut utiliser la valeur hexad�cimale et la d�couper.
Pour obtenir la couleur 'Silver' de code hexad�cimal #FFC0C0C0.


col = Color.FromArgb(0xFF, 0xC0, 0xC0, 0xC0);

L'outil pinceau

Dans la fen�tre 'Propri�t�s', pour donner une couleur � la propri�t� (Background, par exemple) d'un contr�le on peut taper le nom de la couleur, on peut aussi ouvrir l'outil pinceau en cliquant sur la fl�che � droite�:

On peut choisir en haut une des ic�nes�: null, couleur unie, d�grad�, image.
Les curseurs permettent de doser la composante R, G, B et la composante alpha.
La valeur de la couleur est retourn�e en hexad�cimal�: #DF6C5F4D par exemple.

On peut aussi utiliser les couleurs Windows Phone standards (couleurs styles ou Brush) qui sont dans les ressources. Leurs noms commencent par 'Phone'�:


< Button Foreground="{StaticResource PhoneForegroundBrush}"" />

Ces ressources utilisent le th�me en cours (couleur de fond et couleur d'accentuation) que l'utilisateur � s�lectionn� dans les param�tres (fond clair ou fonc�).
Voir chapitre sur les th�mes.

S�lecteur de ressource
Dans la fen�tre 'Propri�t�s', pour donner une valeur ressource � la propri�t� (Background par exemple) d'un contr�le on peut ouvrir la fen�tre du s�lecteur de ressource en cliquant sur le carr� � c�t� du nom de la propri�t�:

Dans le menu, choisir 'Appliquer la ressource'.

Double cliquer sur la ressource d�sir�e.

Pour remplir une surface d'une forme (Rectangle, par exemple) avec une couleur on utilise Fill.


<Rectangle
    Width="200"
    Height="100"
    Fill="Blue"
    Stroke="Black"
    StrokeThickness="4" />

En C#


SolidColorBrush blueBrush = new SolidColorBrush();
blueBrush.Color = Colors.Blue;

blueRectangle.Fill = blueBrush;

LayoutRoot.Children.Add(blueRectangle);

Pour indiquer une couleur d'avant ou d'arri�re plan pour un �l�ment color� on utilise Foreground, Background.


<Button Background="Red"/>

On a vu qu'en C# il faut imp�rativement (m�me pour une couleur unie) utiliser une Brush (une brosse�!).
Voyons les Brush en d�tails.

V-E-2. SolidColorBrush

C'est simple, c'est une couleur unie.

On peut 'remplir' peindre un objet, le fond d'un bouton (Background), un rectangle et m�me du texte avec un pinceau, une brosse (Brush).

En XAML c'est simple de remplir avec une Brush de couleur unie.


<Rectangle Width="50" Height="50" Fill="Blue" />

En C# c'est plus compliqu�:


Button2.Background = new SolidColorBrush(Colors.Cyan);

On cr�e une instance de SolidColorBrush ( gr�ce � new) avec comme param�tre la couleur d�sir�e.

Exemple 1�: on veut choisir la couleur du Background d'un bouton.

On peut le d�finir en mode design dans la fen�tre de propri�t�s.

En XAML�:


<Button Background="Red"/>

ou en hexad�cimal�:


<Button Background="#FF0000FF"/>

ou en C#�:


myButton.Background = new SolidColorBrush(Colors.Red);

On ne peut pas affecter directement la couleur�: (myButton.Background = Colors.Red ne fonctionne pas) on est oblig� d'instancier une nouvelle SolidColorBrush et de lui donner la valeur Red qui appartient � la collection Colors.

Exemple 2�: cr�er un rectangle rouge.


 Rectangle Rect = new Rectangle();
Rect.Width = 75;
Rect.Height = 75; 
//Creation d'une SolidColorBrush  
SolidColorBrush  myBrush =  new SolidColorBrush(Colors.Red); 
Rect.Fill = myBrush;
ContentPanel.Children.Add ( Rect);

Remarquer qu'on a utilis� la m�thode Fill pour remplir le rectangle avec la Brush.

En XAML�:


<Rectangle Width="75" Height="75">  
<Rectangle.Fill> 
    <SolidColorBrush Color="Red" /> 
</Rectangle.Fill> 
</Rectangle>

V-E-3. LinearGradientBrush

Peinture avec d�grad� lin�aire.
C'est une couleur qui se transforme progressivement en une autre puis �ventuellement en une autre encore.

Il y a un system de coordonn�es sur la surface � remplir�: (0,0) est au coin sup�rieur gauche, (1,1) au coin inf�rieur droit.

'0.5, 0.5 ' correspond au centre.

StartPoint indique les coordonn�es du d�but du gradient, EndPoint les coordonn�es de la fin du gradient, GradientStop indique la position relative de la couleur sur la ligne qui rejoint le point de d�but au point de la fin.

Exemple 1�: sur une Grid, on positionne trois couleurs dans la diagonale.

On ne peut pas le faire dans la fen�tre designer avec la souris, le plus simple est de coller le code XAML dans la fen�tre XAML ou de l'�crire en C#.

Pour suivre la diagonale StartPoint="0,0" EndPoint="1,1". le rouge sera � 0 % de la diagonale, le blanc � 50 % le bleu � 100 %.

En XAML�:


<Grid >  
<Grid.Background> 
 <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 
 <GradientStop Color="Red" Offset="0" /> 
 <GradientStop Color="White" Offset="0.5" />  
 <GradientStop Color="Blue" Offset="1" /> 
 </LinearGradientBrush> 
 </Grid.Background> 
 </Grid>

En C#�:


  Rectangle Rect = new Rectangle();
            Rect.Width = 175;
            Rect.Height = 175;


            LinearGradientBrush myBrush = new LinearGradientBrush();
            myBrush.StartPoint = new Point(0, 0);
            myBrush.EndPoint = new Point(1, 1);
            GradientStop g1 = new GradientStop();
            g1.Color = Colors.Green;
            g1.Offset = 0.0;
            myBrush.GradientStops.Add(g1);
            GradientStop g2 = new GradientStop();
            g2.Color = Colors.White;
            g2.Offset = 0.5;
            myBrush.GradientStops.Add(g2);
            GradientStop g3 = new GradientStop();
            g3.Color = Colors.Blue;
            g3.Offset = 1.0;
            myBrush.GradientStops.Add(g3);
           
            Rect.Fill = myBrush;
            ContentPanel.Children.Add(Rect);

La syntaxe suivante pour le GradientStop, bien que correcte n'est pas accept�e�:


 myBrush.GradientStops.Add(new GradientStop(Colors.White, 0.5d));

Exemple 2�: plein de couleurs dans un rectangle.


<Rectangle Width="400" Height="200">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="Yellow" Offset="0.0" />
                        <GradientStop Color="Red" Offset="0.25" />
                        <GradientStop Color="Blue" Offset="0.75" />
                        <GradientStop Color="LimeGreen" Offset="1.0" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
</Rectangle>

Exemple 3�: sur un bouton avec un d�grad� de gris.

Pour que le gradient s'applique de haut en bas StartPoint="0,0" EndPoint="0,1" le blanc sera � 0 % de la verticale, le gris � 100 % de la verticale.

En XAML�:


<Button  Content="Ok">
<Button.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="LightGray" Offset="1" />
</LinearGradientBrush>
</Button.Background>
</Button>

Remarque�: on aurait pu mettre un GradientStop en dehors de la zone (� 2 par exemple pour le LightGray) ce qui permet d'estomper la couleur grise et de faire un bouton plus clair.

Exemple 4�: texte d'un bouton avec d�grad�.


<Button Content="Linear" >
        <Button.Foreground>
                    <LinearGradientBrush>
                        <GradientStop Offset="0" Color="Red" />
                        <GradientStop Offset="1" Color="Yellow"/>
                    </LinearGradientBrush>
        </Button.Foreground>
</Button>

Ici on a utilis� un LinearGradientBrush pour le Foreground.

V-E-4. RadialGradientBrush

Peinture avec d�grad� radial.
Ici on applique deux couleurs ou plus dans un cercle qui occupe la totalit� du conteneur.

Visualisons ce cercle et le system de coordonn�es�:

Le GradientOrigin donne le centre du gradient. Ci-dessous le centre du gradient est � 0.50, 0.50 (c'est sa valeur par d�faut) c'est � dire au centre du cercle. Les couleurs seront donc concentriques.

Les GradientStop indiquent la position des couleurs par rapport au centre�: le blanc est � l'offset 0�: disque de blanc au centre�; le bleu est � l'offset 0.5, cela donne un cercle de bleu autour du blanc�; le vert est � l'offset 1 (100 %): le cercle vert est autour du cercle bleu.

En XAML


<RadialGradientBrush GradientOrigin="0.50,0.50">
<GradientStop Color="white" Offset="0" />
<GradientStop Color="LightBlue" Offset="0.5" />
<GradientStop Color="LightGreen" Offset="1" />
</RadialGradientBrush>

Pour l'exemple suivant le centre du gradient est � 0.50, 1 excentr� en bas du cercle.

On a ajout� artificiellement, pour mieux comprendre, le cercle gris qui occupe la totalit� du conteneur et le centre du gradient symbolis� par un point noir.

L'offset du blanc est 0.75�: le blanc monte haut.

En XAML


<RadialGradientBrush GradientOrigin="0.50,1">
<GradientStop Color="white" Offset="0.75" />
<GradientStop Color="LightBlue" Offset="1.0" />
</RadialGradientBrush>

Ici l'offset du blanc est 0.50�: le blanc monte moins haut.

En XAML�:


<RadialGradientBrush GradientOrigin="0.50,1">
<GradientStop Color="white" Offset="0.50" />
<GradientStop Color="LightBlue" Offset="1.0" />
</RadialGradientBrush>

Exemple sur une Grid. Centre du gradient excentr� en haut � droite (0.75, 0.25) et il y a trois couleurs.

En XAML�:


<Grid > 
<Grid.Background >
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Grid.Background>
</Grid >

On peut avoir une ellipse au lieu d'un cercle en d�finissant RadiusX et RadiusY.


 <RadialGradientBrush 
          Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"/>

Un exemple complet en C#�:


            //Instancier un Radialgradientbrush
            RadialGradientBrush MyBrush = new RadialGradientBrush();

			//Mettre le GradientOrigin au centre.
			MyBrush.GradientOrigin = new Point(0.5, 0.5);

			// Mettre le centre du gradient au centre.
			MyBrush.Center = new Point(0.5, 0.5);

			// Mettre les radius pour que le gradient soit contre les bords.
			MyBrush.RadiusX = 0.5;
			MyBrush.RadiusY = 0.5;

			// Cr�er les gradients stops.
            GradientStop g1 = new GradientStop();
            g1.Color = Colors.Yellow;
            g1.Offset = 0.0;
			MyBrush.GradientStops.Add(g1);
            GradientStop g2  = new GradientStop();
            g2.Color = Colors.Blue;
            g2.Offset = 0.75;
			MyBrush.GradientStops.Add(g2);
             GradientStop g3 = new GradientStop();
            g3.Color = Colors.Green;
            g3.Offset = 1.0;
            MyBrush.GradientStops.Add(g3);
			
		
			//Cr�er un rectangle et le peindre avec la brush
			Rectangle aRectangle = new Rectangle();
			aRectangle.Width = 200;
			aRectangle.Height = 100;
			aRectangle.Fill = MyBrush;

            ContentPanel.Children.Add(aRectangle);

Autre exemple, une Sph�re�: on remplit une ellipse avec un RadialGradientBrush�:


<Grid >
            <Ellipse Height="200" Width="200" Margin="12,0,9,0">
                    <Ellipse.Fill>
                        <RadialGradientBrush Center="0.4 0.4"
                                            GradientOrigin="0.4 0.4">
                            <GradientStop Offset="0" Color="White" />
                            <GradientStop Offset="1" Color="YellowGreen"  />
                        </RadialGradientBrush>
                    </Ellipse.Fill>
            </Ellipse>
</Grid>

Dernier exemple�: utiliser une RadialGradientBrush comme Foreground d'un texte.


<TextBlock Text="GRADIENT BRUSH"
FontFamily="Arial"
FontSize="48" Margin="39,477,-39,-477">
<TextBlock.Foreground>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0" Color="Transparent" />
<GradientStop Offset="1" Color="White" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</TextBlock.Foreground>
</TextBlock>

V-E-5. ImageBrush

On peut mettre une image dans un rectangle, par exemple.

En XAML�:


<Rectangle Width="75" Height="75">  
<Rectangle.Fill>  
<ImageBrush ImageSource="c:\graphe.bmp" />  
</Rectangle.Fill>  
</Rectangle>

Si je donne � la propri�t� Foreground le nom d'une ImageBrush, le texte va �tre dessin� avec cette image�:


<TextBlock FontFamily="Verdana" FontSize="88"
 FontStyle="Italic" FontWeight="Bold">
    Philippe
  <TextBlock.Foreground>
    <ImageBrush ImageSource="C:\P1020907.jpg"/>
  </TextBlock.Foreground>
</TextBlock>

Il n'y a pas de VirtualBrush en WP7.

V-E-6. Masque d'opacit�

Dans les UIElements, une image par exemple, on peut mettre un masque d'opacit� (propri�t� OpacityMask), il permet de modifier la transparence d'une image en fonction d'un masque qui peut �tre un d�grad� ou une image.
Seule la composante alpha du masque est prise en compte. L'image h�rite de la transparence du masque.

Ici sur l'image de cet oiseau on applique un masque qui est une RadialGradientBrush de plus en plus transparente vers l'exterieur.


<Image Source="oiseau.jpg">
                <Image.OpacityMask>
                    <RadialGradientBrush>
                        <GradientStop Offset="0" Color="White" />
                        <GradientStop Offset="0.8" Color="White" />
                        <GradientStop Offset="1" Color="Transparent" />
                    </RadialGradientBrush>
                </Image.OpacityMask>
</Image>

Effet miroir�:
Ici on affiche 2 fois la m�me image. On inverse la seconde par rapport � l'axe des Y gr�ce � RenderTransform et on lui applique un masque qui est un LinearGradientBrush.


<Image Source="oiseau.jpg" Stretch="None"
VerticalAlignment="Top" />
            
<Image Source="oiseau.jpg" Stretch="None"
VerticalAlignment="Top"
RenderTransformOrigin="0.5 1">
         <Image.RenderTransform>
                <ScaleTransform ScaleY="-1" />
         </Image.RenderTransform>
         <Image.OpacityMask>
              <LinearGradientBrush StartPoint="0, 0" EndPoint="0, 1">
                   <GradientStop Offset="0" Color="#00000000" />
                   <GradientStop Offset="0.5" Color="#40000000" />
              </LinearGradientBrush>
         </Image.OpacityMask>
</Image>

V-E-7. Nombre de couleurs et d�grad�s

Les t�l�phones Windows Phone 7 ont des �crans 32 bpp (bits par pixel) ou des �crans 16 bpp (bits par pixel), l'�mulateur est en 16 bpp pour aider les d�veloppeurs � concevoir des applications qui fonctionnent quel que soit le mat�riel.
Aussi dans l'�mulateur les d�grad�s ne sont pas beaux et pr�sentent des bandes color�es
(pour �tre s�r d'avoir un beau d�grad�, certains proposent d'afficher l'image d'un d�grad� qu'on aura flout� dans PaintNet ou PhotoShop).

V-F. Ressources

Les ressources sont un ensemble d'�l�ments�:
- Couleurs, Brush, Style, ControlTemplate (aspect du contr�le), DataTemplate (affichage des donn�es) ressources dites 'internes'�;
- Images, ic�nes, textes, sons (ressources contenues dans des fichiers externes).

Nous allons donc voir

1- Les ressources internes.

2- Les fichiers de ressources externes.

3- Les ressources fournies par WP.

V-F-1. Les dictionnaires de ressources

On a vu ant�rieurement comment modifier certaines propri�t�s d'UN contr�le. Mais il est possible de cr�er des mod�les pour ensuite les appliquer � un ou plusieurs contr�les.
Ici on va voir comment cr�er des styles, des mod�les de contr�les, des mod�les de donn�es pour les appliquer � un, plusieurs ou tous les contr�les ou donn�es .

V-F-1-a. Ressources 'simples'

Plut�t que d'indiquer X fois quelle couleur ou Brush utiliser dans plusieurs contr�les d'une fen�tre, il est plus simple de d�finir une ressource contenant la couleur ou la Brush puis X fois, indiquer pour chaque contr�le quelle ressource utiliser.

Les ressources sont dans un dictionnaire de ressources. Dans les ressources de l'application, d'une page ou d'un objet, entre les balises de d�but et de fin de ressources.


<Grid.Resources>

</Grid.Resources>

Remarquez�: Resources avec un 's' et non Ressources.

Ici dans ces ressources simples, la ressource est une Brush, une couleur un texte�

Chaque ressource doit avoir une cl� unique. Il faut affecter la cl� unique via l'attribut x:Key.

En principe, la cl� est une cha�ne de caract�res.


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.Resources>
  <SolidColorBrush x:Key="MyBrush" Color="Gold"/>
</Grid.Resources>

Ici la cl� unique de la SolidColorBrush est "MyBrush", c'est son 'nom', son nom d'index.
Elle est dans les ressources de la grille.

Ensuite dans le code XAML de l'UI on utilise cette ressource gr�ce � {StaticResource MyBrush}.
Seul le contr�le utilisant la ressource la prendra en compte�!
Ici dans la grille o� se trouve la ressource, on a un bouton et une ellipse. On peut donc utiliser la ressource dans le bouton et l'ellipse.


<Button Background="{StaticResource MyBrush}"/>


<Ellipse Fill="{StaticResource MyBrush}"/>

En C#�:


//ContentPanel.Resources contient les ressources de la grille.
//Comme la ressource "MyBrush" est un objet, on la caste en Brush.
button1.Background = (Brush)ContentPanel.Resources["MyBrush"];

// Si la ressource avait �t� dans App.xaml
button1.Background = (Brush) Application.Current.Resources["MyBrush"];

Exemple complet

Dans une Grid, on cr�e une ressource de type LinearGradientBrush nomm�e BrushBizarre, ensuite on applique cette Brush au fond d'un bouton.


<Grid> 
  <Grid.Resources> 
    <LinearGradientBrush x:Key="BrushBizarre">
      <GradientStop Color="Yellow" Offset="0" /> 
      <GradientStop Color="Green" Offset="1" /> 
    </LinearGradientBrush> 
  </Grid.Resources> 


  <Button Background="{StaticResource BrushBizarre}">Click Me</Button> 
</Grid>

O� mettre les ressources�?

-Dans un objet. Dans une Grid comme dans l'exemple pr�c�dent, syntaxe�: Grid.Resources�; dans ce cas la Grid mais aussi tous les objets contenus dans la Grid peuvent utiliser la ressource.


<Grid.Resources>
  <SolidColorBrush x:Key="MyBrush" Color="Gold"/>
</Grid.Resources>

En C#�comment utiliser la ressource�?


//ContentPanel.Resources contient les ressources de la grille nomm�e ConcentPanel.
//Comme la ressource "MyBrush" est un objet, on la caste en Brush.
button1.Background = (Brush)ContentPanel.Resources["MyBrush"];

-Dans une Page, ici on cr�e une ressource string dans la page.


xmlns:system="clr-namespace:System;assembly=mscorlib"
  
    <phone:PhoneApplicationPage.Resources>
        <system:String x:Key="LeTitre">Cours Wp</system:String>
    </phone:PhoneApplicationPage.Resources>

On remarque que pour utiliser une string comme ressource, il faut au pr�alable importer l'espace de noms system.

Comment l'utiliser dans la page�?


<TextBlock x:Name="ApplicationTitle" Text="{StaticResource LeTitre}"/>

En C#�:


TextBlock1.Text = (string) this.Resources["LeTitre"];

-Dans le fichier Application.

C'est le fichier App.xaml.


  <Application.Resources>
		 <SolidColorBrush x:Key="MyBrush" Color="Gold"/>
  </Application.Resources>

Dans ce cas la ressource est utilisable dans toute l'application.

On peut l'utiliser dans un TextBlock�:


 <TextBlock x:Name="PageTitle"  Foreground="{ StaticResource MyBrush}" 
 Text="nom de la page" />

Comment r�cup�rer la brush en C#�?


SolidColorBrush sb = Application.Current.Resources["MyBrush"] as SolidColorBrush;

- Dans un fichier de ressources ind�pendant.

Menu 'Projet', puis 'Ajouter un nouvel �l�ment' puis 'Fichier texte'. Nommer le 'Dictionnary1' puis Ok.

Y mettre une SolidColorBrush.


  <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <SolidColorBrush x:Key="MyBrush" Color="Gold"/>
  </ResourceDictionary>

Pour que cela fonctionne, il faut ajouter dans le fichier App.xaml la r�f�rence au dictionnaire.


  <Application x:Class="Application"

 

  <Application.Resources>
	<ResourceDictionary.MergeDictionaries>
   		<ResourceDictionary Source="Dictionary1.xaml"/>
	</ResourceDictionary.MergeDictionaries>
  </Application.Resources>

  </Application>

L'emplacement o� est d�clar� la ressource affecte l'emplacement o� la ressource peut �tre utilis�e.

Si vous d�clarez la ressource dans votre fichier App.xaml avec la balise 'Application.Resources', elle pourra �tre utilis�e n'importe o� dans votre application.

Si vous d�clarez la ressource dans une Grid gr�ce � 'Grid.Resources', elle pourra �tre utilis�e uniquement dans la Grid et dans les objets enfants qui sont dans cette grille.

Il n'existe pas de ressources 'Dynamiques' en WP.

V-F-1-b. Les styles

Le style est une ressource qui est applicable � un objet ou un 'Type' d'objet. On peut cr�er un style pour les Buttons, les List�
Il correspond � l'identification de plusieurs propri�t�s par un nom, que l'on peut appliquer ensuite facilement � plusieurs contr�les.
Il peut �tre plac� dans les ressources d'un objet, d'une page ou d'une application.

Ici on va cr�er un style pour les TextBlock.

TargetType="TextBlock" indique quel type cela concerne.

x:Key= , indique le nom du style.

Setter va servir � d�finir une Property � laquelle on va donner une Value. Dans ce style, gr�ce � 'Setter Property=' on affecte des valeurs aux propri�t�s des TextBlock.


<Application.Resources>
<Style TargetType="TextBlock" x:Name ="MyTB">
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontFamily" Value="Trebuchet MS"/>
</Style>
</Application.Resources>

Ensuite, dans un TextBlock on peut utiliser le style.

Il faut utiliser l'attribut Style= dans le TextBlock sur lequel on veut appliquer le style.


 <TextBlock Style="{StaticResource MyTB}" >Titre</TextBlock>

Depuis WP 7.1 (Mango), si on omet x:Name dans un style, cela permet d'appliquer le style automatiquement � tous les objets correspondant au TargetType.

Si on enl�ve x:Name�:


<Application.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontFamily" Value="Trebuchet MS"/>
</Style>
</Application.Resources>

Le style sera appliqu� dans le textblock qui suit et tous les textblocks.


 <TextBlock >Titre</TextBlock>

On vient d'utiliser un Setter pour modifier une propri�t�, mais il est possible dans un style de mettre un DataTemplate (mod�le de donn�e), un ControlTemplate (mod�le de contr�le).
Voyons un exemple avec un ControlTemplate (lire le chapitre suivant avant).
Ici on cr�e un style contenant un ControlTemplate donnant des boutons ronds et rouges.


 <!--Ressources d'applications-->
    <Application.Resources>
        <Style TargetType="Button" x:Name="MyStyle">


            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontFamily" Value="Trebuchet MS"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Width="100" Height="100" Fill="Red"></Ellipse>
    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center">
                            </ContentPresenter>
                        </Grid>
                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style>
      
    </Application.Resources>

Pour simplifier, le template n'est pas complet�; en particulier, le bouton ne change pas d'aspect quand on clique.

Et pour l'utiliser sur un bouton�:


 <Button Style="{StaticResource MyStyle}" Content="Ok" Height="153" 
 HorizontalAlignment="Left" Margin="56,48,0,0" Name="button1" VerticalAlignment="Top" Width="337" />

En C# pour appliquer le style � un contr�le�:


Button1.Style= (Style)(this.Resources["MyStyle"]);

On peut dans un style r�cup�rer un style existant et l'�tendre. On utilise BaseOn pour r�cup�rer un style.


<Style x:Key="MybaseStyle">
  <Setter Property="FontSize" Value="24" />
  <Setter Property="Background" Value="Orange" />
</Style>
 
 
<Style x:Key="boldStyle" BasedOn="{StaticResource MybaseStyle}">
  <Setter Property="FontWeight" Value="Bold" />
</Style>

V-F-1-c. Les mod�les de contr�le�: ControlTemplate

On a vu plus haut qu'on pouvait mettre un template (mod�le, gabarit) dans un contr�le�:


<Button>
  <Button.Template>
  <ControlTemplate>
  
  <ControlTemplate>
  </Button.Template>
</Button>

Mais on peut aussi cr�er des Mod�les de contr�le (ControlTemplate) dans les ressources permettant de modifier tous les contr�les d'un m�me type.

On sp�cifie la structure visuelle et les aspects comportementaux d'un type de contr�le. L�, on ne modifie pas une simple propri�t� du contr�le, mais son aspect profond.

Si on �crit un ControlTemplate, on va d�finir son aspect visuel (fond, forme�), il faut aussi obligatoirement red�finir l'aspect de son contenu (ControlPresenter) et si n�cessaire les modifications li�es aux �v�nements (VisualStateManager).

Comment avoir des boutons en forme d'ellipse�?

Dans les ressources de l'application (dans App.xaml), on va cr�er un style pour les boutons, on va sur le template et son ControlTemplate.
- Pour la forme du bouton, on va mettre dans une grille une ellipse (la remplir avec une Brush).
- Pour le texte on ajoute un ContentPresenter.
- Pour modifier la couleur quand le bouton est 'Pressed', on utilise un VisualStateManager contenant un Storyboard qui modifie la Brush de l'ellipse. Le bouton devient blanc quand on clique dessus.


 <!--Ressources d'applications-->
    <Application.Resources>
        <Style TargetType="Button" x:Key="MyButton">
         <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                       
                            <Grid>
                            <Ellipse>
                                <Ellipse.Fill>
                                    <SolidColorBrush x:Name="EllipseBrush" Color="Blue"/>
                                </Ellipse.Fill>
                            </Ellipse>

                            <ContentPresenter 
                             Margin="2"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"/>

                                <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                     <VisualStateGroup.Transitions>
                                        <VisualTransition From="Normal" To="Pressed" GeneratedDuration="0:0:0.5"/>
                                    </VisualStateGroup.Transitions> 

                                    <VisualState x:Name="Normal" />

                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="EllipseBrush" 
                                             Storyboard.TargetProperty="Color" To="White" />
                                        </Storyboard>
                                    </VisualState>
                                    
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                               
                           
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

Pour un contr�le liste on aurait utilis� un ItemsPresenter.

Pour appliquer le style a un bouton�:


<Button Style="{StaticResource MyButton}" Content="Button" Height="66" Name="button1"  Width="289" />

V-F-1-d. Les mod�les de donn�es�: Data Template

Enfin pour �tre complet il est possible de modifier l'aspect des donn�es affich�es dans un contr�le gr�ce au Data Template (mod�le de donn�es)�; voir le chapitre sur les liaisons de donn�es pour le d�tail.

Utilisation de Template dans une ListBox.

Gr�ce � l'ItemTemplate on peut afficher les items d'une ListBox comme on veut.
Ici on veut afficher dans une ListBox une collection.
Pour chaque Item on affiche une petite sph�re, la propri�t� 'Nom' en gros et la propri�t� 'TextBref' dessous en plus petit.

On suppose que la collection a d�j� �t� cr��e (voir exemple en fin de chapitre sur les collections) et qu'on effectue une liaison (Binding) de la collection sur la ListBox, ce qui remplit automatiquement la ListBox avec la collection.

Dans l'ItemTemplate on met un StackPanel dans lequel on met une ellipse puis deux TextBlock qui sont en liaison avec les propri�t�s 'Titre' et 'TextBref'.


<ListBox Name="ListBoxConversion"  Margin="10,10,23,-9" ItemsSource="{Binding}" 
Height="524" Width="400"  MouseLeftButtonUp="ListBoxConversion_Appel"  >
 <ListBox.ItemTemplate>
  <DataTemplate>
    <StackPanel Orientation="Horizontal" Margin="0,0,0,17"  >
    <!--La petite sph�re-->
        <Ellipse Height="30" Width="30"  Margin="12,0,9,0">
        <Ellipse.Fill>
        <RadialGradientBrush Center="0.4 0.4"
        GradientOrigin="0.4 0.4">
        <GradientStop Offset="0" Color="White" />
        <GradientStop Offset="1" Color="Blue"  />
        </RadialGradientBrush>
        </Ellipse.Fill>
    	</Ellipse>
        <StackPanel Width="311">
    <!--Les 2 lignes Nom et TextBref-->
<TextBlock Foreground="Azure" Text="{Binding Titre}" TextWrapping="Wrap" 
Style="{StaticResource PhoneTextLargeStyle}"   />
<TextBlock Text="{Binding TextBref}" TextWrapping="Wrap" Margin="12,-6,12,0" 
Style="{StaticResource PhoneTextSubtleStyle}" />
        </StackPanel>
    </StackPanel>
  </DataTemplate>
 </ListBox.ItemTemplate>
</ListBox>

Comment afficher une liste d'images�?
Mesphotos �tant une liste de noms d'images, la propri�t� 'NomImage' contient le nom de la photo�; on montre ici le principe simplement.


<ListBox ItemsSource="{Binding Source={StaticResource MesPhotos}}"/>

Ici on affiche la liste des noms d'images.
Comment afficher les images elle m�mes�? en cr�ant un DataTemplate.
Il affiche pour chaque �l�ment une ligne contenant le nom de l'image puis l'image elle-m�me.


<ListBox ItemsSource="{Binding Source={StaticResource MesPhotos}}">
<DataTemplate>
 <StackPanel Orientation ="Horizontale">
   <TextBlock Text= "{Binding NomImage}">
   <Image Source="{Binding NomImage}"/>
  </StackPanel>
</DataTemplate>
</ListBox>

Ici le Data Template est dans le contr�le, on aurait pu cr�er un DataTemplate dans les ressources.

V-F-2. Les fichiers de ressources

On peut ajouter dans le projet des fichiers image, son, ic�ne�
Exemple de fichier Image.

J'ai une image nomm�e 'xvide.jpg', je veux la mettre dans les ressources pour la charger dans un contr�le image.

Mettre le fichier image dans le r�pertoire des sources (dans C:\Documents and Settings\phil\Mes documents\Visual Studio 2010\Projects\MyApplication\MyApplication).

Mettons � jour les fichiers de l'explorateur de solution en cliquant sur le bouton en haut (voir ci-dessous).
Le fichier appara�t dans l'explorateur de solution mais en gris�.

Clic droit sur le fichier puis sur 'Inclure dans le projet'.
Le fichier devient une 'resource' (voir en bas dans les propri�t�s, 'Action de g�n�ration=Resource').

On peut aussi passer par�: Menu Projet=>Ajouter un �l�ment existant.

Si on a cr�� un r�pertoire nomm� image, pointer C:\Documents and Settings\phil\Mes documents\Visual Studio 2010\Projects\MyApplication\MyApplication\image\xvide.jpg, puis cliquer sur 'Ajouter'.

Le fichier appara�t dans l'explorateur de solution (en haut � droite).

L� aussi dans la fen�tre des propri�t�s du fichier 'Action de g�n�ration'�prend la valeur 'Resource' par d�faut.

Mettre la ressource dans l'image.


<Image Margin="34,36,48,46" Name="Image" Stretch="Fill" Source="/NomDuProjet;component/xvide.jpg" />

Notez bien�: pas de chemin.

L'image xvide.jpg appara�t dans le contr�le image.

Dans le code C#�:


Image1.Source = New BitmapImage(New Uri("/NomDuProjet;component/xvide.jpg", UriKind.Relative));

Lors de la g�n�ration du projet, l'image sera dans l'ex�cutable.

On peut passer par les ressources de l'application.

-Charger xvide.jpg dans le projet comme ci-dessus.

-Cr�er une ressource nomm�e "someImage" dans Application.xaml


<Application.Resources>
<ImageSource x:Key= "someImage">xvide.jpg</ImageSource>
</Application.Resources>

-Mettre la ressource dans une image


<Image Margin="34,36,3,8" Name="Image1" Stretch="Fill" Source="{StaticResource someImage}"/>

Bien s�r, on peut utiliser des ic�nes.
On peut aussi donner l'adresse Internet d'une image.

Revenons sur les valeurs d' 'Option de g�n�ration' dans les propri�t�s d'un fichier�:

Si on d�roule la liste, on a les valeurs�:
- Aucun�: Le fichier n'est pas inclus dans le groupe de sorties de projet et n'est pas compil� au cours du processus de g�n�ration. Fichier texte contenant de la documentation par exemple�;
- Compiler�: Le fichier est compil� dans la sortie de projet. Cette valeur est utilis�e par d�faut pour les fichiers de code (.cs)�;
- Page�: Le fichier est compil� dans la sortie de projet. Cette valeur est utilis�e par d�faut pour les fichiers .xaml�;
- ApplicationDefinition�: Cette valeur est utilis�e par d�faut pour App.xaml�;
-�Contenu : Le fichier n'est pas compil�, mais il est inclus dans le groupe de sorties Contenu. Valeur par d�faut d'un fichier .htm ou d'autres types de fichier Web, par exemple�;
-�Resources : Cette action de g�n�ration va incorporer le fichier dans l'assembly du projet (correspond aux ressources incorpor�es).
-�Ressource incorpor�e�: semble ne pas pouvoir �tre utilis� en silverlight.

Notez que dans l'explorateur de solutions , si on ajoute une image (menu 'Projet', 'Ajouter un el�ment existant' ), l'option 'Action de g�n�ration' prend la valeur 'Resource'.

On peut, quand on met une image dans le projet, en faire un 'Contenu' ou une 'Resource'.
Avec 'Contenu', le fichier image est dans le fichier d'installation XAP mais pas dans la DLL. Cela serait plus performant.
Noter la syntaxe de la valeur de 'Source':


<Image Name="Image" Source="xvide.jpg" />

Avec 'Resource', le fichier image est incorpor� dans le fichier DLL qui est dans le XAP.
Noter la syntaxe de la valeur de 'Source':


<Image Name="Image" Source="/NomDuProjet;component/xvide.jpg" />

V-F-3. Ressources Windows Phone

WP fournit un dictionnaire de ressources dont on peut utiliser les valeurs dans une application. Ce sont des valeurs 'standards' propos�es par Microsoft.
Elles sont en rapport avec le th�me en cours (couleur de fond�: claire ou fonc�e, couleur d'accentuation).
Le nom de ces ressources commence par 'Phone'.

Il y a des PhoneBrush dans ces ressources.
Par exemple pour un fond de page on va utiliser le fond de page standard�: PhoneForegroundBrush.


Foreground="{StaticResource PhoneForegroundBrush}"

Il y a aussi des PhoneColor , PhoneFonts, les tailles pour les caract�res (PhoneFontSizeMedium = 17),
mais aussi les �paisseurs pour les propri�t�s Thickness, Padding�
enfin les styles de texte et la visibilit� ou l'opacit� du th�me.

Voici un exemple de l'utilisation d'un style dans un TextBox�:


<TextBlock x:Name="PageTitle" Text="MonTitre"  Style="{StaticResource PhoneTextTitle1Style}" />

Voici o� trouver toutes les ressources et leur valeur�:

Ressources pour Windows Phone 7.1.

D'ailleurs, automatiquement, quand on cr�e une page, la police 'normale' est utilis�e pour la page, ainsi que la couleur du fond�:


<phone:PhoneApplicationPage 
    x:Class="MainPage"
    
    FontFamily="{StaticResource PhoneFontFamilyNormal}"  // c'est la police M�tro: 'Segoe WP'
    FontSize="{StaticResource PhoneFontSizeNormal}"      // 15 pts, 20 pixels
    Foreground="{StaticResource PhoneForegroundBrush}"

Pour afficher le nom de l'application et le titre on utilise PhoneTextNormalStyle et PhoneTextTitle1Style�:


<!--TitlePanel contient le nom de l'application et le titre de la page-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MON APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="nom de la page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

C'est la ressource 'PhoneFontFamilyNormal' (correspondant � la police M�tro 'Segoe WP') qui est donc utilis�e pour le texte de la page.

Comment utiliser les couleurs du th�me actuel�?

Dans les param�tres du Windows Phone on peut choisir�:
L'arri�re plan (clair ou sombre)�;
La couleur d'accentuation (11 couleurs propos�es).

Ces couleurs se retrouvent dans les ressources Windows Phones�: la couleur de fond est PhoneBackgrountColor�;
la couleur d'accentuation est PhoneAccentColor.
Il y a les Brush correspondantes�:

Dans le code XAML, quand on utilise des ressources comme couleur, ce sont les 'Brush' qu'il faut utiliser et pas les couleurs.

PhoneAccentBrush�: Brush d'accentuation d�finie par le th�me.

PhoneForegroundBrush�: Brush utilis�e pour les �l�ments de premier plan tels que le texte ou les ic�nes.

PhoneBackgroundBrush�: Brush utilis�e pour les �l�ments d'arri�re-plan.

PhoneContrastBackgroundBrush�: Brush de fond utilis�e pour mettre en contraste (fond des menus contextuels par exemple).

PhoneContrastForegroundBrush�: Brush de premier plan utilis�e pour les �l�ments � mettre en contraste. Par exemple les textes des menus contextuels.

PhoneDisabledBrush�: Brush des �l�ments d�sactiv�s.

PhoneSubtleBrush�: Brush partiellement transparente qui permet de mettre en retrait des �l�ments visuels moins importants.

PhoneBorderBrush�: Brush de bordure des contr�les TextBox, CheckBox, PasswordBox, et RadioButton.

PhoneSemitransparentBrush�: Brush presque transparente permettant de faire ressortir des �l�ments de couleurs similaires (par exemple du texte blanc sur une image claire).

On peut aussi utiliser les styles�:
PhoneTextNormalStyle qui contraste avec la couleur du fond pour le rendre lisible, PhoneTextTitle1Style.

Voir le chapitre sur les th�mes.

S�lecteur de ressource�: dans la fen�tre 'Propri�t�s', pour donner la valeur d'une ressource � la propri�t� (BackGround par exemple) d'un contr�le on peut ouvrir le s�lecteur de ressource en cliquant sur le carr� � cot� du nom de la propri�t�.

Dans le menu, choisir 'Appliquer la ressource'.

Double cliquer sur la ressource d�sir�e.

Typographie�:

il est conseill� d'utiliser la typographie recommand�e.

V-G. Les liaisons de donn�es ou Binding

V-G-1. Principes du Binding

Binding veut dire liaison.

"Les liaisons de donn�es sont des processus qui �tablissent une connexion entre l'interface utilisateur de l'application et la logique m�tier." En d'autres termes, elles permettent d'�tablir une connexion entre un contr�le et une sources de donn�es. Cela permet, par exemple, d'afficher automatiquement le contenu d'une base de donn�es, d'une collection� dans une ListBox�

Il faut donc un objet visuel, la cible (ListBox, TextBox�) ayant une propri�t� de d�pendance et faire une liaison avec la source de liaison qui est la propri�t� d'un objet (collection, tableau, base de donn�es�).
La liaison peut �tre unidirectionnelle (OnWay= en lecture seule de la source) ou bidirectionnelle (TwoWay), ce qui permet dans ce dernier cas de mettre � jour la source quand on fait une modification dans l'UI.

Binding entre objets�:

Pour qu'une propri�t� d'un objet (dit 'cible') soit li�e � une source, il faut lui affecter un objet Binding (Text="{Binding�) puis indiquer l'objet source avec ElementName et la propri�t� source avec Path�:


<TextBox Text="{Binding Path=Text, ElementName=txtsource}"  />

Ici la propri�t� Text du TextBox est li�e � la propri�t� Text d'un autre contr�le. Si on tape un texte dans le contr�le txtsource, il apparaitra dans la propri�t� Text de notre TextBox.

DataContext

La propri�t� DataSource des contr�les WindowsForms n'existe plus�; les contr�les silverlight ont un DataContext. Il peut �tre renseign� en XAML ou dans le code #. Le DataContext indique donc la source mais ce qui est fondamental c'est que les contr�les enfants vont h�riter du DataContext�:
Si un DockPanel a un DataContext, les Buttons qui sont dedans h�riterons de ce DataContext, il suffira pour chaque contr�le enfant d'indiquer une partie de la source (une propri�t�, un champ�).
Autrement dit, si vous avez une source poss�dant plusieurs propri�t�s, la source est sp�cifi�e en utilisant DataContext du contr�le (pratique pour un groupe d'�l�ments donc). Chaque propri�t� � afficher sera indiqu�e dans les �l�ments enfants.

Si on a dans le code C# de la page une collection d'objets ayant les propri�t�s Nom, Prenom, Rue, Ville, on renseigne le DataContext dans le code C# puis on peut utiliser le binding comme cela�:


<StackPanel DataContext="{Binding}">
    <TextBox Text="{Binding Nom}"/>
    <TextBox Text="{Binding Prenom}"/>
    <TextBox Text="{Binding Rue}"/>
    <TextBox Text="{Binding Ville}"/>
</StackPanel>

Ici on cr�e une liaison du StackPanel avec une collection. Les TextBox h�ritent du DataContext du StackPanel. Cela permet ensuite de lier la propri�t� Text de chaque TextBox � diff�rentes propri�t�s des objets de la collection.

Vous pouvez indiquer le DataContext dans le code C#�:


DockPanel1.DataContext=  MyCollection;

Dans ce cas en XAML, il faut simplement indiquer qu'il y a un Binding avec l'expression "{Binding}"�:


<ListBox Margin="14,16,8,2" Name="ListBox1"  ItemsSource="{Binding }" />

Il est possible d'indiquer comme DataContext la classe elle-m�me.


public MainWindow()
			InitializeComponent();
			DataContext = this;
		}

On insiste sur le fait que si vous souhaitez cr�er une liaison avec un objet source (comme une collection, par exemple) qui a d�j� �t� instanci� dans le code C#, vous devez d�finir la propri�t� DataContext dans le code C# (et pas en XAML).

Si on n'utilise pas le DataContext, on peut aussi utiliser la propri�t� Source du Binding�:


<Button  Background="{Binding Source={StaticResource myDataSource}/>

Si on utilise un contr�le de type ItemsControl tel qu'un ListBox, ListView ou un TreeView pour afficher une collection de donn�es, il faut utiliser ItemsSource pour indiquer la source�:


 <ListBox Name="ListBox1"  ItemsSource="{Binding Source={StaticResource ListData}}" />

Mode indique le mode de mise a jour (OneWay, TwoWay, OneTime).


<TextBox Name="txtcible" Margin="21,0,25,21"
             Text="{Binding Path=Text, ElementName=txtsource,  Mode=TwoWay}"  />

V-G-2. Liaison entre contr�les

Pour qu'une propri�t� d'un objet (dit 'cible') soit li�e � une source, il faut lui affecter un objet Binding ( Text="{Binding�) puis indiquer l'objet source avec ElementName et la propri�t� source avec Path.

A - Cr�ons deux TextBox�; on va cr�er une liaison entre les deux propri�t�s Text, quand on tape un texte dans la premi�re, il appara�t dans la seconde�:


<TextBox Name="txtsource"  Text="" />
<TextBox Name="txtcible" Text="{Binding Path=Text, ElementName=txtsource}"  />

Dans la cible, la propri�t� Text= 'Binding' entre accolades permet d'indiquer qu'il y a une liaison, 'ElementName' indique la source de la liaison (la source est d�sign�e par son nom dans le XAML). Path la propri�t� de la source. Il y a une ',' entre chaque �l�ment � partir du second.

La syntaxe suivante est aussi accept�e.


<TextBox Name="txtcible" 
             Text="{Binding Text, ElementName=txtsource}"  />

On remarque que la mise � jour est effectu�e (dans le cas d'un TextBox) quand on quitte le TextBox source. Il y a bien une propri�t� UpdateSourceTrigger qui d�termine le moment de la mise � jour, elle peut avoir une des deux valeurs 'Default' et 'Explicit' (pas de valeur PropertyChanged).

Par d�faut le Mode est �gal � OneWay (la liaison se fait uniquement dans le sens source=>cible).

On peut donner la valeur TwoWay au mode, ce qui permet de faire en plus la liaison cible=>source�: quand on tape dans la cible, la source est modifi�e (cela est visible dans notre exemple ci-dessous quand on quitte la cible)�:


<TextBox Name="txtsource"  Text="" />
<TextBox Name="txtcible" 
             Text="{Binding Path=Text, ElementName=txtsource,  Mode=TwoWay}"  />

Pour �tre complet il existe aussi les modes OneTime (mise � jour une seule fois au d�part).

B - Cr�ons deux ListBox�; quand on ajoute des �l�ments dans la premi�re, ils apparaissent dans la seconde�:


<Grid>
<ListBox  Name="listBox1" SelectionMode="Multiple" />
<ListBox  Name="listBox2" ItemsSource="{Binding ElementName=listBox1, Path=Items, Mode=OneWay}" />
</Grid>

C - Cr�ons maintenant un Slider (curseur) et un rectangle�; quand on bouge le curseur du Slider cela modifie la hauteur du rectangle, il faut donc comme source la propri�t� Value du Slider et comme cible la propri�t� Height du rectangle�:


<StackPanel>
    <Slider Name="Slider1" Value="5" Maximum="200" Minimum ="0" Margin="0,294,0,172" />
    <Rectangle Fill="Blue" Stroke="Red"  StrokeThickness="3" Width="97" Height="{Binding ElementName=Slider1, Path=Value}"/>
</StackPanel>

D - Cr�ons une ListBox, on ajoute des �l�ments � cette ListBox avec du code C#�; quand on clique sur un item il s'affiche dans le TextBlock en bas�:


<ListBox Height="203" HorizontalAlignment="Left" Margin="27,24,0,0" Name="listBox1" VerticalAlignment="Top" Width="373">
</ListBox>
<TextBlock Text="{Binding ElementName=listBox1, Path=SelectedItem}" Margin="6,296,-6,266" />

� noter que si on met des items dans la ListBox en utilisant le code XAML ci dessous, cela ne marche pas�; le binding affiche le type (il faut ajouter des �l�ments � la ListBox avec du code C#).


<ListItem Content="Paris" />

E -Cr�ons un TextBox et un TextBlock avec liaison�; comment mettre � jour quand on veut�?

UpdateSourceTrigger d�termine le moment des mises � jour de la liaison.
La valeur est par d�faut 'Default' et le binding se fera dans ce cas lors de la sortie du contr�le source.
L'autre valeur est 'Explicit'.
Ici la mise � jour se fait quand on la provoque explicitement.
Exemple�: on a un TextBox dans lequel on va taper du texte�; on a un TextBlock dans lequel le texte va s'afficher par binding. On va indiquer une mise � jour explicite.


 <TextBox x:Name="Mytxt" />
               
<TextBlock Name="Mytblock" Text="{Binding Text, ElementName=Mytxt, 
                     UpdateSourceTrigger=Explicit}" Height="50" />

Pour que la mise � jour intervienne lors du changement du texte dans la TextBox, il faut cr�er un EventHandler sur l'�v�nement TextChanged et dans la routine ex�cut�e par ce dernier �v�nement effectuer la mise � jour du binding (propri�t� Update d'un BindingExpression).


using System.Windows.Data;
//.......


public partial class Window1 : Window
	 {
	 public Window1()
	 	 {
	 InitializeComponent();
	 
	 MyTextBox.TextChanged += new TextChangedEventHandler(OnTextChanged);
	 }
	 
	 private void OnTextChanged(object sender, TextChangedEventArgs e)
	 {
	  BindingExpression bex = Mytblock.GetBindingExpression(TextBlock.TextProperty);
            bex.UpdateSource();
	 }
	 }

Maintenant quand on tape du texte dans le TextBox, il s'affiche dans le TextBlock imm�diatement.

En r�sum�: dans le Binding, ElementName indique le contr�le source. La propri�t� Path sp�cifie la propri�t� de l'objet.

Path peut aussi avoir une valeur comme Text.Height ou Text[1] (deuxi�me caract�re).

V-G-3. Liaison Collection-ListBox

Pour une ListBox, c'est ItemsSource qui indique la source. Voici le code XAML de la ListBox�: ItemsSource ="{Binding}" indique que la source est une liaison mais n'indique pas la source.


<ListBox Name="listbox1" ItemsSource ="{Binding}">            
</ListBox>

On cr�e une collection nomm�e 'noms' de type List(Of), on la remplit avec des noms�; comment faire une liaison List() ListBox et afficher automatiquement les noms dans la ListBox�?

Voici le code C#�:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace testbinding
{
    public partial class MainPage : PhoneApplicationPage
    {
        public List<string> noms { get; set; }
        // Constructeur
        public MainPage()
        {
            InitializeComponent();
            noms = new List <string>();

            noms.Add("Paul");
            noms.Add("Pierre");
            noms.Add("Paule");
            listbox1.DataContext = noms; 
        }
    }
}

ListBox1.DataContext = noms indique quelle est la source de la liaison.
La liaison est ici par d�faut�: OneWay.

Cela marche aussi avec un tableau.

Le probl�me est que si ensuite j'ajoute un nom � la liste (noms.Add("Toto");), 'Toto' n'appara�t pas dans la ListBox.
Il n'y a pas de 'mise � jour'. On verra comment r�soudre cela.

Si vous souhaitez cr�er une liaison avec un objet source (comme une collection, par exemple) qui a d�j� �t� instanci� dans le code C#, vous devez d�finir la propri�t� DataContext dans le code C#.

Si l'utilisateur clique sur un �l�ment de la liste, il est possible de l'utiliser dans un autre contr�le�:


 <TextBlock Text="{Binding ElementName=listBox1, Path=SelectedItem}" Margin="6,296,-6,266" />

Ici dans le TextBlock, le nom qui a �t� s�lectionn� dans la ListBox sera affich� car on utilise comme Path le SelectedItem.

V-G-4. Liaison collection d'objets, ListBox

On veut une collection contenant des objets nomm�s 'ElementDeListe' ayant les propri�t�s 'Titre', 'Formule', 'Mode' et les afficher par liaison dans une liste.

On va cr�er une classe 'ElementDeListe' qui a trois propri�t�s: 'Titre', 'Formule' et 'Mode'.
On va aussi cr�er une collection nomm�e 'ListMath' qui h�rite de la Classe List(Of). On y mettra des ElementDeListe.

Dans Class1.cs on cr�e une classe nomm�e 'ElementDeListe'.


using System;
    using System.ComponentModel;
    using System.Diagnostics;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;

    namespace listboxbinding // Espace de noms = nom du programme
    {
        public class ElementDeListe  // la classe se nomme 'ElementDeListe'
        {
            private string _Titre;  // Variable priv�e
            
            public string Titre     // Variable public avec son get et son set
            {
                get
                {
                    return _Titre;
                }
                set
                {
                    if (value != _Titre)
                    {
                        _Titre = value;
                       
                    }
                }
            }
            private string _Formule;

            public string Formule
            {
                get
                {
                    return _Formule;
                }
                set
                {
                    if (value != _Formule)
                    {
                        _Formule = value;

                    }
                }
            }

            private string _Mode;

            public string Mode
            {
                get
                {
                    return _Mode;
                }
                set
                {
                    if (value != _Mode)
                    {
                        _Mode = value;

                    }
                }
            }
          
            public ElementDeListe(string t, string n, string m) { _Titre = t; _Formule = n; _Mode = m; }  
        }
  
  }

Dans MainPage.xaml.cs on d�clare une collection nomm�e 'ListMath' de type List, on y met quelques �l�ments.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace listboxbinding
{
    public partial class MainPage : PhoneApplicationPage
    {
        public List<ElementDeListe> ListeMath { get; set; } //la collection sera public
        // Constructeur
        public MainPage()
        {
            InitializeComponent();

            ListeMath = new List<ElementDeListe>();

            //On va cr�er de nouveaux ElementDeliste en utilisant le constructeur � 3 param�tres.
            ListeMath.Add(new ElementDeListe("Francs-Euros", "C", "C"));
            ListeMath.Add(new ElementDeListe("Celsius-Fahrenheit", "Celsius", "C"));
            ListeMath.Add(new ElementDeListe("Celsius-Kelvin", "Celsius", "C"));

            listBox1.DataContext = ListeMath;// en prime on ajoute un binding (une liaison) sur une listbox
        }
    }
}

En fin de code on lie la collection � la ListBox gr�ce � sa propri�t� DataContext.

Dans MainPage.xaml on cr�e une ListBox nomm�e 'listBox1', on indique que la source des items est une liaison.


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox ItemsSource="{ Binding}" 
    Height="193" HorizontalAlignment="Left" Margin="40,32,0,0" Name="listBox1" VerticalAlignment="Top" Width="369" />
</Grid>

Cela donne�:

La ListBox affiche les types�!

Pour afficher Titre et Formule, on va ajouter un ItemTemplate contenant un StackPanel horizontal qui contient trois TextBlocks. Le premier et le troisi�me sont li�s aux propri�t�s Titre et Formule.


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox ItemsSource="{ Binding}" 
    Height="193" HorizontalAlignment="Left" Margin="40,32,0,0" Name="listBox1" VerticalAlignment="Top" Width="369" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Titre}" />
                            <TextBlock Text=", " />
                            <TextBlock Text="{Binding Formule}" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>

Le probl�me, l� aussi, est que si ensuite j'ajoute un objet � la liste ( ListeMath.Add(new ElementDeListe("Ares-m2", "Ares", "C"));) ou si je modifie une propri�t� d'un objet de la liste, cela ne modifie pas la ListBox.
Il n'y a pas de 'mise � jour'.

On peut forcer la mise � jour de deux mani�res�:

1 -En utilisant une ObservableCollection(Of)

Il faut utiliser une ObservableCollection g�n�rique qui poss�de l' interface 'INotifyCollectionChanged' qui entra�ne, en cas d'ajout ou de suppression d'�l�ment de la collection, une mise � jour de la ListBox.

Remarquons que pour utiliser une ObservableCollection il faut ajouter�: 'System.Collections.ObjectModel'


using System.Collections.ObjectModel;

Ensuite on utilise l'ObservableCollection�:


namespace listboxbinding
{
    public partial class MainPage : PhoneApplicationPage
    {
        public ObservableCollection<ElementDeListe> ListeMath { get; set; } //la collection sera public
        // Constructeur
        public MainPage()
        {
            InitializeComponent();

            ListeMath = new ObservableCollection<ElementDeListe>();

Maintenant cela marche�: si on ajoute un �l�ment � ListeMath, il appara�t imm�diatement dans la ListBox.

C'est que l'observable collection a en natif une interface�: INotifyCollectionChanged.

2 -En ajoutant des interfaces � la classe

En effet, avec une List rien n'indique � la liaison collection-listbox que la collection a chang� et qu'il faut mettre � jour.

Ajout de INotifyPropertyChanged (apr�s le nom de la classe et les ':').

Permet, lorsqu'on modifie une propri�t� d'un objet pr�sent dans la List (on change un titre, par exemple), que la modification soit dans la ListBox.


using System.ComponentModel;

namespace listboxbinding  // Espace de noms = nom du programme
{
    public class ElementDeListe : INotifyPropertyChanged // la classe se nomme 'ElementDeListe'
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private string _Titre;  // Variable priv�e

        public string Titre     // Variable public avec son get et son set
        {
            get
            {
                return _Titre;
                
            }
            set
            {
                if (value != _Titre)
                {
                    _Titre = value;
                    EnvoiePropertyChanged("Titre");

                }
            }
        }

       
        private string _Formule;

        public string Formule
        {
            get
            {
                return _Formule;
               
            }
            set
            {
                if (value != _Formule)
                {
                    _Formule = value;
                    EnvoiePropertyChanged("Formule");

                }
            }
        }

        private string _Mode;

        public string Mode
        {
            get
            {
                return _Mode;
                
            }
            set
            {
                if (value != _Mode)
                {
                    _Mode = value;
                    EnvoiePropertyChanged("Mode");

                }


            }
        }
    


      
        private void EnvoiePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
               
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
       
        public ElementDeListe(string t, string n, string m) { _Titre = t; _Formule = n; _Mode = m; }
    }
}

Ajout de INotifyCollectionChanged.

Permet, si on modifie la collection (ajout d'un �l�ment par exemple) de voir apparaitre cet �l�ment dans la ListBox.
(Code contenant uniquement la partie INotifyCollectionchanged�; code non test�.)


// Extrait d'un article de Nathanael Marchand sur developpez.com. 
using System.Collections.Specialized;

public interface INotifyCollectionChanged
	{
		event NotifyCollectionChangedEventHandler CollectionChanged;
	}
	  
public delegate void NotifyCollectionChangedEventHandler(object sender, NotifyCollectionChangedEventArgs e);

public class NotifyCollectionChangedEventArgs : EventArgs
	{
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action);
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action, object changedItem);
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action, object changedItem, int index);
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action, IList changedItems);
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action, IList changedItems, int startingIndex);
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action, object newItem, object oldItem);
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action, object newItem, object oldItem, int index);
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action, IList newItems, IList oldItems);
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action, IList newItems, IList oldItems, int startingIndex);
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action, object changedItem, int index, int oldIndex);
 public NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction action, IList changedItems, int index, int oldIndex);

 public NotifyCollectionChangedAction Action { get; }
 public IList NewItems { get; }
 public IList OldItems { get; }
 public int NewStartingIndex { get; }
 public int OldStartingIndex { get; }
	}
	
public enum NotifyCollectionChangedAction
	{
		Add,
		Remove,
		Replace,
		Move,
		Reset,
	}

On voit qu'il est bien plus simple d'utiliser une ObservableCollection pour que l'ajout ou la suppression d'�l�ment soit pris en compte.
Par contre pour la modification d'�l�ment d�j� dans la liste , il faut impl�menter INotifyPropertyChanged.

V-G-5. Convertisseur

On peut aussi utiliser un converter (en anglais "converter", en fran�ais "convertisseur") qui, entre la source et la cible va effectuer une conversion.

Ici l'exemple montre un binding avec comme cible un TextBlock, le converter enl�ve simplement les blancs avant et apr�s.


<StackPanel>
  <StackPanel.Resources>
    <local:StringTrimmingConverter x:Key="trimmingConverter" />
  <StackPanel.Resources>
  <TextBlock Text="{Binding Path=Text, Converter={StaticResource trimmingConverter}}" />
</StackPanel>

Le converter est �crit en C#, il doit impl�menter imp�rativement Convert et ConvertBack.


using Microsoft.VisualBasic;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.Globalization;

public class StringTrimmingConverter : IValueConverter
{

	public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
	{
		return value.ToString().Trim();
	}

	public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
	{
		return value;
	}

}

V-G-6. Binding avec tri, filtrage, image

Nous allons cr�er une page contenant une ListBox affichant une liste de personnes.
L'application se nomme 'binding avanc�' et la page 'MainPage'.
Cr�ons une classe 'Personne' avec les propri�t�s Prenom, Nom, Adresse, Sexe, Image et une classe 'LesMembres' contenant une liste de personnes (ce code est dans un module de classe class1.cs).


using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace bindingavanc�
{
   
    public class Personne
    {
        public String Prenom { get; set; }
        public String Nom { get; set; }
        public String Addresse { get; set; }
        public String Sexe { get; set; }
        public String Image { get; set; }
        public Personne(String prenom, String nom, String addresse, string sexe, string image)
        {
            this.Prenom = prenom;
            this.Nom = nom;
            this.Addresse = addresse;
            this.Sexe = sexe;
            this.Image = image;
        }

    }
     public class LesMembres : ObservableCollection<Personne>
     {
        
    }

}

Dans le code-behind C# de la page, on instancie 'Membres' de type 'LesMembres' et on ajoute quatre 'Personne'.


using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Collections.ObjectModel;

namespace bindingavanc�
{
    public partial class MainPage : PhoneApplicationPage
    {
        public LesMembres Membres;// instancialisation d'un objet Membres
        // Constructeur
        public MainPage()
        {
            InitializeComponent();
        Membres= new LesMembres();  //initialisation de l'objet Membre
        // Ajout de 4 'personne' dans l'objet Membres
        Membres.Add(new Personne("Philippe", "Lasserre",
                "12 Muloland road", "M", "image1.jpg"));
        Membres.Add(new Personne("Odile", "Dupont",
                "31 avenue rien", "F", "image1.jpg"));
        Membres.Add(new Personne("Pierre", "Durand",
                "58 rue partout", "M", "image1.jpg"));
        Membres.Add(new Personne("Agathe", "Dubout",
                "1 place de l'�glise", "F", "image1.jpg"));
                
        //Cr�ation d'une liaison entre la collection et la ListBox1
        ListBox1.DataContext = Membres;
}
        }
    }

Dans le code XAML de la page, dans la grille principale, on ajoute une ListBox nomm�e 'ListBox1'.
Dans le ListBox on indique que l'ItemSource est une liaison (dans le code c# ci dessus le DataContext cr�e une liaison entre cette ListBox1 et Membres).


<ListBox Name="ListBox1" ItemsSource="{Binding }" Margin="36,60,38,353" Grid.Row="1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Path=Nom}" />
                        <TextBlock Text=", " />
                        <TextBlock Text="{Binding Path=Prenom}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

On note qu'on a ajout� un ItemTemplate qui h�rite de la liaison et affiche les propri�t�s Nom et Prenom.

Cela donne�:

Nous allons aller plus loin.
Nous avons cette collection de Personne. Comment trier les personnes�? Comment n'afficher dans la ListBox que certaines personnes en fonction de crit�res�? Comment afficher des images�?
Pour cela ajoutons en haut le MainPage (pour avoir acc�s � Linq) et aux m�thodes d'extension�:


using System.Linq;

Maintenant on veut trier les personnes par le nom.
Nous allons utiliser OrderBy de Linq.
OrderBy effectue un tri.
Voil� comment modifier le DataContext�:


ListBox1.DataContext = Membres.OrderBy(e => e.Nom);

Maintenant on veut filtrer les personnes par le Sexe.
On ne veut mettre dans la ListBox que les personnes de sexe 'F'. Nous allons utiliser Where de Linq.
Where pr�cise les conditions � appliquer, c'est le 'filtre'.
Il faut ajouter une fonction TestSexe qui retourne true si Sexe="F" et modifier le DataContext qui filtrera en utilisant cette fonction�:


namespace bindingavanc�
{
    public partial class MainPage : PhoneApplicationPage
    {
        public LesMembres Membres;
        // Constructeur
        public MainPage()
        {
            InitializeComponent();
        Membres= new LesMembres();  
        Membres.Add(new Personne("Philippe", "Lasserre",
                "12 Muloland road", "M", "image1.jpg"));
        Membres.Add(new Personne("Odile", "Dupont",
                "31 avenue rien", "F", "image1.jpg"));
        Membres.Add(new Personne("Pierre", "Durand",
                "58 rue partout", "M", "image1.jpg"));
        Membres.Add(new Personne("Agathe", "Dubout",
                "1 place de l'�glise", "F", "image1.jpg"));
                
//DataContext utilisant la clause Where
        ListBox1.DataContext = Membres.Where(e=>TestSexe(e));
}
       
 public bool TestSexe(Personne p)
 //fonction ayant un param�tre de type Personne
 //retournant true si Sexe="F"
    {
        if (p.Sexe=="F")
        {
            return true;
        }
        else
        {
            return false;
        }
}   
    }
       

}

Petit bonus
Si l'utilisateur clique sur un �l�ment de la liste, il est possible de voir dans un contr�le Image sous la ListBox une image correspondant � la "Personne" s�lectionn�e (le nom de l'image est dans la propri�t� 'Image')�:


<Image 
Stretch="None"
Source="{Binding ElementName=listBox1,
Path=SelectedItem.Image}" /

Ici on a fait un binding sur le SelectedItem de la ListBox1. Sa propri�t� Image sert de 'Source', ce qui affiche l'image.

Maintenant on veut afficher une image diff�rente suivant le sexe.
Nous allons utiliser Select de Linq.
Select pr�cise les �l�ments � extraire. Il faut ajouter en haut du fichier Class1.cs et du fichier MainPage�:


using System.Windows.Media;
using System.Windows.Media.Imaging;

Il faut cr�er une classe suppl�mentaire dans class1.cs.


  public class PersonneImage
     {
         public BitmapImage Image { get; set; }
         public String Prenom { get; set; }
         public String Nom { get; set; }
     }

Il faut cr�er (avec Paint) deux petites images, carrerose.jpg (de couleur rose) et carrebleue.jpg (de couleur bleue)�et les mettre dans le r�pertoire du projet�; il faut ensuite les ajouter au projet (menu 'projet' puis 'Ajouter un �l�ment existant'. Enfin il faut, dans les propri�t�s des images, indiquer 'contenu' dans 'option de g�n�ration'.

Dans MainPage, il faut ajouter une fonction 'giveImage' qui re�oit en param�tre 'F' ou 'M' et qui retourne un BitmapImage contenant l'image du carr� rose ou bleue en fonction du sexe donc�:



 private BitmapImage giveImage(string Sexe)
 {
     if (Sexe == "F")
     { return new BitmapImage(new Uri("carrerose.jpg", UriKind.Relative)); }
     else
     { return new BitmapImage(new Uri("carrebleue.jpg", UriKind.Relative)); }
 }
 
 ListBox1.DataContext = Membres.Select(e => new PersonneImage { Nom = e.Nom, Prenom = e.Prenom, Image = giveImage(e.Sexe) });

Il faut maintenant modifier le DataContext avec la clause Select qui retourne un objet de type PersonneImage avec le nom le pr�nom et un BitmapImage en fonction du sexe (pour cela on appelle la fonction giveImage).

 
 ListBox1.DataContext = Membres.Select(e => new PersonneImage { Nom = e.Nom, Prenom = e.Prenom, Image = giveImage(e.Sexe) });

Enfin il faut modifier, dans le code XAML, le DataTemplate de la ListBox en ajoutant un contr�le Image dont la propri�t� Source sera en liaison avec la propri�t� Image de l'objet PersonneImage�:


<ListBox Name="ListBox1" ItemsSource="{Binding }" Margin="36,60,38,353" Grid.Row="1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Image}" Width="20" Height="20"/>
                        <TextBlock Text="{Binding Path=Nom}" />
                        <TextBlock Text=", " />
                        <TextBlock Text="{Binding Path=Prenom}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

G�nial�!

On peut mettre plusieurs clauses�:


 ListBox1.DataContext = Membres.Select(...).Where (...).OrderBy(...);

V-G-7. G�n�rateur de liaison

Dans la fen�tre 'Propri�t�s' d'un contr�le, pour cr�er une liaison avec la propri�t� d'un contr�le on peut ouvrir la fen�tre du g�n�rateur de liaison en cliquant sur le carr� � c�t� du nom de la propri�t�:

Dans le menu, choisir 'Appliquer la liaison de donn�es'.

Choisir l'objet de liaison d�sir�.

V-G-8. Erreur dans le binding

Si, dans le code Xaml, nous orthographions mal le nom d'une propri�t� dans l'expression du binding ('nome' au lieu de 'nom' par exemple), il n'y a pas d'erreur � la compilation mais la liaison ne se fait pas.
Heureusement, il y a un message d'erreur dans la fen�tre de sortie (Ctrl+W, O)�:

Pr�c�dent � Sommaire � Suivant

�� Version PDF � Version hors-ligne � Version ePub � Version Azw � Version Mobi

�

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Lasserre Philippe. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.