« WPF »

A lap around .NET4.0 & Visual Studio 2010 Beta 2

22 octobre 2009

schottgu

La disponibilité de la Beta 2 de Visual Studio 2010 et du .NET Framework 4.0 a été annoncé par Jason Zander, General Manager de Visual Studio ce lundi (19/10/2009) suivi de l’annonce de Scott Guthrie, General Manager de la division .Net chez MS Corp que j’ai eu la chance de rencontrer en Mars dernier à l’occasion du MIX09 à Las Vegas.

Parcourons ensemble ces nouvelles versions !

Visual Studio 2010

Visual Studio 2010

Après une 1ère CTP délivrée à Noël dernier qui nous a permis de découvrir les nouvelles possibilités du .NET 4.0 et une Beta 1 en milieu d’année, la Beta 2 diffusée en début de semaine est arrivée à maturation avec l’annonce d’une licence “Go-Live” pour le framework .NET 4.0 et Visual Studio 2010 !

Go-live signifie que vous avez le “GO” de Microsoft pour démarrer des projets de production dessus en vous garantissant un support sur ces versions ! La version finale de ces deux produits étant fixé pour le 22 Mars 2010 (surement à l’occasion du MIX 2010 ?).

L’arrivé de cette version 2010 (10) de Visual Studio fait aussi le ménage dans les nombreuses éditions des versions antérieures. Désormais il n’y aura plus que trois éditions en plus de la gamme “Express” gratuite :

  • Visual Studio Express
  • Visual Studio 2010 Professional avec MSDN
  • Visual Studio 2010 Premium avec MSDN :
  • Visual Studio 2010 Ultimate avec MSDN

A ce sujet je vous recommande la lecture de l’article de Christopher Maneu sur son blog : http://blog.christophermaneu.fr/2009/10/vs-2010-le-point-sur-les-versions/

Visual Studio 2008 / .NET 3.5 <> Visual Studio 2010 / .NET 4.0 “side-by-side” ! N’avez plus peur, l’environnement VS2010/NET4 est parfaitement compatible avec l’environnement VS08/NET35 sur la même machine ! Pas de risque de perturbation, vous pouvez comme moi, installer ce nouvel environnement en beta 2 sur votre poste tout en continuant vos développements sous VS2008. De plus avec la License “Go-Live”, vous pouvez y aller :=)

Pour les téléchargements c’est ici : http://msdn.microsoft.com/en-us/vstudio/dd582936.aspx

Installation

Après récupération de l’ISO, vous pourrez l’installer comme à votre habitude,

welcome start step1

step3 install_dotnet4 install_restart1

install_fin install_errorSL finnish

Vous noterez une erreur à la fin de l’installeur en ce qui concerne le SDK de Silverlight 3.0 ! N’en tenez pas compte ;)

Et en prime, une nouvelle icone pour cette nouvelle version !

windowsBar

Premier lancement

Nouvelle icone et nouveau ”Splash Screen” :

SplashScreen firstStart

… et nouvelle “Start Page” qui a encore évoluée par rapport à la CTP et Beta 1 :

Firstlook StartPage

Vous trouverez aussi de nouveau “Project template” en rapport avec Sharepoint 2007/2010, Office 2010, F#, Silverlight 3.0 et Windows Azure* par défaut.

NewPorject FSharpProject       

En ce qui concerne le “project template” pour les services Azure il faudra patienter jusqu’en Novembre pour la disponibilité des tools Azure pour VS 2010. Actuellement, la création d’un projet Azure sous VS 2010 vous ouvrira la page suivante : http://blogs.msdn.com/jnak/archive/2009/10/18/windows-azure-tools-and-visual-studio-2010.aspx

CloudProject

CoudCommingSoon

Les nouveautés

Editeur de code et designers

Le look & feel de l’éditeur de code et des designer a un peu évolué par rapport aux versions précédentes avec notamment un rendu WPF permettant par exemple de pouvoir zoomer très facilement avec la molette de la souris tout en appuyant sur la touche “Control”. Cela va être très (très .. très) pratique pour les présentations publiques !

 WpfDesigner Coding

