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

�

VI. Les diff�rents contr�les
VI-A. Page
VI-B. Pivot et Panorama
VI-C. Les Conteneurs
VI-C-1. Les Grid
VI-C-2. Les StackPanel
VI-C-3. Les Canvas
VI-C-4. Les ScrollViewer
VI-C-5. WrapPanel
VI-C-6. Positionnement dynamique�: les grandes r�gles
VI-D. Les Boutons
VI-D-1. Les 'Button'
VI-D-2. HyperLinkButton
VI-E. Les contr�les contenant du texte
VI-E-1. Les TextBlock
VI-E-2. Les TextBox
VI-E-3. Les RichTextBox
VI-E-4. Les PasswordBox
VI-F. Les cases � cocher et RadioButton
VI-F-1. Case � cocher
VI-F-2. RadioButton
VI-G. Les ListBox
VI-H. Les Slider
VI-I. Les MessageBox
VI-J. Image, Vid�o, Son
VI-K. Formes
VI-L. Barre System en haut
VI-M. Application Barre
VI-N. AdControl pour la publicit�
VI-O. Le Toolkit
VI-P. MessageBox
VII. Grandes fonctions WP
VII-A. Donn�es
VII-A-1. �tat de l'application
VII-A-2. Isolated Storage
VII-A-3. LINQ To SQL, donn�es sur le Web
VII-B. Activation, d�sactivation, Tombstone.
VII-C. Le pattern Model-View-ViewModel
VII-D. Orientation
VII-E. Lanceur d'applications internes
VII-F. Les th�mes
VII-G. Vibreur
VII-H. Localisation
VII-I. Acc�l�rom�tre
VII-J. Internet, WebBrowser, WebClient
VII-K. Radio FM
VII-L. Minuterie
VII-M. Applications en t�che de fond�: alarme, rappel
VII-N. Informations diverses

VI. Les diff�rents contr�les

- Contr�les disponibles
Border
Button
Canvas
CheckBox
ContentControl
ContentPresenter
Control
Grid
HyperlinkButton
Image
InkPresenter
ListBox
MediaElement
MultiScaleImage
Panel
PasswordBox
ProgressBar
RadioButton
ScrollViewer
Slider
StackPanel
TextBlock
TextBox
Viewbox
UserControl

Tous les contr�les ne sont pas disponibles dans la bo�te � outils.

On peut si on le d�sire ajouter un contr�le dans la bo�te � outils. Dans celle-ci, clic droit sur 'Windows Phone Controls', puis dans le menu 'Choisir les �l�ments' et cocher un contr�le � ajouter dans la liste de la bo�te � outils.

- Contr�les silverlight diff�rents dans Windows Phone
ScroolBarr
ToolsTip
ComboBox
RichTextBox

- Ne sont pas disponibles dans Windows Phone
System.Windows.Controls.OpenFileDialog
System.Windows.Controls.SaveFileDialog

- Ne sont pas disponibles les contr�les qui sont dans le silverlight SDK�
Calendar
ChildWindow
DataGrid
DatePicker
Frame
GridSplitter
Label
Page
TabControl
TreeView

On peut ajouter le ToolKit Silverlight for Windows Phone Toolkit pour Mango 7.1�: http://silverlight.codeplex.com/.

- Cela ajoute�:
AutoCompleteBox
ContextMenu
DatePicker
GestureService/GestureListener
ListPicker
LongListSelector
Page Transitions
PerformanceProgressBar
TiltEffect
TimePicker
ToggleSwitch
WrapPanel

Il faut les ajouter � la bo�te � outils. Voir le chapitre sur le Toolkit.

VI-A. Page

Une application tr�s simple peut se composer d'une page principale (nomm�e 'MainPage' par d�faut).
C'est le cas quand on cr�e une application en choisissant 'Application Windows Phone'�:

Ensuite on peut cr�er d'autres pages (menu 'Projet' puis 'Ajouter un nouvel �l�ment').

Dans la page principale on peut ouvrir une autre page � l'aide du code suivant�:


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

Quand on cr�e une page�:
Elle est dans la Frame de l'application.
Cette Page contient une grille principale (nomm�e LayoutRoot).
Elle contient un StackPanel (nomm� TitlePanel) comprenant le titre de l'application et le titre de la page.
Dessous il y une grille nomm�e ContentPanel dans laquelle il faudra mettre le contenu de la Page.


<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>

Une page fait 800 * 480 px. Le SystemTray en haut fait 32 px
(il peut y avoir des �crans de 480 * 320).

Si on regarde le code C#, on constate que l'espace de noms est celui du projet (comme pour le code XAML)�; il y a une classe partielle 'MainPage' (la classe MainPage est donc compos�e du code XAML et de la classe partielle en C#).


using System.Windows.Shapes;
using Microsoft.Phone.Controls;

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

Cette class MainPage h�rite de la classe PhoneApplicationPage qui est la page standard.
Dans cette classe MainPage, il y a une fonction 'public MainPage()' qui est le constructeur de la page�; on y initialise les composants de la page�; on peut y ajouter du code qui sera ex�cut� lors de la cr�ation de la page.

Dans une page, on peut utiliser des �v�nements�; Loaded, par exemple.
Dans ce cas il faut ajouter 'Loaded=�'


<phone:PhoneApplicationPage 
    x:Class="CalculeTout.Inflation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 ...
  Loaded="PhoneApplicationPage_Loaded">

Quand la page est charg�e, la routine suivante, dans le code C#, est ex�cut�e�:


 private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {

        }

On verra qu'il est plus judicieux, pour mettre du code quand la page est charg�e, d'utiliser une surcharge de OnNavigatedTo�:


 protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
        }

Il y a deux autres mani�res de structurer une application Windows Phone�:
En utilisant le Pivot ou le Panorama.

VI-B. Pivot et Panorama

Utilisons une page 'Pivot'.

C'est le cas quand on cr�e une application en choisissant 'Application Pivot Windows Phone'�:

Voici un exemple de pages pivots�:

Une application 'Pivot' contient plusieurs pages, on passe de l'une � l'autre en glissant horizontalement ou en tapant sur le nom gris� en haut de la page d�sir�e.

Dans le code XAML on voit que le contr�le 'Pivot' contient des PivotItem ayant un titre (Header).


<controls:Pivot Title="MON APPLICATION">
           
            <controls:PivotItem Header="premier">
            </controls:PivotItem>
            
            <controls:PivotItem Header="second">
            </controls:PivotItem>
</controls:Pivot>

Code complet avec dans chaque PivotItem une ListBox�:



    <!--LayoutRoot est la grille racine o� tout le contenu de la page est plac�-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Contr�le Pivot-->
        <controls:Pivot Title="MON APPLICATION">
            <!--�l�ment un de tableau crois� dynamique-->
            <controls:PivotItem Header="premier">
                <!--Liste double trait avec habillage du texte-->
                <ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                          <StackPanel Margin="0,0,0,17" Width="432">
    <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
    <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" 
	Style="{StaticResource PhoneTextSubtleStyle}"/>
                          </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PivotItem>
 
            <!--�l�ment deux de tableau crois� dynamique-->
            <controls:PivotItem Header="second"> 
                <!--Liste triple trait, aucun habillage du texte-->
                    <ListBox x:Name="SecondListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" 
  Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" 
  Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>

Utilisons maintenant un 'Panorama'.

C'est le cas quand on cr�e une application en choisissant 'Application Panorama Windows Phone'.

Voici une page panorama�:

Une application 'Panorama' contient une page unique tr�s large, on se d�place en glissant horizontalement. Le titre est large et s'�tale sur toute la grande page. Le d�but du contenu de la page suivante de droite est l�g�rement visible.

Le contr�le Panorama contient des PanoramaItem ayant un titre (Header). Mis c�te � c�te les PanoramaItem forment la grande page virtuelle.


<controls:Panorama Title="mon application">
            <controls:PanoramaItem Header="premier �l�ment">
            </controls:PanoramaItem>
            <controls:PanoramaItem Header="second �l�ment">
            </controls:PanoramaItem>
</controls:Panorama>

Code complet avec dans chaque PanoramaItem une ListBox�:


     <!--Contr�le Panorama-->
        <controls:Panorama Title="mon application">
            <controls:Panorama.Background>
                <ImageBrush ImageSource="PanoramaBackground.png"/>
            </controls:Panorama.Background>
 
            <!--�l�ment un de panorama-->
            <controls:PanoramaItem Header="premier �l�ment">
                <!--Liste double trait avec habillage du texte-->
                <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" 
       Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>
 
            <!--�l�ment deux de panorama-->
            <!--Utilisez 'Orientation="Horizontal"' pour activer un panneau qui s'affiche horizontalement-->
            <controls:PanoramaItem Header="second �l�ment">
                <!--Liste double trait avec espace r�serv� pour une image et habillage du texte-->
                <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                                <!--Remplacer le rectangle par l'image-->
                                <Rectangle Height="100" Width="100" Fill="#FFE5001b" Margin="12,0,9,0"/>
                                <StackPanel Width="311">                                    
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" 
  Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>
        </controls:Panorama>

VI-C. Les Conteneurs

Les conteneurs peuvent contenir plusieurs contr�les et permettent de les positionner.

VI-C-1. Les Grid

En silverlight une Grid est un conteneur, comprenant des cellules servant � aligner les contr�les (et pas une grille de donn�es comme dans les Windows forms).

Aller chercher une 'Grid' dans la bo�te � outils � gauche et la mettre sur la page.


<Grid Height="520" HorizontalAlignment="Left" Margin="81,51,0,0" Name="grid1" VerticalAlignment="Top" Width="335">
</Grid>

On a une grille mais avec une seule cellule.

En fait quand on ajoute une page vide � un projet, la fen�tre contient d�j� une Grid.

Comportement d'une 'Grid' a une seule cellule.
Ce n'est pas recommand� mais ajoutons deux TextBlock, une image et une ellipse dans la cellule unique�:


 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBlock Text="TextBlock align� � droite et en haut" 
 HorizontalAlignment="Right"
VerticalAlignment="Bottom"/>
            <TextBlock Text="TextBlock align� � gauche et en bas"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
            <Image Source="c:\vshaghet.jpg" />
            <Ellipse Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="24" />

Cela donne�:

On se rend compte que les �l�ments comme l'image et l'ellipse sont centr�s et occupent le maximum de place.
Les TextBox sont plac�s en fonction de leur alignement.
Enfin on remarque que les �l�ments se superposent�: l'ellipse qui est dans la derni�re ligne du code XAML est au dessus.

Pour ajouter des lignes et des colonnes dans la grille (dans le designer), il faut cliquer dans les barres grises horizontales ou verticales de la grille et positionner les traits � la souris.

Cela g�n�re le code XAML suivant�:


<Grid Height="520" HorizontalAlignment="Left" Margin="81,51,0,0" 
Name="grid1" VerticalAlignment="Top" Width="335">
                <Grid.RowDefinitions>
                    <RowDefinition Height="265*" />
                    <RowDefinition Height="255*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="190*" />
                    <ColumnDefinition Width="145*" />
                </Grid.ColumnDefinitions>
            </Grid>

On voit dans le code XAML les largeurs des colonnes (Grid.ColumnDefinition) et les hauteurs des lignes (Grid.RowDefinition).

On peut aussi vouloir d�finir le nombre de lignes et de colonnes sans d�finir leurs largeurs et hauteurs�: simplement mettre trois lignes, deux colonnes.


<Grid>
      <Grid.RowDefinitions>
       <RowDefinition/>
       <RowDefinition/>
       <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
    </Grid>

Dans la d�finition des dimensions des lignes et colonnes�: on peut, comme on l'a vu, donner dans le designer la taille que l'on veut aux cellules.

