Activation d'Hyper V sur Windows 8 pour l'émulateur WP8

Il est nécessaire d'activer Hyper V sur Windows 8 pour pouvoir utiliser l'émulateur WP8. C'est très simple:
 - Aller dans le control panel
 - Aller dans Programs
 - Aller dans Programs and features
 - Dans le menu de gauche, sélectionner "Turn Windows Features on or off"
 - Activer les fonctionnalités Hyper V

Pour les fans HD

Voir l'article sur clubic:
Prise en charge du 1080p sur WP

Définir et utiliser une ressource d'application

Dans beaucou de projets, il est nécessaire de centraliser les ressources dans l'app.xaml. En effet, les ressources d'application sont accessible aussi bien dans le code que dans le XAML.
Prenons le cas d'une couleur utilisée dans toute l'application. Cette couleur peut être, par exemple la couleur principale d'une marque. Si on utilise pas de ressource d'application, il faut changer toutes les couleurs de toutes les pages une par une. Pas très pratique!

Définir une ressource dans l'App.xaml

Les ressources d'application sont dans le fichier app.xaml. A noter qu'il est égallement possible de définir des ressources pour une page uniquement. A ce moment là, la ressources est définie dans les ressources locales de la page.

 Dans le fichier app.xaml, il faut repérer les balises "Application.Resources":
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml"
>

<Application.Resources>
</Application.Resources>

</Application>

On peut alors ajouter notre couleur utilisée dans toute l'application (MyColor):
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml"
>

<Application.Resources>
<SolidColorBrush x:Key="MyColor" Color="Blue"></SolidColorBrush>
</Application.Resources>

</Application>

Utiliser la ressource dans le XAML

Une foi la ressource définie pour toute l'application, il est simple de l'utiliser dans du XAML. Par exemple, si la couleur est utilisée pour changer la couleur de backgroud d'un contrôle, il suffira d'écrire:
... Background="{StaticResource BackgroundColor}" ...

Utiliser la ressource dans du code C#

Nous allons maintenant voir comment utiliser cette ressource dans du code. Rien de plus simple, toutes les ressources sont disponible dans le dictionnaire de ressources. La récupération de la ressource dans le dictionnaire se fait par l'intermédiaire de la "Key" définie dans la ressource.

Dans notre exemple, on pourra récupérer la ressource de la manière suivante:
Brush MyBrush = Application.Current.Resources["MyColor"] as Brush;

Faire planter son téléphone, leçon 1

Si vous voulez faire planter votre WP8, il suffit de faire des screenshots très très vite (WINDOWS+ POWER ).
Au bout d'un moment l'écran devient vert.

Pas de panique, pour redémarrer:
VOLUME BAS+POWER+CAMERA

Récupérer les couleurs d'accentuations WP8 à la volée

Pour récupérer les couleurs d'accentuations à la volée, vous pouvez utiliser le code suivant:
   public class ColorItem
    {
        public Brush BackgroundColor { get; set; }
        public string ColorTitle { get; set; }
    }

    public class Colors
    {
        private static Colors _instance;
        private List<ColorItem> _list;

        public static Colors Instance
        {
            get
            {
                if (_instance == null)
                {
                    _instance = new Colors();
                }
                return _instance;
            }
        }

        public List<ColorItem> GetAvailableColorList()
        {
            if (_list == null)
            {
                _list = new List<ColorItem>();
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 164, 196, 0)), ColorTitle = "lime" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 96, 169, 23)), ColorTitle = "green" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 0, 138, 0)), ColorTitle = "emerald" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 0, 171, 169)), ColorTitle = "teal" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 27, 161, 226)), ColorTitle = "cyan" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 0, 80, 239)), ColorTitle = "cobalt" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 106, 0, 255)), ColorTitle = "indigo" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 170, 0, 255)), ColorTitle = "violet" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 244, 141, 208)), ColorTitle = "pink" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 216, 0, 115)), ColorTitle = "magenta" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 162, 0, 37)), ColorTitle = "crimson" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 229, 20, 0)), ColorTitle = "red" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 250, 104, 0)), ColorTitle = "orange" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 240, 163, 10)), ColorTitle = "amber" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 216, 139, 0)), ColorTitle = "yellow" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 130, 90, 44)), ColorTitle = "brown" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 109, 135, 100)), ColorTitle = "olive" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 100, 118, 135)), ColorTitle = "steel" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 118, 96, 138)), ColorTitle = "mauve" });
                _list.Add(new ColorItem { BackgroundColor = new SolidColorBrush(Color.FromArgb(0xFF, 122, 59, 63)), ColorTitle = "sienna" });
            }

            return _list;
        }
    }

