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