Mais on peut, dans le code XAML, donner les dimensions des cellules�:
- un chiffre ("150", par exemple) indique la largeur ou hauteur en pixels�;
- '*' signifie 'autant que possible' (cette ligne re�oit une proportion pond�r�e de l'espace disponible , 2* indiquant deux fois la proportion)�;
- 'Auto' force � prendre la taille des �l�ments qu'elle contient.

Exemple de colonnes avec Auto�:


<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />

Exemple de lignes avec des �toiles�:


<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="2*" />

Si on fait�:


<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

On aura trois lignes d'�gale hauteur et trois colonnes d'�gale largeur. Cela donne neuf 'cellules' carr�es.

On peut rendre les lignes de s�paration visibles�:


ShowGridLines="True"

On peut ensuite ajouter des contr�les dans les cellules de la grille pour les positionner.

Pour chaque contr�le ajout� dans une cellule de la Grid, on d�finira la cellule o� le contr�le se trouve, ses marges et son ancrage si n�cessaire.

Ici on va ajouter une ListBox en bas � droite de la grille, voyons ce que cela donne dans le code XAML.


<Grid Height="279" Name="Grid1">
<Grid.RowDefinitions>
<RowDefinition Height="74*" />
<RowDefinition Height="84*" />
<RowDefinition Height="121*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="37*" />
<ColumnDefinition Width="28*" />
<ColumnDefinition Width="31*" />
<ColumnDefinition Width="176*" />
</Grid.ColumnDefinitions>

<ListBox Grid.Column="3" Grid.Row="2"  Name="ListBox1">
<ListBoxItem>toto</ListBoxItem>
<ListBoxItem>lululu</ListBoxItem>
</ListBox>
</Grid>

ListBox Grid.Column="3" Grid.Row="2" indiquent dans quelle cellule est la ListBox.

Attention la premi�re colonne est Column=0 et la premi�re ligne est Row=0.

On aurait pu ajouter Grid.ColumnSpan=2 pour indiquer que la ListBox occupe deux colonnes (la 3 et la 4 dans ce cas).

Il existe aussi Grid.RowSpan pour �tendre le contr�le sur plusieurs lignes de la Grid.

On aurait pu ajouter�:
Margin="22,26,21,19" pour indiquer les distances au conteneur autour de la ListBox.

Comment faire la m�me chose en C#�?
La Grid1 �tant pr�sente, ajoutons une ListBox comme ci dessus�:


ListBox lb = new ListBox();
lb.Margin = new Thickness(22, 26, 11, 19);
Grid.SetColumn(lb, 3);
Grid.SetRow(lb, 2);
grid1.Children.Add(lb);

VI-C-2. Les StackPanel

Arrange, empile les contr�les sur une m�me ligne qui peut �tre horizontale ou verticale (on parle d'empilement).

En C#�:


StackPanel instance =new StackPanel();

En XAML�:


<StackPanel> </StackPanel>

On a ajout� dans le StackPanel trois boutons.

En XAML�:


<StackPanel Height="362" HorizontalAlignment="Left" Margin="29,51,0,0" Name="stackPanel1" 
VerticalAlignment="Top" Width="390">
                <Button Content="Button" Height="85" Name="button1" Width="300" />
                <Button Content="Button" Height="85" Name="button2" Width="300" />
                <Button Content="Button" Height="85" Name="button3" Width="300" />
            </StackPanel>

On voit qu'il suffit de mettre les objets dans le StackPanel, ils seront empil�s.

La valeur par d�faut de Orientation du StackPanel est Vertical, aussi les contr�les seront positionn�s de haut en bas. L'attribut Orientation="Horizontal" permet de mettre les contr�les enfants de gauche � droite.


<StackPanel Orientation="Horizontal" Height="362" HorizontalAlignment="Left" Margin="29,51,0,0" 
Name="stackPanel1" VerticalAlignment="Top" Width="390">
                <Button Content="Button" Height="220" Name="button1" Width="100" />
                <Button Content="Button" Height="220" Name="button2" Width="100" />
                <Button Content="Button" Height="220" Name="button3" Width="100" />
</StackPanel>

C'est bien pratique quand on veut mettre sur une m�me ligne, les diff�rents champs d'un objet (nom, pr�nom, adresse)�:


<StackPanel Orientation="Horizontal">
                    <TextBlock Padding="5,0,5,0"
					<Text="{Binding FirstName}" />
                    <TextBlock Text="{Binding LastName}" />
                    <TextBlock Text=", " />
                    <TextBlock Text="{Binding Address}" />
</StackPanel>

En C#, voici un autre exemple�:


StackPanel StackPanel = new StackPanel();

StackPanel.Orientation = System.Windows.Controls.Orientation.Vertical;

StackPanel.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;

StackPanel.VerticalAlignment = System.Windows.VerticalAlignment.Center;

Button MyButton1 = new Button();

Button MyButton2 = new Button();

MyButton1.Content = "bouton1";

MyButton2.Content = "bouton2";

StackPanel.Children.Add(MyButton1);

StackPanel.Children.Add(MyButton2);

this.ContentPanel.Children.Add  (StackPanel);

On a instanci� des boutons que l'on ajoute � la collection Children du StackPanel.

Enfin, on met donc le StackPanel dans une grille nomm�e ContentPanel.

On peut ins�rer un bouton3 suppl�mentaire � une position d�finie�:


Button MyButton3 = new Button();
MyButton3.Content = "bouton3";
StackPanel.Children.Insert(1, MyButton3);  //1 indique la position d'insertion.

Le bouton2 est automatiquement repositionn�.

VI-C-3. Les Canvas

Il existe un contr�le Canvas qui permet de positionner des contr�les en indiquant leurs coordonn�es (comme dans les Windows Forms), mais il n'y a pas de repositionnement automatique quand on modifie les dimensions du Canvas.

On positionne les contr�les avec les propri�t�s attach�s Canvas.Top et Canvas.Left qui se trouvent dans le contr�le enfant.

En XAML�:


<Canvas Margin="72,65,118,302">
                <CheckBox Canvas.Top="80" Canvas.Left="0">Check Me</CheckBox>
                <RadioButton Canvas.Top="0" Canvas.Left="80">Yes</RadioButton>
</Canvas>

Les Canvas ont une propri�t� attach�e ZIndex permettant d'imposer l'ordre de superposition des �l�ments enfants (syntaxe dans l'�l�ment enfant�: Canvas.ZIndex="2").

VI-C-4. Les ScrollViewer

Repr�sente une zone d�filante qui peut contenir d'autres �l�ments visibles bien plus grands�; on fait d�filer le contenu qui est dans le ScrollViewer au doigt, il appara�t des ScrollBarr si n�cessaire.

Une utilisation habituelle est de mettre dans un petit ScrollViewer qui utilise la place disponible, un grand TextBlock, contenant un long texte.


<ScrollViewer Height="232" Width="448" HorizontalScrollBarVisibility="Auto" >
  <TextBlock Width="530" TextWrapping="Wrap" 
    Text="texte tr�s long...." />
</ScrollViewer>

HorizontalScrollBarVisibility et VerticalScrollBarVisibility permettent de forcer ou non l'affichage de la ScrollBarr�; ici il est � 'Auto'.

Voici comment on positionne le ScrollViewer (qui reste sur l'�cran) et le TextBlock interne (plus grand que l'�cran) dans le designer�:

Le ScrollViewer peut aussi �tre utilis� comme conteneur de tous les objets de la page�; si on passe en mode paysage les objets du bas de la page ne sont plus visibles mais on peut remonter la page pour en voir le bas.

VI-C-5. WrapPanel

Le WrapPanel qui est un conteneur o� les �l�ments sont mis � la suite l'un de l'autre mais o� il y a "retour � la ligne" quand on atteint la limite du conteneur. Les �l�ments se positionnent de gauche � droite et de haut en bas.
Voir le chapitre sur le Toolkit.

VI-C-6. Positionnement dynamique�: les grandes r�gles

Layout dynamique�: permet un positionnement quel que soit la r�solution de l'�cran.
On utilise un StackPanel ou surtout une Grid comme conteneur.
Dans les cellules, on met des contr�les avec les propri�t�s Width et Height= Auto. Ils occupent toutes la cellule (Margin permet de laisser un espace autour).
S'il y a un texte � afficher en totalit� on donne une valeur � MinHeight et MinWidth pour que le texte ne soit pas tronqu�.
On donne des dimensions relatives pour les colonnes et les lignes de la Grid (dans RowDefinition et ColumnDefinition) � l'aide des *.

VI-D. Les Boutons

VI-D-1. Les 'Button'

Pour ajouter un bouton, on clique sur le bouton dans les outils � gauche puis sur le formulaire, on appuie (bouton gauche de la souris), on d�place puis on l�che. Le bouton appara�t.

En bas � droite, on a la fen�tre de propri�t�s du bouton.

Le nom du contr�le est en haut, apr�s 'Name'.

Dans le designer, la propri�t� 'Content' contient le texte � afficher sur le bouton.

Si on double-clique sur un bouton, par exemple, on se retrouve dans la fonction �v�nement correspondante qui est Button1_Click.

Cr�ons un bouton avec du code XAML.

Il faut taper dans la fen�tre XAML�:


<Button>Ok</Button>

Cela cr�e un bouton sur lequel est affich� 'Ok'. Il appara�t en haut.

Faisons plus complet�:


<Button Height="150" Margin="55,50,79,0" Name="Button1" VerticalAlignment="Top" Click="OnClick5">Ok</Button>

Voyons le d�tail de cette ligne�:

La balise 'Button' cr�e un bouton.

Name="Button1" indique le nom du contr�le dans le designer.

VerticalAlignment="Top" indique que le contr�le est ancr� en haut (il reste toujours � la m�me distance du bord sur lequel il est ancr�. Valeur possible�: Top, Bottom, Center.

HorizontalAlignment="Left" m�me chose pour l'alignement horizontal.

Margin d�finit la distance par rapport aux bords du conteneur.

Width="" Height="" indiquent les dimensions du bouton (largeur, hauteur).

On peut aussi ajouter MinWidth MinHeight MaxWidth et MaxHeight qui indiquent les tailles minimales et maximales.

On aurait pu utiliser l'attribut Content="Ok" pour mettre un texte dans le bouton.

On peut positionner le 'Content' dans le bouton en indiquant des alignements et marges internes (Padding) :


<Button Content="Cliquez ici"
Padding="70 100"
HorizontalContentAlignment="Right"
VerticalContentAlignment="Bottom" />

Click="OnClick5" indique que l'action de cliquer sur le bouton d�clenche la fonction OnClick5.

Cela cr�e automatiquement, dans le code C#, la routine suivante�:


private void OnClick5(object sender, RoutedEventArgs e)
        {

        }

sender est l'objet qui a d�clench� l'�v�nement.

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

On peut ajouter du code dans la routine, pour modifier les propri�t�s du bouton, par exemple�:


private void OnClick5(object sender, RoutedEventArgs e)
        {
Button1.FontSize = 16; 
Button1.Content = "Ok Ok..";
}

Mettre des formes dans un bouton puis y mettre une image.


<Button>
  <StackPanel>
    <Ellipse Height="40" Width="40" Fill="Blue"/>
    <TextBlock TextAlignment="Center">Button</TextBlock>
  </StackPanel>
</Button>

<Button>
  <Rectangle Height="40" Width="40" Fill="Blue"/>
</Button>



<Button Height="130" Margin="9,362,0,0" Name="Button2" VerticalAlignment="Top" >
                <Image Source="wphone.jpg"></Image>
</Button>

Cela donne�:

Pour mettre une image dans un bouton il faut avoir le fichier image, l'ajouter au projet (menu 'Projet' puis 'Ajouter un �l�ment existant') ajouter Image et renseigner la source.

On peut choisir un fichier GIF avec un fond 'transparent' ce qui permet de ne pas voir le fond de l'image.

Comment mettre un texte et une image dans un bouton�?

Il faut mettre un StackPanel dans le bouton (puisque celui-ci ne peut contenir qu'un seul objet), dans ce StackPanel mettre un TextBlock et une Image. Le faire en tapant du code XAML (dans le designer VB c'est difficile de mettre un StackPanel dans un Button, il se met dessus et pas dedans, donc copier/coller le code XAML). De plus l'image doit �tre dans les ressources.


<Button Height="170" Margin="31,377,-22,0" Name="Button2" VerticalAlignment="Top" >
                <StackPanel Height="212">
                    <TextBlock HorizontalAlignment="Center">Ok</TextBlock>
                <Image Source="wphone.jpg" Height="84" Width="96"></Image>
                </StackPanel>
</Button>

Cela donne�:

Voir aussi le chapitre sur les ressources.

Cr�ons un bouton avec du code C#�:


Button myButton = new Button();    //Cr�ation du bouton
myButton.Content = "ok";           //Afficher 'Ok' dans le bouton
myButton.Background = new SolidColorBrush(Colors.Blue);      //Fond en bleu
ContentPanel.Children.Add(myButton);   //Ajouter le bouton � la grid
myButton.Click += new RoutedEventHandler(buttonClick);//Indiquer que le click sur le bouton
            						//doit ex�cuter 'buttonClick'


        

        private void buttonClick(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("ok");
        }                                      'doit ex�cuter la Sub nomm�e 'Click'

On remarque que, comme on cr�e par code, il faut soi m�me �crire la gestion des �v�nements.

Quand on cr�e le bouton en mode designer, et que l'on double-clique sur le bouton, la routine myButton_Click est automatiquement affich�e.

VI-D-2. HyperLinkButton

Repr�sente un bouton qui affiche un lien hypertexte.


<HyperlinkButton Content="Cliquer ici pour voir Silverlight.net"
    NavigateUri="http://www.silverlight.net" TargetName="_blank" Margin="10,60,0,0"/>

NavigateUri donne l'adresse.
TargetName a la valeur�:
_blank, _media ou _search, cela charge le document dans une nouvelle fen�tre vide.
_parent, _self, _top, ou "" cela charge la page dans la fen�tre dans laquelle l'utilisateur a cliqu� sur le lien (la fen�tre active).
L'effet n'est pas visible.

Si on met une adresse Internet, cliquer sur le lien ouvre le navigateur Web.

On peut aussi naviguer vers une autre page�:


<HyperlinkButton NavigateUri="MySecondPage.xaml" />

VI-E. Les contr�les contenant du texte

Les contr�les permettant de voir ou de modifier du texte sont�:

les TextBlock�;
les TextBox�;
les RichTextBox�;
les PasswordBox.

VI-E-1. Les TextBlock

Permettent d'afficher du texte dans une page en lecture seule, sans possibilit� de le modifier. Il est bien adapt� pour afficher une ou au maximum quelques lignes.

Prendre un TextBlock dans les outils et le mettre dans un formulaire.

Pour mettre rapidement un petit texte dedans en C#, utiliser la propri�t� Text.


TextBlock1.Text= "Mon texte";

La m�me chose en XAML�:


<TextBlock> 
Mon texte 
</TextBlock>


TextWrapping="Wrap"

Permet de passer automatiquement � la ligne.

On peut modifier le texte (Text), la hauteur des caract�res (FontSize), la couleur du texte (Foreground)�:


 <TextBlock Name="TextBlock1"  Text="Hauteur:" FontSize="46" Foreground="Cyan" Height="55" Width="308" />

Un TextBlock a une propri�t� Foreground (couleur du texte) mais pas de Background (pas de couleur de fond), pas de bords.

Pour mettre une couleur de fond, il faut mettre le TextBlock dans un Rectangle.
Pour avoir un bord, mettre le TextBlock dans un Border (dans le TextBox mettre Margin="0").


<Border  Margin="12,189,0,352" BorderThickness="2" BorderBrush="Bisque">
            <TextBlock Name="resultat"  HorizontalAlignment="Left" Margin="0"  TextAlignment="Center">           
            </TextBlock>
</Border>

On peut ajouter des sauts de lignes simplement gr�ce � \n.


TextBlock1.Text= "Mon texte  \n  Seconde ligne ";

On peut ajouter dans le code XAML plusieurs lignes (avec la balisee 'Run' qui correspond � un morceau de texte) avec des couleurs, des tailles, des polices diff�rentes et des retours � la ligne avec des LineBreak.


<TextBlock Height="151" HorizontalAlignment="Left" Margin="65,243,0,0" Name="textBlock4"  
VerticalAlignment="Top" Width="290">
  <LineBreak/>
  <Run Foreground="Maroon" FontFamily="Courier New" FontSize="24">Courier New 24</Run>
  <LineBreak/>
  <Run Foreground="Teal" FontFamily="Times New Roman" FontSize="18" FontStyle="Italic">Times New Roman Italic 18</Run>
  <LineBreak/>
  <Run Foreground="SteelBlue" FontFamily="Verdana" FontSize="14" FontWeight="Bold">Verdana Bold 14</Run>         
</TextBlock>

On peut le faire en C#�:


using System.Windows.Documents;


 		TextBlock textlong = new TextBlock();
		Run r = new Run();
        r.Text = "mon texte";
        r.FontSize = 20;
        r.FontWeight = FontWeights.Bold;
        r.Foreground = new SolidColorBrush(Colors.Orange);
        textlong.Inlines.Add(r);
        textlong.Inlines.Add(new LineBreak());

On d�clare un 'Run', on modifie ses propri�t�s�; on l'ajoute � la collection de lignes (InLines). On peut aussi ajouter un saut de ligne.

Exercice�: j'ai une string mySting, je veux l'ajouter � un TextBlock avec des passages � la ligne et mettre la premi�re ligne en orange.


string myString= "Titre:�Premi�re ligne.�Seconde ligne.";

J'ai ajout� un caract�re '�' signifiant retour � la ligne.
Je vais d�couper la string gr�ce � Split puis avec une boucle je vais ajouter � la collection InLines un Run (un texte ) puis un LineBreak.


            int i=0;
            foreach (var line in myString.Split('�'))
            {

                if (i == 0)
                {
                    var r = new Run();
                    r.Text = line;
                    r.FontSize = 20;
                    r.FontWeight = FontWeights.Bold;
                    r.Foreground = new SolidColorBrush(Colors.Orange);
                    TextLong.Inlines.Add(r);
                    TextLong.Inlines.Add(new LineBreak());
                    i++;
                }
                else
                {
                    TextLong.Inlines.Add(line);
                    TextLong.Inlines.Add(new LineBreak());
                }
            }

VI-E-2. Les TextBox

Permettent d'afficher du texte, il est modifiable par l'utilisateur.

La police de caract�res, sa taille, la couleur, l'enrichissement des caract�res affectent la totalit� du texte. Il n'est pas possible d'enrichir (gras, italique�) une partie du texte seulement.

Cr�ons un TextBox en XAML�:


<TextBox></TextBox>

Donnons lui un nom�:


<TextBox Name="TextBox1"></TextBox>

Mettons un texte dedans�:


<TextBox Name="TextBox1">Ceci est le texte</TextBox>

En C#


TextBox1.Text="le texte";

TextBox1.Text contient le texte affich� dans la TextBox.

TextBox1.IsReadOnly=true� interdit les modifications du texte.

TextBox1.AcceptEnter=true� autorise le passage � la ligne quand on tape 'Enter'. Si AcceptEnter=false, on ne peut saisir qu'une seule ligne.

VerticalScrollBarVisibility=true� affiche une ScrollBar verticale.

TextBox1.MaxLength permet de d�finir le nombre de caract�res. 0 pour une saisie illimit�e.

Si l'utilisateur a s�lectionn� du texte, il est dans TextBox1.SelectedText.

TextBox1.SelectionStart, TextBox1.SelectionLength indique la position du premier caract�re s�lectionn� (le premier caract�re du texte �tant le caract�re 0) et le nombre de caract�res s�lectionn�s.
On peut utiliser ces propri�t�s pour s�lectionner du texte avec du code ou utiliser TextBox1.Select(3, 2), il existe enfin SelectAll qui selectionne la totalit� du texte.

Si le texte est modifi� cela d�clenche�:


private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
        {

        }

Double_cliquez sur le TextBox, cela fera appara�tre le code qui pr�c�de.

Quand l'utilisateur frappe une touche cela d�clenche les �v�nements KeyDown puis KeyUp (pas de keyPress�!)

Pour ajouter la gestion de l'�v�nement KeyUp, cliquer sur le bouton. Dans la fen�tre des propri�t�s cliquer sur l'onglet '�v�nements'.

Puis dans la liste double-cliquez sur 'KeyUp' vous voyez appara�tre�:


 <TextBox  Name="textBox1" Text="TextBox1"  KeyUp="textBox1_KeyUp" />

Et dans le code C#�:


  private void textBox1_KeyUp(object sender, KeyEventArgs e)
        {
        
             }

On note que la fonction a un param�tre e de type KeyEventArgs qui a la propri�t� Key qui contient la touche tap�e. Malheureusement e.Key est en lecture seule�! On ne peut donc pas modifier le caract�re tap�!
De plus le contenu de e.Key est bizarre�! Des expressions comme if (e.Key==Key.B)� ne fonctionnent pas car e.Key ne contient pas ce qui est attendu.

Pour modifier les caract�res tap�s on les modifie directement dans la propri�t� text�:


  private void textBox1_KeyUp(object sender, KeyEventArgs e)
        {
            TextBox TextBoxControl = (TextBox)sender;
            string keys;
            keys = "1234567890";

            for (int j = 0; j < TextBoxControl.Text.Length; j++)
            {
                if (!(keys.Contains(TextBoxControl.Text.Substring(j, 1))))
                {
                    TextBoxControl.Text = TextBoxControl.Text.Remove(j, 1);
                    TextBoxControl.SelectionStart = TextBoxControl.Text.Length;
                }
            }

        }

Quand on tape sur une TextBox et qu'elle prend le focus, il appara�t automatiquement un clavier virtuel en bas.

Le clavier par d�faut, si on n'indique rien est le clavier "Default".
Il permet de taper des minuscules et donne acc�s aux majuscules et aux chiffres�:

Ce petit clavier � l'�cran est appel� "panneau de saisie logiciel" ou SIP.

Mais on peut avoir besoin d'afficher un autre clavier virtuel.
Voici le clavier TelephoneNumber permettant de taper des num�ros de t�l�phone�:

Comment l'obtenir�?
En utilisant un InputScope.


<TextBox Name="entree1" InputScope="TelephoneNumber" Height="75"   Text="" >
</TextBox>

Ci dessous une syntaxe plus longue mais permettant d'avoir de l'aide � la saisie, la liste des valeurs s'affiche quand on saisit NameValue�:


 <TextBox Height="90" Name="textBox1" Text="" Width="197" Margin="79,105,181,412">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName NameValue="Digits"></InputScopeName>
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>

En C#�:


InputScope scope = new InputScope();
InputScopeName name = new InputScopeName();

// Saisir des dates
name.NameValue = InputScopeNameValue.Date;

// Saisir un num�ro de t�l�phone 
name.NameValue = InputScopeNameValue.TelephoneNumber; 

// Saisir un montant
name.NameValue = InputScopeNameValue.CurrencyAmount; 
                
scope.Names.Add(name);
MyTextBox.InputScope = scope;

Il y a aussi DateDay, DateMonth, DateYear, Address, Chat, Digits, FileName, Number, OneChar, PostalCode, Text, Time, Url, Xml�
Voici quelques exemples�:

Text�: la premi�re lettre tap�e est en majuscule puis le clavier passe en minuscules.
Quand on tape au moins une lettre la zone au dessus du clavier propose des mots sur lesquels on peut taper.
En plus de ces suggestions de texte, il y a la correction automatique, l'auto-apostrophe, l'auto-accentuation et l'auto capitalisation.
Chat est le m�me clavier (contrairement � la version anglaise et a ce qui est dit par ailleurs).

Url�:
permet de saisir des adresses Internet.
L'appui long sur '.com' donne acc�s � d'autres nom de domaine.

Digit�:
pour saisir les chiffres de 0 � 9 et le point (m�me si on est en clavier fran�ais).
CurrencyAmmont et Number sont le m�me clavier en fran�ais.

CurrencyAmountAndSymbol�:
permet de saisir chiffres et symboles.

Contrairement � ce qui est dit ailleurs les inputscope sont diff�rents de ceux de la version anglaise.
Sous Mango, l'InputScope 'Number', repr�sente maintenant uniquement un clavier num�rique, alors qu'auparavant c'�tait le clavier chiffre+symboles.

En cours de saisie, il ne faut pas oublier de filtrer les caract�res tap�s (voir chapitre 'Comment faire').

VI-E-3. Les RichTextBox

Rich Text veut dire 'Texte enrichi.'
Le contr�le RichTextBox permet d'afficher, d'entrer et de manipuler du texte mis en forme. Il effectue les m�mes t�ches que le contr�le TextBox, mais il peut �galement afficher des polices, des couleurs pour une partie du texte et des liens, charger du texte et des images incorpor�es � partir d'un fichier, ainsi que rechercher des caract�res sp�cifiques.

En Wp RichTextBlox est ReadOnly, donc pas de possibilit� d'�crire dedans�! ce qui lui enl�ve son int�r�t.

Ce contr�le n'appara�t pas dans la liste d'outils�; il faut l'ajouter�:

Dans la bo�te � outils, clic droit sur 'Windows Phone Controls', puis clic sur la ligne 'Choisir les �l�ments'.

L� on peut cocher le contr�le 'RichTextBox' � ajouter dans la liste de la bo�te � outils.

En XAML�:
on peut ajouter un texte dans la balise Paragraph, l'enrichir avec les balises Bold, Italic, Underline, Hyperlink.
On peut aller � la ligne avec LineBreak.


<RichTextBox Name="rtb" Height="169" HorizontalAlignment="Left" Margin="42,6,0,0"  VerticalAlignment="Top" Width="348">
                <Paragraph>
                    Un RichTextBox avec du texte en <Bold> gras </Bold> en
                    <Italic>italique</Italic> en
                    <Underline>soulign�</Underline>
                    <LineBreak/>
                    <Hyperlink NavigateUri="http://search.msn.com">avec un lien"</Hyperlink>.
                </Paragraph>
</RichTextBox>

Noter la syntaxe du lien qui montre que dans la balise on peut ajouter des attributs.
On va voir un autre exemple avec un Border et l'utilisation d'attributs pour modifier la couleur et la taille des caract�res�:


<RichTextBox Name="rtb" Height="339" HorizontalAlignment="Left" Margin="42,6,0,0" 
 VerticalAlignment="Top" Width="348" BorderThickness="4">
                <RichTextBox.BorderBrush>
                    <SolidColorBrush Color="Red" />
                </RichTextBox.BorderBrush>
                
				<Paragraph>
                    <Run Foreground="Red">RichTextBox avec du texte en rouge</Run>
					 <LineBreak/>
                    <Run FontSize="50">C'est beau.</Run>
                </Paragraph>
            </RichTextBox>

Cela donne�:

En C# c'est un peu plus difficile�:
On cr�e des 'Run' (portion de texte) qu'on met dans la collection Inlines des 'Paragraph'. Ensuite on met les paragraphes dans la collection Blocks du RichTextBox.


//Cr�er un RichTextBox 
    RichTextBox MyRTB = new RichTextBox();
    //VertalScrollBar � auto
    MyRTB.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;

    // Cr�er deux 'Run' de texte et un 'Bold' avec du texte en gras.
    Run myRun1 = new Run();
    myRun1.Text = "Un RichTextBox avec ";
    Bold myBold = new Bold();
    myBold.Inlines.Add("du texte en gras ");
    Run myRun2 = new Run();
    myRun2.Text = "dedans.";

    // Cr�er un 'Paragraph' et y ajouter les 2 Run et le Bold.
    Paragraph myParagraph = new Paragraph();
    myParagraph.Inlines.Add(myRun1);
    myParagraph.Inlines.Add(myBold);
    myParagraph.Inlines.Add(myRun2);

    // Ajouter le paragraph au RichTextBox.
    MyRTB.Blocks.Add(myParagraph);

    //Ajouter le RichTextBox � la grille.
    ContentPanel.Children.Add(MyRTB);

VI-E-4. Les PasswordBox

Permet de saisir un mot de passe.

La propri�t� PasswordChar d�termine le caract�re affich� � la place des caract�res tap�s.

En XAML�:


<PasswordBox Name="pwdBox" MaxLength="64" PasswordChar="#" PasswordChanged="PasswordChanged" />

Ici le fait de taper un mot de passe d�clenche la fonction PasswordChanged.

En C# on r�cup�re le mot de passe dans�:


pwdBox.Password

VI-F. Les cases � cocher et RadioButton

VI-F-1. Case � cocher

Cr�ons une case � cocher.

C'est une CheckBox. L'utilisateur peut la cocher ou non en cliquant dessus.

Dans le designer, la propri�t� Content contient le texte � afficher � c�t� de la case.

Les �v�nements les plus utiles sont��: Checked et Unchecked.


<!-- CheckBox � 2 �tats -->
<CheckBox x:Name="cb1" Content="CheckBox � 2 �tats" 
          Checked="HandleCheck" Unchecked="HandleUnchecked" Margin="5" />
<TextBlock x:Name="text1" Margin="5" />

<!-- CheckBox � 3 �tats -->
<CheckBox x:Name="cb2" Content="CheckBox � 3 �tats" 
    IsThreeState="True" Checked="HandleCheck" 
    Indeterminate="HandleThirdState" Unchecked="HandleUnchecked" Margin="5" />
<TextBlock x:Name="text2" Margin="5" />


private void checkBox1_Checked(object sender, RoutedEventArgs e)
        {

        }

Dans le code XAML IsChecked="True" permet de cocher un CheckBox. Dans le code C#, la propri�t� IsChecked permet de voir si la case est coch�e ou non.


 if (MyradioButton1.IsChecked == true)
            { conv = 0.6; }

VI-F-2. RadioButton

Les RadioButton peuvent �tre coch�s ou non.

Ils sont g�n�ralement regroup�s pour offrir aux utilisateurs un choix unique parmi plusieurs options, un seul bouton � la fois peut �tre coch�. Si on clique sur un RadioButton dans un groupe, on le s�lectionne, cela d�s�lectionne les autres.

Vous pouvez regrouper des contr�les RadioButton en les pla�ant dans un parent commun ou en leur attribuant un nom de groupe (GroupName).

Quand un RadioButton est s�lectionn�, l'�v�nement Checked est d�clench�. Comme le montre l'exemple de code suivant, si votre application doit faire une action quand la s�lection de RadioButton change, vous pouvez g�rer l'�v�nement Checked.


<RadioButton Name="MyRadioBUtton" 
            IsChecked="True"
            Checked="Myroutine"
            GroupName="MyGroupe">
 Texte    
</RadioButton>

VI-G. Les ListBox

Une ListBox est un contr�le qui contient une collection de ListBoxItem. Chaque ListBoxItem a une propri�t� 'Content'.

Cr�ons une ListBox avec trois ListBoxItem en XAML�:


<ListBox Height="176" HorizontalAlignment="Left" Margin="19,27,0,0" Name="listBox1" VerticalAlignment="Top" Width="400">
                <ListBoxItem Content="Paris" />
                <ListBoxItem Content="Lyon" />
                <ListBoxItem Content="Marseille" /> 
</ListBox>

Cr�er en C# une ListBox puis ajouter des �l�ments � la ListBox�:


ListBox ListBox1 = new ListBox();
ListBox1.Items.Add("Paris");
ListBox1.Items.Add("Lyon");
ListBox1.Items.Add("Marseille");
ContentPanel.Children.Add(ListBox1);

On peut cr�er en C#, une collection 'Villes', y ajouter des �l�ments et ensuite faire un binding�:


    List<string> Villes = new List<string>
    {
        "Paris",
        "Lyon",
        "Marseille"
    };
            listBox1.ItemsSource = Villes;

Dans ce cas dans le code XAML ItemsSource doit indiquer qu'il y a binding.


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

On peut effacer la liste.


ListBox.Items.Clear();

SelectedIndex indique l'index de l'�l�ment s�lectionn� (-1 si pas de s�lection).
SelectedItem indique l'item (objet) s�lectionn�. On peut l'utiliser pour forcer par code la s�lection.


ListBox.SelectedItem = ListBox.Items[2];

On peut ajouter un bord autour du ListBox�:


<ListBox  BorderThickness="5" BorderBrush="Red"  />

Maintenant on veut personnaliser chaque Item.
Pour cela, on va utiliser un style pour les ListBoxItem.
On va cr�er dans les ressources de la grille racine un style pour les ListBoxItem�; ce style d�finira un template qui affiche un bord pour chaque Item.
Enfin on cr�era la ListBox en utilisant pour chaque ListBoxItem le style pr�c�dent.


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.Resources>
                <Style x:Key="ListBoxTemplate" TargetType="ListBoxItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <Border BorderThickness="3" BorderBrush="Azure" Height="50" Margin="4">
                                   
                                    
                                        <ContentPresenter  HorizontalAlignment="Center"
                              VerticalAlignment="Center" Content="{TemplateBinding Content}"/>
                                    
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

               
            </Grid.Resources>
    <ListBox  BorderThickness="5" BorderBrush="Red"  Height="192" HorizontalAlignment="Left" Margin="19,27,0,0" 
			Name="listBox1" VerticalAlignment="Top" Width="400" SelectionChanged="listBox1_SelectionChanged">

                <ListBoxItem Content="Paris"  Style="{StaticResource ListBoxTemplate}" />
                <ListBoxItem Content="Lyon"  Style="{StaticResource ListBoxTemplate}" />
                <ListBoxItem Content="Marseille"  Style="{StaticResource ListBoxTemplate}" /> 
            </ListBox>
        </Grid>
    </Grid>

On remarque que le Template du ListBoxItem contient dans le Border un ContentPresenter�; dans ce ContentPresenter, on indique que le Content doit �tre li� au content du ListBoxItem.

On peut aussi modifier l'item template pour, au lieu d'afficher les items les uns au dessus des autres, les afficher de gauche � droite avec passage � la ligne (comme dans le Media Library). Il faut pour cela utiliser un WrapPanel (voir dans le chapitre sur le Toolkit).

Mettre des boutons, des cases � cocher dans une ListBox�:

Les CheckedListBox n'existent pas en WP�? On va les cr�er dans une ListBox1�:


<ListBox  BorderThickness="5" BorderBrush="Red"  Height="192"  Name="listBox2"  
  SelectionChanged="listBox1_SelectionChanged">
                <CheckBox Content="Option1"></CheckBox>
                <CheckBox Content="Option2"></CheckBox> 
</ListBox>

De la m�me mani�re, on peut cr�er une liste de boutons�

Utilisation du binding sur une ListBox.

On reprend l'exemple du chapitre sur le binding en le compl�tant.
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�!
C'est normal elle affiche ce que retourne la m�thode ToString().

On a une premi�re m�thode pour �viter l'affichage du type�: on surcharge la m�thode ToString de la classe ElementdeListe�:


public override string ToString()
    {
        return Titre + " - " + Formule;
    }

Cela marche bien mais uniquement avec du texte.

Une autre m�thode (plus g�n�rale) pour afficher Titre et Formule, on va ajouter un ItemTemplate contenant un StackPanel horizontal qui contient trois TextBlock. Le premier et le troisi�me sont li�s au 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>

Utilisation d'ItemTemplate complexe.

On veut afficher pour chaque Item une petite sph�re, la propri�t� 'Titre' en gros et la propri�t�'Formule' dessous en plus petit�:


<ListBox Name="listBox1"  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 Titre et Formule-->
	<TextBlock Foreground="Azure" Text="{Binding Titre}" TextWrapping="Wrap" 
	Style="{StaticResource PhoneTextLargeStyle}"   />
	<TextBlock Text="{Binding Formule}" TextWrapping="Wrap" Margin="12,-6,12,0" 
	Style="{StaticResource PhoneTextSubtleStyle}" />
        </StackPanel>
    </StackPanel>
  </DataTemplate>
 </ListBox.ItemTemplate>
</ListBox>

Bien respecter les majuscules et minuscules dans les liaisons car si on se trompe d'une lettre, rien ne signale une erreur mais cela ne marche pas.

On voit que l'ItemTemplate est beaucoup plus puissant, on peut afficher dans la ListBox du texte mais aussi des images�

Et les �v�nements�!

Il est indiqu� partout d'utiliser l'�v�nement SelectionChanged�:


<ListBox ItemsSource="{ Binding}" Height="193" HorizontalAlignment="Left"  
Name="listBox1"  SelectionChanged="ListBoxSelChange"/>

Ainsi quand l'utilisateur tape sur une ligne de la ListBox l'�v�nement SelectionChanged se produit et la routine suivante est ex�cut�e.


 private void ListBoxSelChange(object sender, RoutedEventArgs e)
       {
        if (e.AddedItems.Count > 0)
        string TexteSelectionn� = e.AddedItems[0].ToString();
       }

L'inconv�nient est que si je tape deux fois de suite sur le m�me item de la ListBox, la seconde fois ne d�clenche rien puisque la s�lection n'a pas chang�.

J'utilise plut�t MouseLeftButtonUp.


<ListBox ItemsSource="{Binding}" Height="193" HorizontalAlignment="Left"  
Name="listBox1" MouseLeftButtonUp="ListBox_Appel"/>

Quand l'utilisateur tape sur une ligne de la ListBox l'�v�nement MouveLeftButtonUp se produit et la routine suivante est ex�cut�e.
Je peux utiliser l'item s�lectionn�: SelectedItem.


 private void ListBoxConversion_Appel(object sender, RoutedEventArgs e)
  		{//sender est l'objet qui a d�clench� l'�v�nement, je le cast en listbox
        ListBox list = sender as ListBox;
        //SelectedItem est aussi un objet qui doit �tre cast�
        ElementDeListe  ItemSelectionne = list.SelectedItem as ElementDeListe;
        if (ItemSelectionne == null)
            return;
            }
            //....Ici on peut utiliser ItemSelectionne
            }

VI-H. Les Slider

Un Slider est un curseur qu'on peut d�placer avec le doigt�:


<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>

Ici on utilise un Slider pour modifier la hauteur d'un rectangle gr�ce au binding.

VI-I. Les MessageBox

Comment afficher un message pour l'utilisateur (sans sortir de la page)�?


MessageBox.Show("Erreur sur le format de la date");

Cela donne�:

Il y a un bouton 'Ok' par d�faut pour sortir du MessageBox.

Sinon on peut ajouter un titre et un bouton 'Annuler'.


MessageBox.Show("Poursuivre?", "Exemple MessageBox", MessageBoxButton.OKCancel);

MessageBox peut retourner dans une variable de type MessageBoxResult le r�sultat de l'action de l'utilisateur�:
A-t-il tap� sur Ok ou Annuler�?

MessageBoxResult.Ok
ou
MessageBoxResult.Cancel
sera retourn� suivant le bouton qui a �t� tap� par l'utilisateur.


 MessageBoxResult result = MessageBox.Show("Poursuivre?",
     "Exemple MessageBox", MessageBoxButton.OKCancel);

            if (result == MessageBoxResult.OK)
            {
                MessageBox.Show("Vous avez tap� sur ok.");
            }

En WP7 il n'y a que deux boutons possibles.
Les InputBox n'existent pas.

VI-J. Image, Vid�o, Son

On peut ajouter un contr�le 'Image'.

Comment mettre une image dans un contr�le image ?
En C#�:
(image qui est sur Internet puis image locale)�:


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

//Image sur Internet
//On instancie un Uri adresse internet d'une image
Uri uri = new Uri("http://www.MonSite/MonImage.jpg");

//On instancie un BitmapImage on charge l'image
BitmapImage bmp = new BitmapImage(uri);

//On met le Bitmap dans le contr�le image
Image.Source = bmp;


//Image locale (avec comme 'option de g�n�ration'= 'Contenu')
Image.Source = new BitmapImage(new Uri("MyImage.jpg", UriKind.Relative));


//Image locale (avec comme 'option de g�n�ration'= 'Resource')
Image.Source = new BitmapImage(new Uri("NomProjet;component/MyImage.jpg", UriKind.Relative));

Dans le code XAML�:


<Image x:Name="Image" Source="/Images/MyImage.jpg" Width="60" Height="60" />

Ici l'image (option de g�n�ration = Contenu) est dans un r�pertoire 'Images' du projet.

Si l'image n'existe pas, il n'y a pas de lev�e d'exception. Pas d'arr�t du logiciel avec un code d'erreur. Cool�!

Par contre, si on veut, on peut intercepter l'erreur en 's'abonnant' � l'�v�nement ImageFailed.

L'image doit �tre mise dans le projet�: menu 'Projet', 'Ajouter un �l�ment existant', choisir l'image puis 'Ok', elle appara�t dans la fen�tre de l'explorateur de solution � droite.
Dans ses propri�t�s en bas � droite, il faut mettre 'Option de g�n�ration" � 'Contenu' ou le laisser � 'Resource' (et Copier� � 'Copier si plus r�cent').

On se souvient que le chemin de l'application est 'C:\Users\Philippe\Documents\Visual Studio 2010\Projects\Mon application'.

Utiliser des fichiers JPEG plut�t que des PNG (le d�codage des PNG se fait au niveau logiciel alors que celui des JPEG se fait au niveau mat�riel).
Par contre pas de transparence dans les JPEG.
Pas de GIF dans WP.

On peut donner un chemin absolu�:


<Button  HorizontalAlignment="Left" Margin="4,0,0,0" Name="Button1" VerticalAlignment="Top" Width="150"  Height="100">
    <Image Source="C:/test.JPG" />
</Button>

On peut aussi utiliser les ressources pour mettre l'image (voir chapitre Ressources).

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


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

L"image est semi-transparente.

L'attribut Stretch permet de g�rer les dimensions de l'image�; par d�faut elle a la valeur 'Uniform', ainsi la totalit� de l'image rentre dans le contr�le sans d�formation.
'UniformToFill' conserve les proportions mais ne force pas la totalit� de l'image a �tre affich�e.

'Fill' adapte l'image au conteneur, mais il peut y avoir des d�formations.
'None' respecte les dimensions en pixel de l'image, l'image peut �tre plus petite ou plus grande que le conteneur ; on peut ne pas la voir en totalit�.


<Image Margin="10,10,10,10" Source="fr.png" Stretch="UniformToFill" />

StretchDirection = UpOnly ne permet que l'agrandissement, DownOnly permet le contraire. Par d�faut sa valeur est �gale � Both.

On peut appliquer une transformation � une image (ici une rotation de 90 degr�s)�:


<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1">
  <Rectangle.Fill>
    <ImageBrush Stretch="UniformToFill">
      <ImageBrush.ImageSource>
        <BitmapImage UriSource="sampleImages\myimage.jpg" />
      </ImageBrush.ImageSource>
      <ImageBrush.RelativeTransform>
        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90" />
      </ImageBrush.RelativeTransform>
    </ImageBrush>
  </Rectangle.Fill>
</Rectangle>

Pour le son, la vid�o�: on peut lire des Windows Media Video (WMV), Windows Media Audio (WMA), et fichier MP3.


<MediaElement Name="media"
Source="silverlight.wmv" />

On peut arr�ter, mettre en pause, d�marrer une vid�o�:


private void StopMedia(object sender, RoutedEventArgs e)
{
media.Stop();
}
private void PauseMedia(object sender, RoutedEventArgs e)
{
media.Pause();
}
private void PlayMedia(object sender, RoutedEventArgs e)
{
media.Play();
}

On peut ajouter une propri�t� 'Volume' avec une valeur allant de 0 � 1 (d�faut=0.5) en �chelle logarithmique.

On peut aussi ajouter une propri�t� 'AutoPlay', elle est � true par d�faut. Il y a aussi Stretch et IsMuted.

VI-K. Formes

Le rectangle�


<Rectangle Fill="Blue" Stroke="Red"  StrokeThickness="3"  Width="97" Heightc="20"/>

Fill : couleur de remplissage.
Stroke : couleur du bord.
StrokeThickness : �paisseur du bord.
RadiusX et RadiusY : arrondir les angles.

L'ellipse�

exemple�: une sph�re, on remplit un cercle (une ellipse aussi haute que large) 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>

On peut ajouter un bord autour d'un conteneur (ou d'un contr�le)�:


<Border BorderBrush="White" BorderThickness="2"  CornerRadius="20" Height="47">
                    <TextBlock  Margin="2,4">Rectangle</TextBlock>
</Border>

L'attribut CornerRadius permet d'arrondir les angles.

Voici un exemple en code c#�:


Ellipse monEllipse = new Ellipse();
monEllipse.Stroke = new SolidColorBrush(Colors.Cyan);
monEllipse.Fill = new SolidColorBrush(Colors.DarkGray);
monEllipse.HorizontalAlignment = HorizontalAlignment.Left;
monEllipse.VerticalAlignment = VerticalAlignment.Center;
monEllipse.Width = 70;
monEllipse.Height = 95;
ContentPanel.Children.Add(monEllipse);

On remarque que pour modifier le bord, le tour de la forme, on utilise Stroke (couleur) et StrokeThickness (�paisseur).

Polygone�
On d�finit des points, il y a une ligne entre un point et le suivant, le dernier point �tant reli� au tout premier.


<Polygon
      Fill="Blue"
      Stroke="Black"
      StrokeThickness="2"
      Points="10,200,60,140,130,140,180,200" />

Il y a une collection 'PointCollection' dans lequel vous ajoutez les 'Point' pour former la collection.
Polylines fait de m�me sauf que le dernier point n'est pas reli� au premier.

Path (chemin)�
Permet de dessiner un chemin complexe�:


 <Path Stroke="Pink" StrokeThickness="4"
    Data="M 140,200 C 100,25 400,350 400,175 V 140 H 140" />

Data contient�:
M�: coordonn�es (absolu) du point de d�part ('m' si coordonn�es relative)�;
C�: courbe de B�zier commen�ant � la position de d�part, se terminant � 400, 175 (2 derni�res valeurs)�;
Passant pas les points 100,25 et 400,350�;
V�: ligne vertical se terminant � l'ordonn�e 140�;
H�: ligne horizontale se terminant � l'abscisse 140.

Exemple plus complexe�: dans un bouton, dessiner une loupe, l'agrandir gr�ce � RenderTransform�:


<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/>

Line�
Elle va du point X1,Y1 � X2,Y2.

En XAML�:


<Line  StrokeThickness="4" X1="150" Y1="150" X2="100" Y2="100" />

En C#�:


maLine = new Line();
maLine.Stroke = System.Windows.Media.Brushes.Blue;
maLine.X1 = 2;
maLine.X2 = 55;
maLine.Y1 = 1;
maLine.Y2 = 60;
maLine.HorizontalAlignment = HorizontalAlignment.Left;
maLine.VerticalAlignment = VerticalAlignment.Center;
maLine.StrokeThickness = 2;
maGrid.Children.Add(myLine);

VI-L. Barre System en haut

Le SystemTray est la bande en haut qui contient les ic�nes de charge, de r�seau, de type de r�seau, l'heure.

Elle fait 32 pixels en vue portrait et 72 pixels en vue paysage. En mode paysage la barre est sur le rebord gauche de l'�cran et pas en haut.
Par d�faut, elle est blanche ou noire en fonction du th�me. La grille 'LayoutRoot' commence dessous.

Dans le XAML, dans la balise 'PhoneApplicationPage', on charge l'espace de noms 'Microsoft.Phone.Shell' (il l'est pas d�faut).
Puis on peut modifier le SystemTray.

On peut ne pas afficher le SystemTray.


<phone:PhoneApplicationPage 
 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
 ..
 shell:SystemTray.IsVisible="False">

Il est possible de modifier la couleur des ic�nes et du fond. Cela ne marche qu'� partir de WP7.1 (Mango).


shell:SystemTray.ForegroundColor="Red" 
shell:SystemTray.BackgroundColor="Blue"

Il y a un bug et pour mettre du blanc il faut �crire�: shell:SystemTray.ForegroundColor="#FEFEFE".

On peut modifier l'opacit� (de 0 � 1).


shell:SystemTray.Opacity="0.5">

L'opacit� n'a pas d'incidence sur les ic�nes.
Si on modifie l'opacit�, la page d�bute sur le bord de l'�cran (en arri�re du SystemTray) on voit donc la page par transparence � travers le SystemTray.

Sinon la page d�bute en dessous du SystemeTray.

En C# on peut modifier l'opacit� de la bande (0 � 1) et les couleurs�:


using Microsoft.Phone.Shell;

            SystemTray.SetIsVisible(this, false);
            SystemTray.SetOpacity(this, 0.5);
            SystemTray.SetBackgroundColor(this, Colors.Purple);
            SystemTray.SetForegroundColor(this, Colors.Yellow);

Ici on indique la page en premier param�tre.
Il existe aussi GetIsVisible� pour lire la propri�t�.

Quand on a un arri�re fond clair et si on a modifi� la taille de la Grid LayoutRoot, cela fait une bande blanche en haut�; pour �viter cela, il ne faut pas afficher le System Tray et surtout ne pas donner de hauteur � la grille, ainsi elle occupera tout l'espace (on peut donner, sans le vouloir, une valeur en d�pla�ant par erreur la grille)�:


shell:SystemTray.IsVisible="False"

 <!--LayoutRoot est la grille racine o� tout le contenu de la page est plac�-->
    <Grid x:Name="LayoutRoot" >

On peut aussi ajouter un ProgressIndicator.
Si IsIndeterminate = true cela affiche les points qui bougent de gauche � droite.
Si IsIndeterminate = false cela affiche une barre rouge de gauche � droite. La valeur de 'Value' donne donne la longueur de la barre�: 0= pas de barre, 1= barre compl�te.


 public partial class MainPage : PhoneApplicationPage
    {
        ProgressIndicator prog;
        // Constructeur
        public MainPage()
        {
            InitializeComponent();

            prog = new ProgressIndicator();

            SystemTray.SetIsVisible(this, true);
            SystemTray.SetBackgroundColor(this, Colors.Gray);
            SystemTray.SetForegroundColor(this, Colors.Yellow);

           
            prog.IsVisible = true;
            prog.IsIndeterminate = true; //Affiche les points qui bougent de gauche � droite
            							 //false n�cessite de donner des valeurs croissantes � 'Value'
            prog.Text = "Clicker...";

            SystemTray.SetProgressIndicator(this, prog);
     
        }

VI-M. Application Barre

L'application Barre permet de mettre une barre en bas avec des ic�nes (quatre maximum) et m�me d'ajouter un menu qu'on ouvre (avec les trois petits points).
Le code de l'ApplicationBar est d�j� donn� par Microsoft (il est en commentaire en bas de la page), j'ai ajout� la gestion des clics.


 <!--Exemple de code illustrant l'utilisation d'ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="ApplicationBar.Cancel.png" Text="Annuler" Click="bouton1"/>
            <shell:ApplicationBarIconButton IconUri="ApplicationBar.Check.png" Text="Ok" Click="bouton2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="Menu 1" Click="menu1"/>
                <shell:ApplicationBarMenuItem Text="Menu 2" Click="menu2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>


 private void menu2(object sender, EventArgs e)
        {
            MessageBox.Show("menu2");
        }

        private void menu1(object sender, EventArgs e)
        {
            MessageBox.Show("menu1");
        }

        private void bouton1(object sender, EventArgs e)
        {
            MessageBox.Show("bouton1");
        }

        private void bouton2(object sender, EventArgs e)
        {
            MessageBox.Show("bouton2");
        }

L'option de g�n�ration des fichiers images doit avoir la valeur 'Contenu' et l'option 'Copier dans�' la valeur 'Copier si plus r�cent'.
Les ic�nes n'appara�ssent pas dans l'IDE, il faut tester avec l'�mulateur.

On peut trouver des ic�nes dans le SDK, ici "C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark", utiliser uniquement le r�pertoire dark, WP se chargera d'adapter l'image au th�me.
On peut en trouver aussi sur Internet ou les dessiner soi-m�me. Microsoft conseille des images de 48 x 48 px avec le fond graphique au centre de 26 x 26 px. Couleur d'avant plan blanche et fond transparent ; pas de cercle qui sera dessin� par WP sur le bouton.

Si on veut d�sactiver le second bouton dans le code-behind�:


//Inclure l'espace de noms
using Microsoft.Phone.Shell;


(this.ApplicationBar.Buttons[1] as ApplicationBarIconButton).IsEnabled = false;

VI-N. AdControl pour la publicit�

� partir de Mango, on peut ajouter dans une application de la publicit� r�mun�r�e propos�e par Microsoft.
Aller sur https://pubcenter.microsoft.com pour s'inscrire.
Une fois inscrit vous devrez choisir la taille de votre banni�re (480*80 ou 300*50) et vous obtiendrez deux identifiants (ApplicationId et AdUnitId).

� partir de la bo�te � outils glisser/d�poser un contr�le AdControl�:

Cela donne dans l'XAML�:


 <my:AdControl AdUnitId="Image480_80" ApplicationId="test_client" Height="80"  Margin="-12,179,0,0" 
 Name="adControl1"  Width="480" />

Bien mettre les Id r�cup�r�s sur le site.
Le contr�le ici a une taille de 480*80.
Il est imp�ratif de respecter la taille et de ne pas modifier l'opacit�.

VI-O. Le Toolkit

Le silverlight Toolkit pour Windows Phone est un projet open source o� l'�quipe Microsoft Silverlight partage de nouveaux composants et fonctionnalit�s qui ne sont pas dans le noyau de silverlight pour Windows Phone.

Le Toolkit ajoute donc des contr�les indispensables.

Se rendre sur le site codeplex�:

http://silverlight.codeplex.com/.

Charger Silverlight for Windows Phone Toolkit pour Mango 7.1.

Ajouter la r�f�rence (la DLL) du ToolKit au projet. Dans l'explorateur de solution � droite, clic droit sur r�f�rence puis dans le menu clic sur 'Ajouter' une r�f�rence.

Puis cliquer sur 'Microsoft.Phone.Controls.ToolKit'.

Dans le code XAML ajouter l'espace de noms 'Microsoft.Phone.Controls.Toolkit'�:


xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Maintenant on peut ajouter un contr�le du ToolKit directement dans le code XAML�:


<toolkit:DatePicker />

On peut si on le d�sire ajouter le contr�le dans la bo�te � outils. Dans celle-ci, click droit sur 'Windows Phone Controls', puis dans le menu 'Choisir les �l�ments'.

L� on peut cocher le contr�le � ajouter dans la liste de la bo�te � outils.

Le ToolKit (version d'octobre 2011) fournit les contr�les suivant�:
AutoCompleteBox, ContextMenu, DateTimePicker, DateTimeConverters, ExpanderView, GestureService/GestureListener, HeaderedItemsControl, HubTile, ListPicker, LocalizedResources, LockablePivot, LongListSelector, MultiselectList, Page Transitions, PerformanceProgressBar, PhoneTextBox, TiltEffect, TimePicker, ToggleSwitch, WrapPanel, LockablePivots .

AutoCompleteBox permet d'avoir une TextBox proposant une liste de mots d�s qu'on tape des lettres.


<toolkit:AutoCompleteBox Margin="25,42,0,0" Name="autoCompleteBox1"  />

On va charger la liste des mots dans le code-behind�:


List<string> villes = new List<string>();
villes.Add("Barcelona");
villes.Add("B�lize");
villes.Add("Beaune");
villes.Add("Londres");
villes.Add("Paris");
villes.Add("Prague");
villes.Add("Madrid");
villes.Add("Rome");
this.autoCompleteBox1.ItemsSource = villes;

On peut modifier quelques propri�t�s�:


//La liste appara�t apr�s la frappe de 3 caract�res
this.autoCompleteBox1.MinimumPrefixLength = 3;

//Tient compte de la casse de la premi�re lettre
this.autoCompleteBox1.FilterMode = AutoCompleteFilterMode.StartsWithCaseSensitive;

On peut ajouter un filtre, afficher des images� voir le libre blanc.

Le DatePicker permet de saisir une date.


<toolkit:DatePicker x:Name="datePicker" Value="2/4/2012"/>

En C#�:


using Microsoft.Phone.Controls;
DatePicker datePicker = new DatePicker();

On a dans la page ce contr�le�:

Quand on clique dessus, la page de saisie de date s'ouvre�:

Il faut mettre dans le r�pertoire "Toolkit.Content" les fichiers "ApplicationBar.Cancel.png" et "ApplicationBar.Check.png".

O� trouver les fichiers�? Aller sur le site http://silverlight.codeplex.com/releases. Dans 'Other Available Downloads' charger le zip 'Source Code Silverlight for Windows Phone Toolkit Source and Sample - Nov 2011.zip'. Dans le zip les fichiers png des ic�nes sont dans 'Source and Samples\PhoneToolkitSample\Toolkit.Content'.

Il faut cr�er avec l'explorer, un r�pertoire 'Toolkit.Content' � la racine du projet et y mettre les ic�nes "ApplicationBar.Cancel.png" et "ApplicationBar.Check.png" puis ajouter le r�pertoire au projet (dans l'explorateur de solution, clic sur l'ic�ne 'Afficher tous les fichiers', clic droit sur le r�pertoire puis 'Ajouter', 'Ajouter le r�pertoire')�; enfin dans les propri�t�s de chaque fichier image, 'Action de g�n�ration' doit avoir la valeur 'contenu'. Copier doit avoir la valeur 'Copier si plus r�cent'.

ToggleSwitch est un interrupteur�:


 <toolkit:ToggleSwitch x:Name="toggle" Content="ToggleSwitch est on"
IsChecked="True" Header="DemoToggleSwitch"/>

Ici on le met � 'On' et on ajoute un petit titre au-dessus�:

En C#�:


ToggleSwitch toggleSwitch = new ToggleSwitch();

On peut ajouter les EventHandler 'Checked' et 'Unchecked' et les fonctions correspondantes qui modifient le texte et la couleur du contr�le en fonction de son �tat 'on' 'off'�:


namespace PhoneApp2
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructeur
        public MainPage()
        {
            InitializeComponent();
        this.toggle.Checked += new EventHandler<RoutedEventArgs>(toggle_Checked);
        this.toggle.Unchecked += new EventHandler<RoutedEventArgs> (toggle_Unchecked);
}
void toggle_Unchecked(object sender, RoutedEventArgs e)
{
this.toggle.Content = "ToggleSwitch est off";
this.toggle.SwitchForeground = new SolidColorBrush(Colors.Red);
}
void toggle_Checked(object sender, RoutedEventArgs e)
{
this.toggle.Content = "ToggleSwitch est on";
this.toggle.SwitchForeground = new SolidColorBrush(Colors.Green);
}


    }
}

On peut simplement tester l'�tat du ToggleSwitch�:


if (this.toggle.IsChecked == true)
{ MessageBox.Show("On"); }

Dans le Toolkit il y a aussi le WrapPanel qui est un conteneur o� les �l�ments sont mis � la suite l'un de l'autre mais o� il y a "retour � la ligne" quand on atteint la limite du conteneur.
Les �l�ments se positionnent de gauche � droite et de haut en bas.

C'est pratique pour afficher une s�rie de photos comme dans la Media Library de WP.
Exemple du blog d'Audrey Petit, il faut rajouter les binding.
Le template par d�faut d'une ListBox n'est autre qu'un StackPanel avec une orientation verticale.
C'est pour cela que les items d'une ListBox se positionnent par d�faut les uns en dessous des autres. Nous allons donc modifier ce template afin de lui faire utiliser un WrapPanel et positionner nos �l�ments les uns � c�t� des autres, avec passage � la ligne lorsqu'une ligne est compl�te.


xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"


<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="DataTemplatePhoto">
      <Grid Width="150" Height="150">
        <Image x:Name="imageItem" Margin="5"/>
      </Grid>
    </DataTemplate>
    <ItemsPanelTemplate x:Key="PanelTemplatePhoto">
      <toolkit:WrapPanel />
    </ItemsPanelTemplate>
</phone:PhoneApplicationPage.Resources>

<ListBox x:Name="collectionPhoto" ItemTemplate="{StaticResource DataTemplatePhoto}" 
ItemsPanel="{StaticResource PanelTemplatePhoto}" />

La Toolbox permet aussi d'ajouter des effets comme le 'Tilt' effect, effet d'appui sur un �l�ment tap�. Cela rend visible les contr�les tap�s par le doigt.


<ListBox toolkit:TiltEffect.IsTiltEnabled="True">

Le Toolkit ajoute aussi une gestion des gesrures (voir chapitre sur la saisie tactile et les gestures).

Consulter la 'bible' (en anglais) du ToolKit, il y a tout en d�tail�:http://www.windowsphonegeek.com/upload/ebooks/Windows%20Phone%20Toolkit%20Aug%202011%20in%20depth-v1.pdf.

VI-P. MessageBox

Comment afficher un message pour l'utilisateur sans sortir de la page�?
En utilisant la m�thode Show de MessageBox.


MessageBox.Show("Erreur sur le format de la date");

Cela donne�:

Il y a un bouton 'Ok' par d�faut pour sortir du MessageBox.

Sinon on peut ajouter un titre et un bouton annuler.


MessageBox.Show("Poursuivre?", "Exemple MessageBox", MessageBoxButton.OKCancel);

MessageBox peut retourner dans une variable de type MessageBoxResult�:
MessageBoxResult.Ok ou MessageBoxResult.Cancel, suivant le bouton qui a �t� tap� par l'utilisateur.


 MessageBoxResult result =
     MessageBox.Show("Poursuivre?",
     "Exemple MessageBox", MessageBoxButton.OKCancel);

            if (result == MessageBoxResult.OK)
            {
                MessageBox.Show("Vous avez tap� sur ok.");
            }

En WP7 il n'y a que deux boutons possible.

VII. Grandes fonctions WP

VII-A. Donn�es

VII-A-1. �tat de l'application

On peut enregistrer temporairement des donn�es simples (de type cl�/valeur) dans le dictionnaire d'�tat qui est temporaire (elles sont conserv�es en d�sactivation et en tombstoned, on perd les infos si le logiciel s'arr�te).
Le dictionnaire d'�tat est accessible par la classe PhoneApplicationService et permet de conserver l'�tat de l'application (donn�es, Web Service�).
Voir le chapitre sur le tombstone.