Debug zoom

 intellisense2

Online Template & Recent Project

Fonctionnalité bête mais qui m’a beaucoup plus, la possibilité de “Pin”(ner) un projet dans la liste des projets récents à la Windows Seven permettant d’avoir ses projets principaux à porté de main.

recentProject

Dans la création de nouveau projet, nous avons la possibilité de lister des “Project template” en ligne, notamment pour accéder à des Starter Kits

onlineTemplate

Multi-targeting

Cette fonctionnalité a fait son apparition dans Visual Studio 2008 pour nous permettre de sélectionner le framework de destination de notre application (2.0, 3.0 ou 3.5). Etant donné que ces différentes versions du framework exploité la même CLR (qui n’a pas bougé depuis la 2.0), le multi-targeting de VS2008 s’occupé de filtrer les assemblies disponibles dans le Framework choisi. Mais dans certains cas, l’IntelliSense montrait des membres et/ou types des versions supérieures ce qui pouvait engendrer l’utilisation de méthodes du 3.0 ou 3.5 dans un projet 2.0 !

Sous Visual Studio 2010, le multi-targeting a été profondément revu avec ce qu’ils ont appelé les “reference assemblies” qui contiennent les méta données des assemblies d’un framework donné (en quelque sorte la cartographie des assemblies d’un framework).

Grace à cela, les “Property grid” des designers, le profiler, compilateur, Object browser, et tout ce qu’il se trouve dans VS010 se basent sur ces “reference assemblies” pour ne refléter que les types et membres du framework cible sélectionné.

 Properties_Target  

Multi-Monitor

En tant qu’adapte du multi-moniteur, j’ai l’habitude de travailler avec deux écrans en mode étendu sous mon Windows Seven au travail comme à la maison ! J’avoue avoir déjà été gâté lors de l’arrivé de Windows Seven par le “Windows+P” permettant de sélectionner très rapidement et simplement le mode d’affichage.

WindowsP

Avec Visual Studio 2010 vous avez la possibilité de “sortir” vos documents et autres fenêtres de votre Visual Studio comme une fenêtre Windows pour la placer à l’endroit que vous voulez, sur l’écran que vous voulez.

Je peux donc exploiter au mieux mes écrans en plaçant par exemple mon designer WPF sur l’un des écrans pendant que j’édite son code source sur le deuxième :

multiscreen 

Navigate To

Nommé initialement “Quick Search”, le “Navigate To” permet de rechercher facilement des symboles (variables, méthodes, classes, types, etc…) dans votre solution. (A l’inverse du “Search” qui recherche du texte brut dans des fichiers !).

NavigateTo

Call Hierarchy

Cette fonctionnalité fort pratique nous permet d’avoir un affichage de la hiérarchie des appels sur une méthode.

CallHiearchy3 CallHiearchy2

Highlighted reference

Cette fonctionnalité permet de surligner dans mon code toutes les références d’une variable ou paramètres dans l’éditeur de code ! Assez pratique pour voir d’un seul coup d’œil où votre paramètre/variable est utilisé !

Highlighted

Parallel Programming and Debugging

Avec l’arrivé de Parallel Fx dans le .NET 4.0, VS2010 est doté d’outils de debugging permettant la visualisation et le débogage de chaque thread.

thread

Dependency Graph

Permet de construire des graphs à partir du code source et/ou assemblies de votre solution pour représenter les différentes relations par assembly, namespace, classe ou manière personnalisée en spécifiant ce que l’on veut y voir et avec quel filtre. 

AssemblyDependecyClassDependencygraphCustom

Les Diagrams

On y trouve un nouveau designer permettant de concevoir deux types de diagrammes : les “Layer Diagram” (architecture logique qui nous permettent d’organiser nos classes, namespaces, fichier de code, projets de notre solution, …) et les “UML Diagram” que l’on ne présentent plus.

DiagramULM

Architecture Explorer

Cette nouvelle fenêtre nous permet de parcourir les relations dans notre code.