L'intérêt est de ne pas avoir à tapper toutes les couleurs d'accentuations à la mains :-)

Créer un container (Grid) carré!

Comment créer simplement un container carré sans fixer manuellement la largeur et la hauteur à la même valeur?
Rien de plus simple! Nous allons utiliser le Binding entre éléments.

Prenons l'exemple d'une Grid:
<Grid x:Name="ContentPanel" Height="{Binding ActualWidth, ElementName=ContentPanel}"/>

A l'aide de ce code XAML, la hauteur de la Grid et bindée à la largeur de la grid. Si la largeur change, la hauteur changera égallement!

Utiliser un ViewModel dans un DataTemplate de liste

Problématique

WP8 et WP7 ne supportent pas toutes les propriétés liées aux options de binding RelativeSource. Il est alors compliqué de créer un binding à l'intérieur d'un datatemplate vers un DataContext de plus haut niveau.
Je m'explique....
Exemple simple avec une liste. La liste est dans une page XAML dont le DataContext est un ViewModel nommé MainViewModel. A l'intérieur de cette liste, des items. La source des items (ItemsSource) est bindée à une ObservableCollection contenant des ItemsViewModel. Cette ObservableCollection est un attribut de la classe MainViewModel (le DataContext de la page). Dans le XAML, il est possible de définir comment est affiché un item de la liste par l'intermédiaire d'un ItemTemplate. Vue de l'ItemTemplate, le Datacontext n'est plus le DataContext de la page mais un des items. En effet, la source des items est bindée au DataContext de la page mais à l'intérieur d'un ItemTemplate, c'est l'item le DataContext!
Mais alors comment faire pour utiliser un attribut du MainViewModel pour tous les items de la liste? En WPF, il est possible d'utiliser des RelativeSource. Malheureusement la version de Silverlight utilisée pour WP7 et WP8 ne supporte pas les propriétés qui nous intéresse dans notre cas.

Voyons comment s'y prendre.....

La classe MainViewModel

Dans notre exemple, la propriété commune à tous les items de la liste sera la couleur d'un rectangle affiché dans chaque item. Tous les items de la liste afficheront donc le même rectangle avec la même couleur.
C'est l'attribut MyColor qui sera utilisé!

Nous retrouvons dans le MainViewModel l'observable collection qui contient les données de type ItemViewModel.