Il faut au pr�alable inclure l'espace de noms Microsoft.Phone.Shell.


using Microsoft.Phone.Shell;

C'est aussi bien pratique, comme on l'a vu, pour passer des donn�es simples d'une page � l'autre.
On enregistre (avec la cl� 'ToDo')�:


private void todoTb_TextChanged(object sender, TextChangedEventArgs e)
{
    PhoneApplicationService.Current.State["Todo"] = todoTb.Text;
}

Pour r�cup�rer les informations, on peut le faire dans le constructeur de l'autre page par exemple�:


MainPage.xaml.cs


public MainPage()
{
    InitializeComponent();

    if (PhoneApplicationService.Current.State.ContainsKey("CurrentTodo"))
        todoTb.Text = (string)PhoneApplicationService.Current.State["Todo"];
       
    ...
}

Autre exemple�: pour conserver l'�tat d'une page, on peut aussi l'enregistrer dans le dictionnaire d'�tat.
L� on va enregistrer dans la surcharge de la m�thode OnNavigatedFrom et lire dans la surcharge de la m�thode OnNavigatedTo.
En haut de la classe MainPage, on instancie MyappService de type PhoneApplicationService.
Pour lire, on utilise la m�thode TryGetValue qui permet d'�viter les probl�mes si la cl� n'existe pas.