ArchitectureExplorer

CallHiearchy

Et bien d’autre…

  • Nouvelle version de TFS 2010, le serveur de contrôle de code source et de son client dans VS2010
  • Un nouveau profiler de performance
  • Nouveau outils à destination de testeur (Microsoft Test and Lab Manager entre autre)
  • Nouveau designer pour les Workflows
  • Un explorer pour Sharepoint
  • Le “Code Optimized Web Development Profile” : un profile sans le designer web qui permet d’éditer le code source directement
  • De nouveaux snippets

.NET framework 4.0

Traiter du nouveau framework 4.0 dans son ensemble serait chose impossible dans un seul article tant les nouveautés sont importantes. Tentons d’en donner un petit aperçu.

.NET

Un nouveau moteur d’exécution : la CLR 4.0

Le framework 4.0 embarque un nouveau moteur d’exécution, la CLR 4.0 qui n’avait pas évolué depuis la version 2.0 en 2005. Rappelez-vous que le framework 3.0 puis 3.5 n’ont apporté que de nouvelles assemblies (comme WCF, WF, WPF, Linq, Data Service, etc…) mais tout cela reposant sur la CLR 2.0.

Avec ce nouveau framework la CLR à dû évoluer pour améliorer le support du multi-coeur, du garbage collector et des langages dynamiques (DLR).

Nouveau langages : C# 4.0 et VB 2010

Vous trouverez une série sur les nouveautés de VB 2010 sur le blog de Redo : http://blogs.developpeur.org/redo/archive/2009/02/10/nouveaut-s-de-visual-basic-2010-vb10-le-livre-blanc-recueil-de-blog.aspx

Concernant C# 4.0, nous pouvons citer entre autre :

  • Les types “dynamic”
  • La co- et contra- variance sur les collections
  • Les paramètres nommées et optionnels
  • L’amélioration de l’interopérabilité COM

ADO.NET 4.0

Englobant :

  • La beta 2  de Entity Framwork 4
  • La beta 2 de ADO.NET Data Service 4 (ex Astoria)
  • Lire : http://bit.ly/3zWNB1

ASP.NET 4.0

  • Nouveaux contrôles pour les graphiques
  • Nouveau framework pour ASP.NET Ajax 4.0
  • ASP.NET MVC 2
  • L’URL Routing pour Web Forms

WPF 4.0

  • Support du multi-touch et extensibilité de la taskbar pour Windows Seven
  • SDK de Surface 2.0
  • Nouveaux contrôles (dont le Rubbon)
  • Amélioration des performances, stabilité, ..