public class MainViewModel : INotifyPropertyChanged
    {
        public MainViewModel()
        {
            this.Items = new ObservableCollection<ItemViewModel>();
        }

        public ObservableCollection<ItemViewModel> Items { get; private set; }

        public Brush MyColor
        {
            get
            {
                return new SolidColorBrush(Color.FromArgb(0xFF, 164, 196, 0));
            }
        }...

La classe ItemViewModel

La classe ItemViewModel contient les données à afficher pour chaque item de la liste. L'attribut que nous allons affiché pour chaque item est LineOne.

   public class ItemViewModel : INotifyPropertyChanged
    {
         private string _lineOne;
        public string LineOne
        {
            get
            {
                return _lineOne;
            }
            set
            {
                if (value != _lineOne)
                {
                    _lineOne = value;
                    NotifyPropertyChanged("LineOne");
                }
            }
        }...

Le XAML

Info: L'application utilisée a été nommée SampleApp et les ViewModels sont dans un dossier "ViewModels". L'information est utile pour la définition du namespace XAML. 

La partie intéressante se situe dans le XAML. L'astuce consiste à créer une ressource à la PhoneApplicationPage qui est du type MainViewModel de la manière suivante:
   <phone:PhoneApplicationPage.Resources>
        <local:MainViewModel x:Key="ViewModel"></local:MainViewModel>
   </phone:PhoneApplicationPage.Resources>

 Ceci fonctionne en ayant préalablement défini le namespace suivant dans le header de la page XAML:
xmlns:local="clr-namespace:SampleApp.ViewModels"

La liste suivante est définie dans le XAML:
            <phone:LongListSelector x:Name="MainLongListSelector" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainLongListSelector_SelectionChanged">
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                      <StackPanel Margin="0,0,0,17">
                        <Rectangle Height="50" Fill="{Binding MyColor, Mode=OneWay, Source={StaticResource ViewModel}}" />   
                          <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                      </StackPanel>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>


On retrouve un Binding traditionnel vers l'attribut LineOne de l'ItemViewModel correspondant à l'item de liste "en cours d'affichage". Mais ce qui nous intéresse se situe au niveau du rectangle. A l'aide de cette astuce, la propriété Fill est Bindée à la propriété Mycolor du MainViewModel:
Fill="{Binding MyColor, Mode=OneWay, Source={StaticResource ViewModel}}"

Concaténer plusieurs chaines bindées dans un seul TextBlock

Dans certains cas, il peut être intéressant de concaténer plusieurs chaines de charactères dans la même TextBox.
Une première approche simple est de concaténer les deux chaînes dans le View Model en utilisant une variable intermédiaire.
Mais la solution la plus simple est d'utiliser la propriété Run du TextBlock de la manière suivante:

<TextBlock >

   <Run Text="{Binding Ville}"></Run>

   <Run Text="{Binding CodePostal}"></Run>

</TextBlock>

Dans cet exemple, la ville et le code postal seront utilisés dans le même TextBlock.
Il est égallement possible de sauter une ligne en utilisant un <LineBreak/>:

<TextBlock >

   <Run Text="{Binding Ville}"></Run>
   <LineBreak/>

   <Run Text="{Binding CodePostal}"></Run>

</TextBlock>

Création d'un service référence OData sous WP8

Pour ceux qui veulent utiliser des données OData sur Windows Phone, il faut en premier lieu installer la mise à jour suivante:
http://www.microsoft.com/en-us/download/details.aspx?id=35461

Cette mise à jour permet d'avoir accès au "Add Service Reference" dans Visual pour accéder plus facilement aux données OData.

Pour ce qui est de la consommation des données, regarder le lien suivant:
http://msdn.microsoft.com/en-us/library/windowsphone/develop/gg521146(v=vs.105).aspx

Contenu du Windows Phone 8 toolkit

Voici la liste des différents contrôles du Windows Phone toolkit (un post sera créé pour chaque contrôle):

• AutoCompleteBox
• ContextMenu
• CustomMessageBox
• DateTimeConverters
• DateTimePickers
• Effects – SlideInEffect, TiltEffect and TurnstileFeatherEffect
• ExpanderView
• HubTile
• ListPicker
• LongListMultiSelector
• Map extensions
• PhoneTextBox
• RatingControl
• ToggleSwitch
• Navigation transitions
• WrapPanel
• LongListSelector for 7.x
• MultiSelect for 7.x

Installation de Windows Phone 8 toolkit

Sous Windows Phone 8 (WP8) le silverlight toolkit, se nomme Windows Phone toolkit. Le toolkit est disponible à l'adresse suivante:
http://phone.codeplex.com/

Pour intégrer le toolkit dans un projet WP8, if faut tout d'abord mettre à jour Nuget (utilitaire de gestion de packages). En effet, la version 2.1 est nécessaire pour installer le Windows Phone toolkit. Pour mettre à jour Nuget, il faut utiliser le gestoinnaire de package dans Visual Studio.

Une foi Nuget mis à jour, il est alors possible d'installer le Windows Phone Toolkit à partir de Nuget.