public partial class MainPage : PhoneApplicationPage

    {
        PhoneApplicationService MyappService = PhoneApplicationService.Current;
       
	   
	    // Constructeur
        public MainPage()
        {
            InitializeComponent();

        }

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs args)
{
MyappService.State["LeText"] = MyTextBox.Text;

base.OnNavigatedFrom(args);
}

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs args)
{
object text;
if (MyappService.State.TryGetValue("LeText", out text))
MyTextBox.Text = text as string;

base.OnNavigatedTo(args);
}


    }

VII-A-2. Isolated Storage

Pour enregistrer des donn�es, il est pr�f�rable d'utiliser l'Isolated Storage.
L'enregistrement est permanent.
'Isoladed' car seule votre application aura acc�s aux donn�es, pas les autres applications.
Votre application ne pourra pas lire les donn�es d'autres applications.

On peut utiliser 200 Mo par application.
Il y a deux mani�res d'utiliser l'Isolated Storage�:
- l'IsolatedStorageSetting pour enregistrer des cl�/valeurs�;
- l'IsolatedStorageFile pour enregistrer des r�pertoires et des fichiers.

Il faut au pr�alable inclure l'espace de noms�:


using System.IO.IsolatedStorage;

L'IsolatedStorageSetting pour enregistre des cl�/valeurs.