WCF & WF 4.0

  • WF : Nouvelles Activities (lire http://bit.ly/12Htlb)
  • WCF : Service de découverte, support du REST, service de routing

Et bien d’autre

  • ParallelFx : Nouvelle API pour simplifier le développement parallèle comme TPL (Task Parrallel Library) ou PLINQ (Parrallel LINQ)
  • MEF : Managed Extensibility Framework dont j’ai traité un article à ce sujet en début d’année

 

Et avant de finir, quelques liens :

[WPF] PlayAnimations ou comment jouer plusieurs animations les unes après les autres

8 janvier 2009

Lors du développement de SmartCooking (notre projet Imagine Cup) en Mai 2008, j’ ai été confronté à quelques détails techniques avec WPF. Parmi eux : les animations !

Notre application se découpe en plusieurs écrans (menu principal, visualisation du stock, ajout de produits, etc…) tous liés entre eux par de petites animations pour y jouer des transitions entre chaque écran.

image image image image

Plus globalement, si j’ ai trois écrans A, B et C, je crée quelques animations (storyboards) que je nomme ‘StoryboardOpenScreenA’, ‘StoryboardCloseScreenA’, ‘StoryboardOpenScreenB’, etc… Avec donc, à chaque fois, une animation de fermeture et une autre pour l’ ouverture de mon écran !

Il me suffit donc, dans mon code ou par l’ intermédiaire de Triggers, qu’ a jouer ces animations pour réaliser les transitions d’ un écran à l’ autre. Oui mais voila, si je place un trigger jouant plusieurs animations, du type :

1
2
3
4
5
6
<window.triggers> 
    <eventtrigger routedevent="ButtonBase.Click" sourcename="bt1"> 
        <beginstoryboard storyboard="{StaticResource animation1}" /> 
        <beginstoryboard storyboard="{StaticResource animation2}" /> 
    </eventtrigger> 
</window.triggers>

… ou directement dans le code, par appel de la fonction BeginStoryboard, mes deux animations se joueront en même temps !! Et croyez-moi, cela n’ est pas très joli surtout quand il y a plus de deux animations en même temps !

Ce que je veux donc, c’ est jouer les animations les unes après les autres ! Pour cela deux façons à ma connaissance :

  • Soit, prévoir dans les storyboards des « blancs » pour démarrer l’ animation après quelques secondes (calé sur le temps de la précédente animation !). Mais de suite je vous arrête car cette méthode n’ est pas du tout convenable !
  • Soit s’ abonner à l’ événement Completed de l’ objet Storyboard pour être notifié lors de la fin de l’ animation et ainsi lancer les animations suivantes !

Je me suis donc mis à la tache pour simplifier l’ utilisation de cette méthode par la création d’ une méthode d’ extension sur l’ objet Window (System.Windows.Window) permettant de jouer X animation(s) dans l’ ordre en précisant simplement leurs noms dans l’ ordre voulu !

On pourra ensuite, par exemple, dans notre Window et en une ligne de code, jouer les animations AnimA, AnimB et AnimC les une après les autres :

1
this.PlayAnimations("AnimA", "AnimB", "AnimC");

Le nom des animations étant un « params string[] » on pourra y jouer autant d’ animation que l’ on veut (une seule, deux, trois, … dix, … ou plus).

Voici le code de cette extension :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
public static class MyWpfExtensions
{
    public static void PlayAnimations(this Window window, params string[] animationsName)
    {
        // If animationsName is empty: return
        if (animationsName.Length <= 0) return;
        // For each animation
        for (int i = 0; i < animationsName.Length; i++)
        {
            // Get Storyboard object
            var anim = window.GetStoryBoard(animationsName[i]);
            if (anim != null)
            {
                // If not the last animation,
                if (i < (animationsName.Length - 1))
                {
                    // Add handler on the Completed event of the current storyboard to play the te next animation
                    anim.Completed += new EventHandler(
                        new StoryboardPlayNextHandler(window, anim, animationsName[i + 1]).OnHandler);
                }
            }
        }
        // Finally, play the 1st animation
        window.BeginStoryboard(window.GetStoryBoard(animationsName[0]));
    }
 
    public static Storyboard GetStoryBoard(this Window window, string name)
    {
        if (window.Resources.Contains(name))
            return (Storyboard)window.Resources[name];
        else
            return null;
    }
 
    public class StoryboardPlayNextHandler
    {
        private string _nextAnimationName;
        private Storyboard _actualStoryBoard;
        private Window _window;
 
        public StoryboardPlayNextHandler(Window window,
            Storyboard actualStoryBoard, string nextAnimationName)
        {
            this._actualStoryBoard = actualStoryBoard;
            this._nextAnimationName = nextAnimationName;
            this._window = window;
        }
 
        public void OnHandler(object sender, EventArgs e)
        {
            if (_actualStoryBoard != null)
            {
                // Remove the current handler on the completed event !
                _actualStoryBoard.Completed -= new EventHandler(this.OnHandler);
                // Launch next storyboard
                _window.BeginStoryboard(_window.GetStoryBoard(_nextAnimationName));
            }
        }
    }
}

En espérant que cela pourra vous être utile :)

Code complet de ma classe en cliquant ici !

[WPF] S’amuser avec le MediaElement sous WPF

21 octobre 2006

Le contrôle MediaElement que j’ai decouvert au cours de cette semaine a revolutionné ma petite vie de developpeur :) Ce contrôle permet de contenir des images, sons ou videos.
Pour charger un media, rien de plus simple :