Exemple�: enregistrer un nom dans le Setting sous la cl� 'name'.
Il faut instancier un objet de type IsolatedStorageSettings.ApplicationSettings. La m�thode Add permet ensuite d'ajouter une cl�/valeur. On peut ensuite lire la valeur correspondant � la cl�.


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.IO.IsolatedStorage; // Ajouter cette ligne

namespace IsolatedStorage
{
    public partial class MainPage : PhoneApplicationPage
    {
         //Instanciation de userSettings+++++++++++++++++
		 private IsolatedStorageSettings userSettings = IsolatedStorageSettings.ApplicationSettings;
    
        // Constructeur
        public MainPage()
        {
            InitializeComponent();
        }

        private void Enregistrer_Click(object sender, RoutedEventArgs e)
        {
        userSettings.Add("name", "Philippe");// On ajoute la cl�/valeur
        }

        private void Lire_Click(object sender, RoutedEventArgs e)
        {
 		string name = (string)userSettings["name"]; //On lit la valeur de la cl� "name"
  		textBlock1.Text=name;     
        }
    }
}

On peut voir si une cl� existe�:


if (userSettings.Contains("name"))

{ textBlock1.Text="cl� 'name' pr�sente"; }

On peut ensuite modifier la valeur d'une cl�:


 userSettings["name"] = "Paul";

On peut effacer une cl�:


userSettings.Remove("name");

On peut effacer toutes les cl�s ou compter le nombre de cl�s.


userSettings.Clear();
        
tbResults.Text = "Count: " + userSettings.Count();

Exemple complet�
On enregistre�:


private void btnSaveSetting_Click(object sender, RoutedEventArgs e)
{
IsolatedStorageSettings settings = IsolatedStorageSettings.ApplicationSettings;
// txtInput is a TextBox defined in XAML.
if (!settings.Contains("userData"))
{
settings.Add("userData", txtInput.Text);
}
else
{
settings["userData"] = txtInput.Text;
}
settings.Save();
}

Les donn�es qui sont dans le Setting sont enregistr�es automatiquement quand l'application (ou la page) qui utilise la classe se termine. On peut forcer l'enregistrement imm�diat avec la m�thode Save (voir derni�re ligne de code qui pr�c�de).

On peut aussi enregistrer des objets. Attention, les objets doivent �tre 'serializables'. La s�rialisation consiste � transformer l'�tat d'une information qui est en m�moire sous la forme d'une suite d'informations qui pourra �tre enregistr�e ou transport�e.

Si on �crit soi-m�me la classe, il faut la rendre serializable�: mettre [DataContract] avant la classe et [DataMember] avant les champs publics.

Il faut ajouter�:


using System.Runtime.Serialization;


  [DataContract]
        public class ElementDeListe 
        {
           
            private string _Titre;
           [DataMember]
            public string Titre
            {
                get
                {
                    return _Titre;
                }
                set
                {
                    if (value != _Titre)
                    {
                        _Titre = value;
                       
                    }
                }
            }

Exemple�:
soit une classe 'ElementDeListe' permettant d'instancier un objet currentCalcul.
On va enregistrer currentCalcul (dans OnNavigatedFrom par exemple)�:


ElementDeListe currentCalcul;
private IsolatedStorageSettings userSettings = IsolatedStorageSettings.ApplicationSettings;


if (userSettings.Contains("currentCalcul"))
{ userSettings.Remove("currentCalcul"); }
userSettings.Add("currentCalcul", currentCalcul);// On ajoute la cl�/valeur
userSettings.Save();

On va lire currentCalcul (dans OnNavigatedTo par exemple)�:


currentCalcul = (ElementDeListe)userSettings["currentCalcul"]; //On lit la valeur de la cl� "name"

L'IsolatedStorageFile pour enregistrer des fichiers.

Pour pouvoir utiliser l'Isolated Storage il faut r�cup�rer une r�f�rence vers le conteneur d�di� � votre application. Cela se fait avec la m�thode statique GetUserStoreForApplication de la classe IsolatedStorageFile.
� partir d'une instance de la classe IsolatedStorageFile, il est possible de manipuler r�pertoires et fichiers gr�ce aux m�thodes.

FileExists.
CreateFile.
OpenFile.
DeleteFile.
DirectoryExists.
CreateDirectory.
DeleteDirectory.
Remove.

On peut �crire et lire des fichiers avec des IsolatedStorageFileStream.
Un 'Stream' est un flux de donn�es.
Vous pouvez lire � partir des flux. La lecture est le transfert de donn�es d'un flux vers une structure de donn�es (du texte avec ReadLine, par exemple).
Vous pouvez �crire dans les flux. L'�criture est le transfert de donn�es d'une structure de donn�es vers un flux (du texte avec ReadLine, par exemple).


using System.IO.IsolatedStorage;
using System.IO;

private void EnregistreTexte_Button_Click(object sender, RoutedEventArgs e)
{
	//Obtenir une r�f�rence de l'Isolated Storage
IsolatedStorageFile fileStorage = IsolatedStorageFile.GetUserStoreForApplication();

	//Cr�er un nouveau subdirectory
fileStorage.CreateDirectory("textFiles");

	//Cr�er un nouveau StreamWriter pour �crire 
StreamWriter fileWriter = new StreamWriter(new IsolatedStorageFileStream("textFiles\\newText.txt", 
  FileMode.OpenOrCreate, fileStorage));
	//Ecrire le contenu de MonTexte.Text dans le fichier.
	fileWriter.WriteLine(MonTexteText.Text);
	//Fermer le StreamWriter.
	fileWriter.Close();
}

private void LitTexte_Button_Click(object sender, RoutedEventArgs e)
{
	//Obtenir une r�f�rence de l'Isolated Storage
	IsolatedStorageFile fileStorage = IsolatedStorageFile.GetUserStoreForApplication();
	//Cr�er un nouveau StreamReader
	StreamReader fileReader = null;

	try
	{
		//Lire le fichier.
		fileReader = new StreamReader(new IsolatedStorageFileStream("textFiles\\newText.txt", FileMode.Open, fileStorage));
		//Lire la ligne.
		string textFile = fileReader.ReadLine();

		//Mettre la ligne lue dans le textBlock.
		MonTexte.Text = textFile;
		fileReader.Close();
	}
	catch
	{
		//Si on lit avant d'avoir enregistrer!!.
		viewText.Text = "Le fichier n'existe pas.";
	}
}

VII-A-3. LINQ To SQL, donn�es sur le Web

Il est possible d'utiliser une base de donn�es locale et de l'interroger avec LINQ to SQL.

Il y a plusieurs r�seaux et technologies Web service que vous pouvez utiliser pour r�cup�rer des donn�es distantes�:
HTTP classes�;
WCF services�;
WCF Data Services (OData services)�;
Windows Azure Services.

VII-B. Activation, d�sactivation, Tombstone.

Terminer une application�
On se souvient que, sur la page principale (la premi�re page) d'une application, si on fait 'Retour' (Back bouton de gauche), on sort de l'application elle est ferm�e.
Si on veut utiliser de nouveau l'application, il faut la relancer.

Suspendre une application
Si par, contre, il y a un appel t�l�phonique ou si on fait 'D�marrer' (bouton du milieu avec logo Windows), l'application est d�sactiv�e.
L'utilisateur est cens� y revenir et poursuivre l'utilisation de l'application.
Avec le bouton 'Back', on peut revenir dans l'application et poursuivre.
(Si on clique sur l'ic�ne du programme, l'application est relanc�e et red�marre � z�ro.)

Durant la d�sactivation, pendant un 'certain temps' WP conserve toutes les donn�es (c'est l'�tat dormant)�; si on utilise 'Back', on va r�activer l'application et se retrouver dans la m�me page avec les donn�es affich�es dans les TextBox par exemple.

�tat Tombstone�
Il n'est pas possible que toutes les applications d�sactiv�es restent au stade 'd�sactiv�' (dormant) �ternellement.
Donc apr�s un 'certain temps', et sans pr�venir, quand WP a besoin de place, il fait une d�sactivation totale dite 'Tombstone' (pierre tombale)�; l'OS tue le process�; et l�, si ensuite on fait 'Back', on se retrouve dans la page qu'on avait quitt�e mais on a perdu les informations contenues dans la page (et les donn�es de l'application) qui est r�activ�e.

En effet, Windows Phone enregistre la pile de retour d'une application lors d'une d�sactivation Tombstone. Au moment de l'activation, il restaure uniquement la derni�re page qui �tait active avant la d�sactivation Tombstone de l'application (mais pas les donn�es, les objets ni les contenus des contr�les, des TextBox�).

L'�tat persistant de l'application (le contenu des contr�les visuels, les donn�es, les objets) doit �tre enregistr� par l'application avant la d�sactivation. C'est au programmeur de le faire.

Voici le cycle de vie d'une application WP donn� par Microsoft�:

Si on veut r�activer une application qui est tombstoned et poursuivre l� o� on �tait, l'OS se chargera de r�afficher la derni�re page mais il appartient au programmeur d'enregistrer l'�tat de la page (Page State= contenu des contr�les de la page) et les donn�es de l'application (Application State) lors de la d�sactivation et de les restituer � la r�activation.

Voyons les �v�nements que propose WP pour faire cela.

A - Activated, Desactivated�de l'application
Dans App.xaml.cs�
Les �v�nement Launching (lancement) et Closing (fermeture) sont ex�cut�s au lancement et � la fermeture de l'application. C'est classique.
Les �v�nement Activated (activ�) et Desactivated (d�sactiv�) sont moins habituels, ils sont ex�cut�s quand on retourne � l'application et, au cours de l'ex�cution de votre application, quand on utilise le bouton 'd�marrer' (bouton du milieu) ou quand le t�l�phone sonne.


 // 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)
        {
        }

        // 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)
        {
        }

Si l'application est lanc�e (launching) Application_Activated n'est pas ex�cut�. L'inverse est vrai.
Idem pour Deactivated et Closing.

Utilisez les �v�nements Deactivated et Activated de l'application pour les donn�es et objets de l'application.

On utilise dans ce cas l'application Setting.
Bien se souvenir que le stockage dans l'application Setting est temporaire et ne dure que le temps pendant lequel l'application est tombstoned. Quand l'application est totalement arr�t�e, on perd l'application Setting. Si on veut un enregistrement persistant il faut utiliser l'IsolatedStorage.

Exemple simple utilisant l'ApplicationSettings�:


private void Application_Deactivated(object sender, DeactivatedEventArgs e)
{
	PhoneApplicationService.Current.State["MonObjet"] = MonObjet ;
}

Pour la r�activation on peut utiliser 'private void Application_activated'.


private void Application_Activated(object sender, DeactivatedEventArgs e)
{

	if (PhoneApplicationService.Current.State.ContainsKey("MonObjet"))
	{
		MonObjet = (string)PhoneApplicationService.Current.State["MonObjet"];
		
	}
}

B - OnNavigatedFrom, OnNavigatedFrom�de la page
On a dans la page les �v�nement OnNavigatedFrom et OnNavigatedTo que l'on peut surcharger.
OnNavigatedTo est ex�cut� lors de toutes les navigations vers la page (lorsque l'utilisateur arrive sur la page).
OnNavigatedFrom est ex�cut� lors de toutes les navigations sortant de la page (lorsque l'utilisateur quitte la page).
Le constructeur de page est appel�, lui, lors de la premi�re navigation sur cette page (appel� une seule fois).


using Microsoft.Phone.Shell;
using System.Threading;

namespace CalculeTout
{
    public partial class PageMath : PhoneApplicationPage
    {
      
        public PageMath()
        {
        //constructeur de la page, ex�cut� lors de la PREMIERE navigation vers la page
            InitializeComponent();
            
        }

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            //ex�cut� lors de toutes les navigations vers la page
            base.OnNavigatedTo(e);
            
         }
	protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
        {
            //ex�cut� lors de toutes les navigations sortant de la page
            base.OnNavigatedFrom(e);
            
         }	 
	}
	}

On utilise OnNavigatedFrom et OnNavigatedTo pour l'�tat de page (contenu des contr�les).

Je l'utilise aussi pour les objets propres � la page.

Exemple�:


 
	protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
        {
           if (phoneApplicationPage.State.ContainsKey("MyText"))
        {
            phoneApplicationPage.State.Remove("MyText");
        }
		// sauvegarder le contenu de textbox1
        phoneApplicationPage.State.Add(MyText, textbox1.text);

            
            base.OnNavigatedFrom(e);
            
         }
		 
		 protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            //Restaurer
             if (phoneApplicationPage.State.ContainsKey("MyText"))
        {
        	//Remettre le texte dans la textbox1
            textbox1.text= phoneApplicationPage.State["MyText];
        }

            
            base.OnNavigatedTo(e);
            
         }

Comment savoir si l'application d�sactiv�e a un �tat Tombstone�?
Avec la m�thode IsApplicationInstancePreserved�:


private void Application_Activated(object sender, ActivatedEventArgs e)
{
if (e.IsApplicationInstancePreserved)
{
// instance de l'application pr�serv�e, pas de tombstone, donc pas de r�cup�ration de donn�es.
}
else
{
//Etat tombstone: il faut r�cup�rer l'�tat
// Teste si une cl� est dans State dictionary.
if (PhoneApplicationService.Current.State.ContainsKey("ApplicationDataObject"))
{
//
ApplicationDataObject = PhoneApplicationService.Current.State["ApplicationDataObject"] as string;
}
}

Dans le cas o� on utilise un pattern MVVM, on peut sauvegarder et restaurer l'objet ViewModel lui-m�me.


public partial class MainPage : PhoneApplicationPage

{

    public MainPageViewModel MainPageViewModel { get; set; }

    private bool isFirstInstance;

 

    // Constructor

    public MainPage()

    {

        InitializeComponent();

        

        if (!IsolatedStorageSettings.ApplicationSettings.Contains("ViewModel"))

        {

            MainPageViewModel=new MainPageViewModel();

            DataContext = MainPageViewModel;

            isFirstInstance = true;

        }

    }

 

    protected override void OnNavigatedFrom(NavigationEventArgs e)

    {

        IsolatedStorageSettings.ApplicationSettings["ViewModel"] = MainPageViewModel;

        base.OnNavigatedFrom(e);

    }

 

    protected override void OnNavigatedTo(NavigationEventArgs e)

    {

        if (isFirstInstance) { return; }

 

        MainPageViewModel = 

            IsolatedStorageSettings.ApplicationSettings["ViewModel"] as MainPageViewModel;

        DataContext = MainPageViewModel;

        base.OnNavigatedTo(e);

    }

}

Le site CodePlex fourni en open Source TombstoneHelper.dll qui permet de sauvegarder et restaurer automatiquement l'�tat de la page, le contenu des contr�les d'une page .

Voir�: tombstonehelper

Il faut charger tombstonehelper.dll dans le projet. Comme elle vient d'Internet et que Windows interdit d'utiliser une DLL non sure, Visual Studio refuse de l'utiliser, il faut donc cliquer droit sur la DLL dans l'explorateur, choisir 'propri�t�s'�; en bas il y a un bouton qui d�bloque la DLL � vos risques et p�rils (attention, il y a des copies de la DLL dans les r�pertoires bin et release du projet, il faut les d�bloquer aussi si on ne la pas fait au d�part).

Ensuite il faut ajouter la r�f�rence au projet�: clic droit sur 'r�f�rences' dans l'explorateur de solution puis 'Ajouter une r�f�rence'�; ajouter tombstonehelper.dll.

Enfin il faut ajouter l'espace de noms n�cessaire�:


using TombstoneHelper;

Pour sauver et restaurer la totalit� des contr�les (TextBox, PasswordBoxe, CheckBoxe, RadioButton, Slider, ListBoxe et ScrollViewer, PAS les TextBlock�!) c'est simple�:


using TombstoneHelper;

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    this.SaveState(e);  // <- first line
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    this.RestoreState();  // <- second line
}

Pour un type de contr�le�:


   this.SaveState(typeof(ScrollViewer));
//ou 
    this.SaveState(typeof(TextBox), typeof(PasswordBox), typeof(CheckBox));
//ou
    this.SaveState<TextBox, PasswordBox, CheckBox>();

Attention, les contr�les doivent avoir un nom (attribut 'Name').
On se souvient que les TextBlock ne sont pas sauv�s (pour certains r�sultats j'ai pr�f�r� utiliser des TextBox avec l'attribut IsReadOnly � true plut�t que des TextBlock).

Microsoft.Phone.Shell.PhoneApplicationService.Current.ApplicationIdleDetectionMode = Microsoft.Phone.Shell.IdleDetectionMode.Disabled�:
permet � votre application de ne pas se faire tombstonner quand le t�l�phone se met en veille, en clair votre application tourne derri�re le lockscreen. C'est le comportement le plus proche d'un thread d'arri�re-plan.
Microsoft.Phone.Shell.PhoneApplicationService.Current.UserIdleDetectionMode = Microsoft.Phone.Shell.IdleDetectionMode.Disabled�:
permet de d�sactiver purement et simplement le lockscreen !

Pour tester dans l'�mulateur l'effet Tombstone il faut passer par le menu 'projet' puis 'propri�t� de', onglet 'd�boguer'.

Si on ne coche pas, il y a d�sactivation sans Tombstone.

VII-C. Le pattern Model-View-ViewModel

Un pattern est un mod�le de structure d'une application.

Le pattern M-V-VM (Model-View-ViewModel) permet une s�paration entre
la couche d�di�e aux objets m�tiers (Model),
� l'interface graphique (View),
� la logique (ViewModel).

C'est ce pattern qu'il est conseill� d'utiliser sur WP.

Il y a de tr�s bon article sur le Web�:

http://www.aymericlagier.com/2010/12/20/wp7-bien-commencer-a-developper-pour-windows-phone-7/.

Je dois vous avouer que, pour moi, cela semble tr�s obscur, complexe et difficile � g�rer. Mais cela n'engage que moi�!

VII-D. Orientation

Le WP peut fonctionner�:
en 'Portrait' ou en 'LandScape' (paysage).

Dans le code XAML de la page, on a les orientations support�es ('Portrait', 'LandScape', 'PortraitOrLandscape').
Il y a aussi l'orientation initiale('Portrait', 'LandScape').


SupportedOrientations="Portrait"
Orientation="Portrait"

Il est possible de d�tecter un changement d'orientation en surchargeant la m�thode OnOrientationChanged et en regardant l'OrientationChangedEventArgs.


public partial class MainPage :
PhoneApplicationPage
{
// Constructeur
public MainPage()
{
InitializeComponent();
}
protected override void OnOrientationChanged(OrientationChangedEventArgs e)
{
OrientationTextBlock.Text = "On passe en mode
" + e.Orientation ;
base.OnOrientationChanged(e);
}
}

e.Orientation a une des valeurs de l'�num�ration PageOrientation (Bit Flags)�:
- PageOrientation.PortraitUp�;
- PageOrientation.PortraitDown�;
-�PageOrientation.LandscapeLeft�;
- PageOrientation.LandscapeRight.

L'�num�ration comporte aussi les valeurs PageOrientation.Portrait et PageOrientation.Landscape.
En utilisant un 'ou' entre e.Orientation et PageOrientation.Landscape on determine si on est en LandscapeLeft ou LandscapeRight.


if ((e.Orientation & PageOrientation.Landscape) != 0)
{
}

C'est l'�quivalent de�:


if (e.Orientation == PageOrientation.Landscape ||
e.Orientation == PageOrientation.LandscapeLeft ||
e.Orientation == PageOrientation.LandscapeRight)
{
}

C'est l'endroit parfait pour modifier les dimensions et positions des contr�les en fonction de l'orientation.


protected override void OnOrientationChanged(OrientationChangedEventArgs e)
{

// Landscape
if ((e.Orientation & PageOrientation.Landscape) != 0)
{
	//Positionner en mode paysage
}
// Portrait
else
{
   //Positionner en mode portrait
}
base.OnOrientationChanged(e);
}

Le plus simple pour positionner les contr�les dans les deux orientations est de les mettre dans un StackPanel qui lui-m�me sera dans un ScrollViewer. Comme cela, en mode paysage, les contr�les peuvent 'd�border' en bas.

VII-E. Lanceur d'applications internes

Impossible de lancer, � partir de votre application, une de vos autres applications ou m�me une application pr�sente sur votre WP comme Internet Explorer (s�curit� oblige).

Seules exceptions�: Les Launchers (lanceurs) et Choosers (s�lecteurs) permettent d'acc�der aux Windows Phone applications. Par exemple, si vous voulez chercher un contact � partir de votre application, il faut utiliser EmailAddressChooserTask.

On peut ainsi, � partir de votre application, envoyer un mail ou un coup de t�l�phone, prendre une photo, ouvrir une page Web.

La diff�rence entre Launchers et Choosers est que les Launchers ne retournent pas de donn�es contrairement aux Choosers. L' EmailComposeTask Launcher par exemple d�marre l'email application qui se fermera simplement. La CameraCaptureTask Chooser d�marre l'application 'camera', � sa sortie cette application fournit la photo qui � �t� prise.

Il faut ajouter�:


using Microsoft.Phone.Tasks;

Launchers (lanceur). Voici les lanceurs�:

EmailComposeTask permet d'envoyer un mail�;
MarketplaceDetailTask permet de lancer le 'Windows Phone Marketplace client application' et affiche le d�tail d'un produit du Market Place�;
MarketplaceHubTask Permet de lancer le 'Windows Phone Marketplace client application'�;
MarketplaceSearchTask permet de lancer le 'Windows Phone Marketplace client application' et de voir le r�sultat d'une recherche sur un th�me�;
MediaPlayerLauncher permet de lancer le 'media player'�;
PhoneCallTask permet de lancer la 'Phone application' et de faire un appel t�l�phonique�;
SearchTask permet de lancer le 'web search application' pour rechercher sur le Web�;
SmsComposeTask permet de lancer le 'Messaging application' et de faire un nouveau message SMS�;
WebBrowserTask permet de lancer le browser Internet.

Il faut instancier le lanceur, renseigner certaines propri�t�s puis appliquer la m�thode Show.

Exemple 1�: appeler un num�ro � partir de votre application.


// Instancier le launcher.
PhoneCallTask phoneCallTask = new PhoneCallTask();
// Renseigner les propri�t�s.
phoneCallTask.PhoneNumber = "01234567";
phoneCallTask.DisplayName = "Philippe";
// Lancer la 'phone dialer application'.
phoneCallTask.Show();

On a l'�cran�:

Puis la page habituelle du t�l�phone.

Exemple 2�: faire une recherche sur le Web.


// Instancier le launcher.
SearchTask searchTask = new SearchTask();
// Renseigner la propri�t� SearchQuery avec le texte � chercher.
searchTask.SearchQuery = "Cours Windows Phone";
// Lancer la recherche.
searchTask.Show();

On a l'�cran�:

On a ensuite les r�ponses � la recherche "cours Windows Phone" sur le Web�:

Choosers (s�lecteurs). Voici les Choosers�

CameraCaptureTask lance la 'Camera application'. Permet de r�cup�rer la photo prise�;
EmailAddressChooserTask lance la 'Contacts application'. On r�cup�re l'adresse du contact s�lectionn� par l'utilisateur�;
PhoneNumberChooserTask lance la 'Contacts application'. On r�cup�re le num�ro de t�l�phone du contact s�lectionn� par l'utilisateur�;
PhotoChooserTask lance la 'Photo Chooser application'. Retourne la photo s�lectionn�e�;
SaveEmailAddressTask permet de sauvegarder une adresse mail�;
SavePhoneNumberTask permet de sauvegarder un num�ro de t�l�phone�;
GameInviteTask permet d'accepter un joueur dans un jeu multi joueur�;
SaveRingtoneTask utilise le 'save ringtone task' pour permettre � l'utilisateur de sauvegarder un fichier audio file dans le 'system ringtones' list (les sonneries).

Il faut instancier le Chooser, instancier un EventHandle sur l'�v�nement Completed du Chooser, renseigner certaines propri�t�s puis appliquer la m�thode Show.
Il faut r�cup�rer la valeur retourn�e par le Chooser dans la fonction �v�nement d�clench�e par Completed (Completed survient quand l'application Chooser est termin�e).

Exemple 1�: r�cup�rer un num�ro de t�l�phone dans les contacts.


public partial class MainPage : PhoneApplicationPage
{
// Instanciation d'un PhoneNumberChooserTask
PhoneNumberChooserTask numberChooser;
// Constructor
public MainPage()
{
InitializeComponent();
numberChooser = new PhoneNumberChooserTask();
// Instanciation d'un EventHandler sur l'�v�nement Completed du Chooser
numberChooser.Completed +=
new EventHandler<PhoneNumberResult>(numberChooser_Completed);
}

void numberChooser_Completed(object sender, PhoneNumberResult e)
{
// Est ex�cut� lorsque l'�v�nement Completed sur le Chooser survient.
// Check if TaskResult is a success
if (e.TaskResult == TaskResult.OK)
{
// Affiche le num�ro de t�l�phone dans le TextBlock txtPhoneNumber
txtPhoneNumber.Text += e.PhoneNumber;//R�cup�rer le num�ro de t�l�phone du contact
}
}


//Lancer la liste des contacts pour r�cuperer un num�ro de t�l�phone
private void ButtonChooser_Click(object sender, RoutedEventArgs e)
{
try
{
// D�marre le Chooser.
numberChooser.Show();
}
catch (System.InvalidOperationException ex)
{
// Catch l' exception, pas besoin de traitement.
}
}
}

Exemple 2�: � partir de mon application, prendre une photo puis dans mon application, l'afficher.


//Instanciation d'un CameraCaptureTask
CameraCaptureTask PhotoCaptureTask;
PhotoCaptureTask = new CameraCaptureTask();
// Instanciation de l' EventHandler sur Completed
PhotoCaptureTask.Completed += new EventHandler<PhotoResult>(PhotoCaptureTask_Completed);

//Lancer la prise de photo. 
try
{
    PhotoCaptureTask.Show();
}
catch (System.InvalidOperationException ex)
{
    MessageBox.Show("Erreur, impossible de prendre la photo.");
}

Maintenant, on a la fonction �v�nement qui survient quand la tache 'photo' est termin�e.


void PhotoCaptureTask_Completed(object sender, PhotoResult e)
{
    if (e.TaskResult == TaskResult.OK)
    {
        //Message box indiquant la longueur de l'image 
		MessageBox.Show(e.ChosenPhoto.Length.ToString());

        //Afficher l'image prise dans l'image controle nomm� myImage.
        System.Windows.Media.Imaging.BitmapImage bmp = new System.Windows.Media.Imaging.BitmapImage();
        bmp.SetSource(e.ChosenPhoto);
        myImage.Source = bmp;
    }
}

Exemple 3�: � partir de mon application, enregistrer un contact dans les contacts.


//Instanciation d'un SaveContactTask
SaveContactTask saveContactTask;
saveContactTask = new SaveContactTask();
// Instanciation de l' EventHandler sur Completed
saveContactTask.Completed += new EventHandler<SaveContactResult>(saveContactTask_Completed);

//Lancer l'enregistrement du contact. 
try
{
    saveContactTask.FirstName = "Philippe";
    saveContactTask.LastName = "Lasserre";
    saveContactTask.MobilePhone = "012345678";

    saveContactTask.Show();
}
catch (System.InvalidOperationException ex)
{
    MessageBox.Show("Impossible d'enregister le contact .");
}

Maintenant, on a la fonction �v�nement qui survient quand la tache est termin�e.


void saveContactTask_Completed(object sender, SaveContactResult e)
{
    switch (e.TaskResult)
    {
        //contact enregistr�
        case TaskResult.OK:
            MessageBox.Show("Contact enregistr�.");
            break;

        //Annuler par l'utilisateur
        case TaskResult.Cancel:
            MessageBox.Show("Enregistrement annul�.");
            break;

        //Impossible d'enregistrer
        case TaskResult.None:
            MessageBox.Show("Impossible d'enregister.");
            break;
    }
}

Dans le chapitre 'Utiliser un WebBrowser' il y a un exemple d'utilisation du WebBrowseTask pour visionner des pages du Web.

VII-F. Les th�mes

Dans les param�tres du Windows Phone on peut choisir�:
l'arri�re plan light ou dark (clair ou sombre),
la couleur d'accentuation (11 couleurs propos�es).

Voici les 10 couleurs version 7.1 (en 7.0 magenta et lime sont l�g�rement diff�rents), en plus il y a une onzi�me couleur r�serv�e � l'op�rateur ou au fabriquant (sur le mien c'est 'Orange F').

Ces couleurs se retrouvent dans les ressources Windows Phones�: la couleur de fond est�: PhoneBackgroundColor.
La couleur d'accentuation est�: PhoneAccentColor.

Pour le texte�: PhoneForegroundColor.

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).

Exemple�:


 <TextBlock Height="434" Name="TextLong" Foreground="{StaticResource PhoneAccentBrush} />"

On peut aussi utiliser les styles�:
PhoneTextNormalStyle qui utilise judicieusement une couleur (PhoneForegroundBrush) qui contraste bien avec la PhoneBackgroundColor du th�me. Si le background est dark, PhoneTextNormalStyle donnera du texte blanc (FontSize�: 20).
Il y a aussi PhoneTextTitle1Style (FontSize�: 72, PhoneForegroundBrush), PhoneTextTitle2Style (FontSize�: 32, PhoneForegroundBrush)�


<TextBox Name="resultat" Style="{StaticResource PhoneTextNormalStyle}" />

On se rend compte qu'� partir de la couleur d'accentuation et du fond, les styles s'adaptent pour �tre lisibles et coh�rents.

S�lecteur de ressource�: dans la fen�tre 'Propri�t�s', pour donner une valeur ressource � la propri�t� d'un contr�le (BackGround par exemple), on peut ouvrir le 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.

Comment utiliser les couleurs du th�me choisi par l'utilisateur�?
On va cr�er une page avec un fond d�grad� � partir des deux couleurs PhoneBackgroundColor et PhoneAccentColor.
Le titre de la page utilisera le style PhoneAccentColor. Le texte affich� aura le Style PhoneTextNormalStyle.


<!--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 contains the name of the application and page title-->
        <Rectangle Stroke="Black" Grid.RowSpan="2">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="{StaticResource PhoneBackgroundColor}" Offset="0"/>
                    <GradientStop Color="{StaticResource PhoneAccentColor}" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="Windows Phone" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="Les th�mes" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}">
            	<TextBlock.Foreground>
            		<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
            	</TextBlock.Foreground>
            </TextBlock>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock Height="601" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="0,6,0,0" x:Name="textBlock1" 
            Style="{StaticResource PhoneTextNormalStyle}"
			Text="Il y a le 'designer' � gauche qui permet de dessiner l'interface que verra l'utilisateur.
			Le designer g�n�re le code XAML correspondant, on le voit � droite, il d�crit l'interface en XAML.
			On peut aussi �crire directement du XAML � droite, ce qui modifie l'interface dans le designer.." 
			VerticalAlignment="Top" Width="468" />
        </Grid>
    </Grid>

Voici le r�sultat�: avec un fond fonc� et une couleur d'accentuation marron puis avec un fond clair et une couleur d'accentuation bleue.

Le r�sultat est parfait, le texte toujours lisible quelque soit le choix du fond et de la couleur d'accentuation.

Si on n'indique rien comme style ou couleur, par d�faut le th�me courant est utilis�: texte blanc si le fond est 'dark' et texte noir si le fond est 'light' plus couleur d'accentuation.
Si on indique des couleurs, pour le fond par exemple, il faut bien veiller � ce que la couleur du texte soit lisible et tester son application avec les diff�rents fonds et couleurs d'accentuation.

Comment savoir si on a un Background Dark ou Light�?


// Determine la visibilit� du dark background.
            Visibility darkBackgroundVisibility =
                (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];

            // Afficher dans un textbox le theme background .
            if (darkBackgroundVisibility == Visibility.Visible)
            {
                textBlock1.Text = "background = dark";
            }
            else
            {
                textBlock1.Text = "background = light";
            }

Comment conna�tre la couleur d'accentuation�?


Color currentAccentColorHex = 
            (Color)Application.Current.Resources["PhoneAccentColor"];

VII-G. Vibreur

Il faut inclure l'espace de noms Microsoft.Devices et instancier un VibrateControler avec la m�thode static Default.


using Microsoft.Devices;

            VibrateController vc = VibrateController.Default;
            vc.Start(TimeSpan.FromMilliseconds(100));

Il y a une exception si l'argument de Start est n�gatif ou sup�rieur � cinq secondes.

On a aussi la m�thode Stop.

Combien de temps faire vibrer�?
100 ms pour signaler la pression d'une touche.
300 ms pour attirer l'attention de l'utilisateur.
2 s�: non !

VII-H. Localisation

Le Windows Phone utilise trois moyens pour se localiser�:

avec les relais �metteurs cellulaires�;
avec la Wi-Fi�;
avec les satellites GPS.

Avec les relais c'est rapide mais peu pr�cis. Avec le GPS c'est pr�cis mais lent et cela ne marche pas � l'int�rieur. Avec la WiFi, il faut �tre en ville.
Les informations des relais et de la Wi-Fi arrivent en quelques secondes�; pour le GPS c'est quelques minutes.
Le WP utilise les trois (il faut, dans les param�tres du WP, que la localisation soit activ�e).

Comment trouver sa localisation (latitude, longitude, vitesse, orientation, altitude)�?

Il faut charger la r�f�rence (la DLL) 'System.Device' (clic droit sur 'R�f�rences' dans l'explorateur de projet puis 'Ajouter une r�f�rence').

Puis ajouter l'espace de noms System.Device.Localisation.
Il faut instancier un GeoCoordinateWatcher, cr�er un EventHandler sur l'�v�nement PositionChanged.
� chaque fois que la position du WP change, l'�v�nement PositionChanged est ex�cut� et donc la fonction 'gcw_PositionChanged'.
Il faut d�marrer la localisation avec la m�thode Start.
On affiche ensuite la latitude, la longitude, la vitesse, la direction en degr�s par rapport au nord g�ographique, l'altitude (dans cinq TextBlock).


using System.Device.Location;
namespace localisation
{
    public partial class MainPage : PhoneApplicationPage
    {
        GeoCoordinateWatcher GeoCoordinater;
        // Constructeur
        public MainPage()
        {
            InitializeComponent();
           
        GeoCoordinater= new GeoCoordinateWatcher();
        GeoCoordinater.PositionChanged += new EventHandler<GeoPositionChangedEventArgs<GeoCoordinate>>(gcw_PositionChanged);
        GeoCoordinater.Start();
        }
        void gcw_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e)
        {
             //Coordonn�es
            latitude.Text = e.Position.Location.Latitude.ToString();
            longitude.Text = e.Position.Location.Longitude.ToString();
            
			//Vitesse
            vitesse.Text= e.Position.Location.Speed.ToString("0.0") + " m�tres par seconde";
            
			//Direction en degr�s par rapport au nord g�ographique. 
            course.Text = e.Position.Location.Course.ToString("0.0");
            
			//Altitude
            altitude.Text = e.Position.Location.Altitude.ToString("0.0")+ " m�tres";
        }
    }
}

Pour tester l'application dans l'�mulateur, il faut ouvrir la fen�tre suivante gr�ce au bouton'>>" situ� � droite de l'�mulateur, puis cliquer sur l'onglet 'Localisation'�:

Dans la zone de recherche, en haut � gauche, il faut saisir un lieu, cela affiche une carte. Le fait de cliquer sur la carte affiche en bas les coordonn�es du lieu.
Ces coordonn�es seront utilis�es dans l'�mulateur (pas de vitesse, direction et altitude).

Afin d'�viter les plantages, on peut g�rer le Status du GeoCoorditaneWatcher afin de savoir si la localisation est activ�e, si le WP re�oit des donn�es�:
Il faut cr�er un �v�nement�:


// Ajouter en dessous du pr�c�dent EventHandler
GeoCoordinater.StatusChanged += new EventHandler<GeoPositionStatusChangedEventArgs>(watcher_StatusChanged);

//       
        static void watcher_StatusChanged(object sender, GeoPositionStatusChangedEventArgs e)
        {
            switch (e.Status)
            {
                case GeoPositionStatus.Initializing:
                    System.Diagnostics.Debug.WriteLine("Localisation en cours");
                    break;

                case GeoPositionStatus.Ready:
                    System.Diagnostics.Debug.WriteLine("Location effectu�e");
                    break;

                case GeoPositionStatus.NoData:
                    System.Diagnostics.Debug.WriteLine("Pas de donn�es");
                    break;

                case GeoPositionStatus.Disabled:
                    System.Diagnostics.Debug.WriteLine("Localisation d�sactiv�e");
                    break;
            }
        }

On peut ajouter un param�tre lors de l'initialisation pour forcer � plus de pr�cision�:


GeoCoordinateWatcher GeoCoordinater;
 
GeoCoordinater = new GeoCoordinateWatcher(GeoPositionAccuracy.High);

La valeur par d�faut est 'Default'.
La pr�cision High peut nuire aux performances.

On peut aussi indiquer la distance de d�placement pour d�clencher PositionChanged�:


GeoCoordinater.MovementThreshold = 10.0f;

VII-I. Acc�l�rom�tre

Windows Phone contient un espace de noms d�di� � la gestion et l'exploitation en temps r�el des donn�es de l'acc�l�rom�tre du t�l�phone. L'acc�l�rom�tre mesure l'intensit� et la direction de la force d'acc�l�ration appliqu�e sur le t�l�phone. La valeur de cette force suivant les axes X, Y, Z, se retrouve dans une variable d�cimale (valeurs de -1.0 � 1.0), l'unit� �tant le 'g' (1g = attraction de la force terrestre).

Voici le sens des vecteurs X, Y, Z�:

L'attraction terrestre ayant la valeur 1, voici les valeurs x y z pour les divers positions du phone.

Dans le code il faut inclure l'espace de noms n�cessaire�:


using Microsoft.Devices.Sensors;

Il faut ensuite instancier l'acc�l�rom�tre et ajouter un EventHandler sur l'�v�nement�:


    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        Accelerometer monaccelerometer = new Accelerometer();
       
        monaccelerometer.Start();
        monaccelerometer.ReadingChanged += new
        EventHandler<AccelerometerReadingEventArgs>(myHandler);


    void myHandler(object sender, AccelerometerReadingEventArgs e)
    {
        Deployment.Current.Dispatcher.BeginInvoke(() => updateMyScreen(e));
    }


    void updateMyScreen(AccelerometerReadingEventArgs e)
    {
        // updates the textblocks
        xreadout.Text = e.X.ToString("0.00");
        yreadout.Text = e.Y.ToString("0.00");
        zreadout.Text = e.Z.ToString("0.00");
    }

Pour tester l'application dans l'�mulateur, il faut ouvrir la fen�tre suivante gr�ce au bouton'>>" situ� � droite de l'�mulateur puis cliquer sur l'onglet 'acc�l�rom�tre'�:

En d�roulant la liste 'Orientation' en bas � gauche, on peut choisir diff�rentes valeurs de X, Y, Z.

VII-J. Internet, WebBrowser, WebClient

Le Windows Phone est-il connect� � internet�?


using Microsoft.Phone.Net.NetworkInformation;
/...
 MessageBox.Show(NetworkInterface.NetworkInterfaceType.ToString());

NetworkInterfaceType retourne�:
None si pas de connexion�;
Wireless80211 si connexion Wi-Fi�;
Ethernet�;
MobileBroadbandGSM ou MobileBroadbandCDMA si r�seau t�l�phone mobile.

Comment charger dans un Browser une page qui est sur le Web�?

On peut utiliser un lanceur de tache pour utiliser l'application 'WebBrowser'. Il faut ajouter un espace de noms�:


using Microsoft.Phone.Tasks;

Ensuite il faut utiliser un WebBrowserTask�:


WebBrowserTask webBrowserTask = new WebBrowserTask();

webBrowserTask.Uri = new Uri("http://msdn.microsoft.com", UriKind.Absolute);

webBrowserTask.Show();

On peut mettre un contr�le 'WebBrowser' dans la page.
En allant le chercher dans la bo�te � outils�:


<phone:WebBrowser Height="426" HorizontalAlignment="Left" Margin="26,49,0,0" 
 Name="webBrowser1" VerticalAlignment="Top" Width="407" />

En ajoutant la source :


 <phone:WebBrowser Height="426" HorizontalAlignment="Left" Margin="26,49,0,0" 
 Name="webBrowser1" VerticalAlignment="Top" Width="407"
 Source="http://www.bing.com"  />

ou en instanciant un WebBrowser dans le code C# :


using Microsoft.Phone.Controls;

WebBrowser webBrowser1 = new WebBrowser();

Ensuite on peut naviguer vers une page.


webBrowser1.Navigate(new Uri("http://msdn.microsoft.com", UriKind.Absolute));

Pas de GoBack, GoFoward...

Dans ce WebBrowser on peut aussi afficher du HTML gr�ce � NavigateToString�:


  webBrowser1.NavigateToString("<html><head><meta name='viewport' content='width=480, user-scalable=yes' />
  </head><body>Du texte en HTML</body></html>");

SaveToString retourne une string contenant le code HTML de la page.

Pour charger un fichier situ� sur Internet, on peut utiliser un WebClient.
Un WebClient a des m�thodes pour l'envoi de donn�es � une ressource locale, intranet ou Internet identifi�e par un URI ou pour la r�ception de donn�es en provenance de cette ressource.

Ici on va charger une image�:


{
WebClient MywebClient = new WebClient();
MywebClient.OpenReadCompleted += OnWebClientOpenReadCompleted;
MywebClient.OpenReadAsync(new Uri("http://www.mysite.com/Media/myimage.jpg"));
}


void OnWebClientOpenReadCompleted(object sender, OpenReadCompletedEventArgs args)
{
if (!args.Cancelled && args.Error== null)
 {
BitmapImage bmp = new BitmapImage();
bmp.SetSource(args.Result);
image.Source = bmp;
}
}

VII-K. Radio FM

Simple pour mettre en marche la radio FM.


using Microsoft.Devices.Radio;

puis


FMRadio.Instance.PowerMode=  RadioPowerMode.On;
FMRadio.Instance.Frequency= 100.3;

VII-L. Minuterie

On peut utiliser une minuterie gr�ce � la classe DispatcherTimer de espace de noms System.Windows.Threading du framework.
Elle d�clenche un �v�nement Tick tous les 'Interval' de temps.

Cr�ons une application qui affiche date, heure, minute, seconde et se met � jour toutes les secondes.


using System.Windows.Threading;
//..

//Instanciation d'un timer.
DispatcherTimer dt = new DispatcherTimer();

//On indique l'intervalle de temps entre les �v�nements Tick, ici 1 s.
dt.Interval = TimeSpan.FromSeconds(1);

//On indique quelle fonction ex�cuter quand le Timer d�clenche Tick.
dt.Tick += OnTimerSeconde;

//On d�marre le Timer
tmr.Start();



void OnTimerSeconde(object sender, EventArgs args)
//Fonction ex�cut�e toutes les secondes
{
//On affiche dans le textBlock nomm� 'Clock' la date et heure, minute, seconde
//Mise � jour toutes les secondes donc.
Clock.Text = DateTime.Now.ToString();
}

Les op�rations DispatcherTimer sont plac�es dans la file d'attente Dispatcher. Le moment d'ex�cution de l'op�ration DispatcherTimer d�pend des autres travaux de la file d'attente et de leur priorit� ; ainsi l'�v�nement Tick se produira peut-�tre pas exactement durant l'intervalle de temps d�fini, au moins apr�s un intervalle, parfois plus.
Il s'ex�cute dans le thread interface utilisateur (UI).

Il existe un autre Timer dans l'espace de noms System.Threading�:
Il fonctionne dans un thread d'arri�re-plan.


using System.Threading;


Timer tm = new Timer(TimerCallBack);
            // TimerCallBack est la m�thode de rappel � ex�cuter

tm.Change(100 , 1000);
            //Premier param�tre :
            //D�lai d'attente, en millisecondes ou en TimeSpan, avant l'appel de la m�thode de rappel 
			//sp�cifi�e au moment de la construction de Timer. 
            //Sp�cifiez Timeout.Infinite pour emp�cher le red�marrage de la minuterie. 
            //Sp�cifiez z�ro (0) pour red�marrer la minuterie imm�diatement. 
            //Second param�tre:
            //Intervalle de temps, en millisecondes ou en TimeSpan, entre les appels de la m�thode de rappel 
            
            //...
            
public void TimerCallBack(object state)
        { //m�thode de rappel ex�cut�e toutes les secondes
            this.Dispatcher.BeginInvoke(delegate() { OnTimer(); });
           
        }


void OnTimer()
        {
            // M�thode affichant l'heure
            Clock.Text = DateTime.Now.ToString();
        }

Si on avait voulu afficher l'heure dans la m�thode TimerCallBack, il y aurait eu lev�e d'une exception 'Invalid cross-thread access' car le Timer est dans un thread diff�rent du thread de l'interface. Le thread du Timer doit d�l�guer le travail au Dispatcher associ� au thread d'interface utilisateur gr�ce � BeginInvoke.

System.Threading.Timer n'est pas recommand� pour les sc�narios dans lesquels l'interface d'utilisateur doit �tre actualis�e, parce que ses callback ne se produisent pas sur le thread d'interface d'utilisateur. Syst�me.Windows.DispatcherTimer est un meilleur choix dans ces sc�narios, parce que ses �v�nements sont lev�s sur le thread d'interface d'utilisateur.

VII-M. Applications en t�che de fond�: alarme, rappel

La classe 'Alarme' de l'espace de noms 'Microsoft.Phone.Scheduler' permet de cr�er une alarme.
On va cr�er une alarme nomm�e 'MonAlarme'�; elle se d�clenchera dans 20 s et affichera "Debout".


using Microsoft.Phone.Scheduler;



Alarm alarm = new Alarm("MonAlarme");
alarm.BeginTime = DateTime.Now.AddSeconds(20);
alarm.RecurrenceType = RecurrenceInterval.Daily;
alarm.Content = "Debout.";
alarm.Sound = new Uri("sound.wav", UriKind.Relative)
ScheduledActionService.Add(alarm);

RecurrenceInterval peut �tre Daily, Weekly, Monthly, Yearly, None, EndOfMonth.
ExpirationTime indique � quel moment arr�ter le service.
Sound permet d'ajouter l'URI d'un fichier son qui sera ex�cut� lors de l'alarme. Le fichier son doit �tre dans le r�pertoire source et charg� dans l'application comme contenu.

Si on relance l'application une seconde fois et qu'on veut cr�er de nouveau une alarme nomm�e 'MonAlarme', il y a lev�e d'une exception car elle existe toujours (m�me si on a quitt� l'application).
Il est possible de d�truire cette alarme�:


ScheduledActionService.Remove("MonAlarme");

On peut aussi utiliser un Reminder ou rappel�: chaque 2 juin � 21 h 40 rappeler que c'est l'anniversaire de 'Mimi'.


Reminder reminder = new Reminder("Anniverssaire")
            {
                BeginTime = new DateTime (2012,6,2,21,40,0) ,
                Content = "Anniverssaire de Mimi",
                Title = "Anniversaire",
                RecurrenceType = RecurrenceInterval.Yearly,
                NavigationUri = new Uri("/MainPage.xaml", UriKind.Relative)
            };
            ScheduledActionService.Add(reminder);

VII-N. Informations diverses

Gr�ce � DeviceExtendedProperties de l'espace de noms Microsoft.Phone.Info on peut lire des informations sur le t�l�phone�: fabricant, nom, version du Firmware et du Hardware, m�moire totale, m�moire utilis�e par l'application, 'ApplicationPeakMemoryUsage', ID du t�l�phone.


using Microsoft.Phone.Info;


//Fabriquant du t�l�phone
MessageBox.Show ( DeviceExtendedProperties.GetValue("DeviceManufacturer").ToString());
//Nom du t�l�phone
MessageBox.Show ( DeviceExtendedProperties.GetValue("DeviceName").ToString());
//Version du Firmware
MessageBox.Show ( DeviceExtendedProperties.GetValue("DeviceFirmwareVersion").ToString());
//Version du Harsware
MessageBox.Show ( DeviceExtendedProperties.GetValue("DeviceHardwareVersion").ToString());
//M�moire total du portable
MessageBox.Show ( DeviceExtendedProperties.GetValue("DeviceTotalMemory").ToString());//retourne un long
//M�moire utilis�e par l'application
MessageBox.Show ( DeviceExtendedProperties.GetValue("ApplicationCurrentMemoryUsage").ToString());//retourne un long
           
object tryValue;
           
if (DeviceExtendedProperties.TryGetValue("ApplicationPeakMemoryUsage", out tryValue))
            {
                MessageBox.Show ( tryValue.ToString());
            }

//retourne un tableau de 20 bytes correspondant � l'ID unique du t�l�phone
MessageBox.Show ( DeviceExtendedProperties.GetValue("DeviceUniqueId").ToString()); 
//A faire�: caster le tableau pour le rendre affichable

Il existe aussi DeviceStatus (� partir de WP 7.1) qui permet de voir toutes les informations pr�c�dentes avec une syntaxe plus simple.
Mais en plus�:
PowerSource qui retourne Battery ou External (secteur)�;
ApplicationMemoryUsageLimit (m�moire que l'application peut utiliser)�;
IsKeyboardPresent IsKeyboardDeployed.


//On retrouver le pr�c�dentes information avec une syntaxe plus simple
MessageBox.Show(DeviceStatus.ApplicationCurrentMemoryUsage.ToString());

//En plus
MessageBox.Show(DeviceStatus.PowerSource.ToString());
MessageBox.Show(DeviceStatus.ApplicationMemoryUsageLimit.ToString());
MessageBox.Show(DeviceStatus.IsKeyboardPresent.ToString()); //et IsKeyboardDeployed

Le portable supporte-t-il le smooth streaming des multi-resolution encoded video�?


 MessageBox.Show(MediaCapabilities.IsMultiResolutionVideoSupported.ToString());

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.