1
2
MediaElement monMedia = new MediaElement();
monMedia.Source = new Uri("monURI");

Sachant que mon Uri peut pointer sur un fichier local (c:\….) ou distant (http://…..) que se soit une video, une image ou un son….

Le media sera joué immédiatement. Bien que vous disposez des methodes Play(), Stop() et Pause() pour contrôler le media, utilisez plutot la proprieté LoadedBehavior qui permet de definir et/ou obtenir l’etat du media :

1
2
3
monMedia.LoadedBehavior = MediaState.Pause; //Pause
monMedia.LoadedBehavior = MediaState.Stop; //Arret
monMedia.LoadedBehavior = MediaState.Play; //Play

A ce sujet, pour pouvoir jouer une video (ou son) en boucle, la seule doc que j’avais trouvé sur le msdn2 était de mettre un MediaTimeline. Chose un peu tordu dans le code alors qu’il y a une solution toute simple :
1) Abonnez-vous à l’evenement MediaEnded (fin du media) :

1
2
monMedia.MediaEnded +=
          new RoutedEventHandler(monMedia_MediaEnded);

2) Remettez la position du media à zero (debut) et relancez le media :

1
2
3
4
5
void monMedia_MediaEnded(object sender, RoutedEventArgs e) {
     ((MediaElement)sender).LoadedBehavior = MediaState.Stop;
     ((MediaElement)sender).Position = new TimeSpan(0);
     ((MediaElement)sender).LoadedBehavior = MediaState.Play;
}

Ce qui est quand même beaucoup plus simple :)

C’est bien beau tout ca, mais la vous n’avez aucun apercu à l’ecran ce qui est quand meme un peu dommage ^^ Mais là où ca devient fort bien interressant, c’est qu’un VisualBrush peut prendre en parametre un MediaElement pour pouvoir remplir un rectangle par exemple :

1
2
Rectangle monRectangle = new Rectangle();
monRectangle.Fill = new VisualBrush(monMedia);

Et hop la, votre video (par exemple) sera joué dans ce rectangle. Enfin pour rajouter votre rectangle à un canvas que vous aurez au préalable placé dans votre code XAML :

1
monCanvas.Children.Add(monRectangle);

A partir de la on peut vraiement s’amuser et aller plus loin dans la démarche.. Par exemple, les rectangles ont une proprieté Clip qui va nous permettre de clipper notre media, OpacityMask pour appliquer un masque d’opacité, et bien d’autre chose pour appliquer differents effets a notre rectangle/video, … Et encore je ne parle que des rectangles, a partir du moment où votre controle pourra etre remplit par un VisualBrush on pourra tout y mettre :)
Je ne vais pas vous devoiler sur ce quoi je travaille en ce moment, mais il faut bien se rendre compte de tout ce qu’on peut faire avec car c’est carrement dément…

[WPF] Z-Index dans WPF

12 octobre 2006

Tout comme en CSS, on retrouve une notion de ZIndex en WPF, qui permet de spécifier l’empilement des différents calques.

Sous WPF, les ZIndex s’appliquent uniquement sur des objets ‘conteneurs’ comme les Panels, Grid, StackPanels et Canvas.

En XAML, la syntaxe est :

1
2
3
4
<Canvas>
    <Image Name="Image1" Canvas.ZIndex="2" Height="60" Width="60" Source="test1.png" />
    <Image Name="Image2" Canvas.ZIndex="1" Height="50" Width="70" Source="test2.png" />
</Canvas>

Ici, l’image 1 se trouvera au dessus de l’image 2. On remarque l’ attribut Canvas.ZIndex placé dans la balise Image.

Dans le code, ici en C#, cela se déclare de cette manière :

1
2
Canvas.SetZIndex(Image1, 2);
Canvas.SetZIndex(Image2, 1);

Vous avez aussi la possibilité de récupérer la proprièté ZIndex d’un element par :

1
int image1_ZIndex = Canvas.GetZIndex(Image1)