WPF - Webs

WPF - Webs

WPF, nouvelle couche graphique WPF est n, pas en tant que couche supplmentaire pour le systme existant mais comme remplaant des Windows Forms. Pour afficher vos fentres l'cran, c'est Direct X qui est utilis et qui profite ainsi des possibilits de vos cartes graphiques.

Des techniques complexes sont ralisables trs simplement. Il permet une sparation totale du code de linterface graphique (au sens ASP.Net) On peut manipuler nos objets WPF depuis C# au cas o cela serait ncessaire.

Prrequis WPF a t introduit avec le framework .net 3 Ncessite Windows XP SP2 ou plus. Intgr dans Visual Studio 2008 et plus Pour crer les interface graphique, nous pouvons utiliser un nouveau logiciel de Microsoft spcialement ddi la cration d'interface graphique WPF. Ce programme, appel Microsoft Expression Blend, permet de crer trs facilement

les interfaces graphiques, d'un point de vue design alors que VS est plus orient code . XAML Dfinition: un langage XML qui dcrit votre interface. Utilit: utilis pour crer deux types de

programme: Un logiciel classique, sous Windows. C'est alors WPF qui se charge de comprendre le XAML pour crer votre interface graphique et la faire interagir avec votre code .net (C#, Vb.net, ...). Une interface Web. Dans ce cas c'est Silverlight qui prend en charge votre code. Le programme s'excutera dans votre navigateur, comme les

applications Flash par exemple. Hello World: XAML

TextBlock est lquivalent label en winforms Equivalent C# using System; using System.Windows; using System.Windows.Controls; namespace HelloWorld1

{ class HelloWindow { static void Main() { // Cration de la fenetre Window fenetre = new Window(); // Assignation des proprites fenetre.Title = "Window1"; fenetre.Width = 300;

fenetre.Height = 300; // Cration du TextBlock TextBlock tblock = new TextBlock(); tblock.Text = "Hello le SDZ"; // Ajout du contrle la fentre fenetre.Content = tblock; // Cration de l'application et dmarrage avec notre fentre Application app = new Application(); app.Run(fenetre); }

} } Premire action ----------------MainWindow.xaml----------

----------------MainWindow.xaml.cs--------private void Button_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Coucou"); this.Close(); } Conteneurs : la grille Le contrle Window ne peut contenir qu'un seul lment.

Les lments chargs d'en contenir d'autres sont appels conteneurs . La grille peut tre vue comme un tableau en XHTML. Ce tableau reprsente, comme son nom l'indique, une grille avec plusieurs colonnes et lignes. Chaque contrle est alors positionn dans une des cellules du

tableau. videmment, chaque ligne et colonne peut tre de dimension diffrente. De plus un contrle peut appartenir plusieurs cases la fois. Dimensions (Width, Height) Les dimension peuvent tre dfinit de 3 manires: une valeur fixe, permettant de dfinir prcisment la taille de l'lment (plusieurs units sont disponibles) ; une portion de l'espace disponible, reprsente par une toile.

la valeur Auto pour que l'lment s'adapte au contenu. Une valeur fixe peut tre de plusieurs types : le dip (unit px) qui est celle par dfaut (ex : 10pix ou 10 ) ; le pouce (unit in, 1in=96pix, ex : 10in) ; le centimtre (unit cm, 1cm=96/2.54pix, ex : 10cm) ; le point (unit pt, 1pt = 96/72 pix, ex 10pt). Dfinition des lignes et colonnes

Positionnement des contrles dans les cellules Si vous ajoutez des contrles votre grille, ils vont tous se trouver par dfaut assigns la premire cellule. Pour spcifier la position dans la grille on utilise les

proprits Grid.Column et Grid.Row pour spcifier la colonne Il s'agit d'un nouveau concept. Les proprits attaches (atached property). Ainsi en dehors d'une grille, aucun contrle ne possde ces proprits et tous les contrles les possdent l'intrieur. Il peut parfois tre intressant qu'un contrle remplisse

plusieurs cellules. Cela se ralise en utilisant les proprits attaches Grid.RowSpan et Grid.ColumnSpan .

Atelier Calculatrice Grid Splitter Lorsqu'un logiciel a plusieurs panneaux, il est trs

pratique de pouvoir changer leur taille en fonction de son utilisation. Le Grid Splitter permet de redimensionner automatiquement les autres colonnes ou lignes.

La proprit HorizontalAlignment permet de spcifier la position horizontale du contrle vis-

-vis de son conteneur (ici notre cellule). Nous positionnons cette proprit Strech pour que le contrle prenne toute la largeur (les 5dip) Les conteneurs empilement: StackPanel Le StackPanel positionne automatiquement les contrles qu'on lui ajoute les uns en dessous des autres, ou les uns la suite des autres en fonction de la valeur de la proprit Orientation . Cette

proprit peut logiquement prendre les valeurs Vertical ou Horizontal .

Pour dplacer notre bouton aprs chaque click, nous devons tout d'abord connatre sa position courante. Nous l'obtenons en utilisant les mthodes statiques GetLeft et GetTop appliques notre contrle. Pour changer la position il faut utiliser les mthodes statiques SetLeft et SetTop . Vous devez fournir ces mthodes deux paramtres. Le premier est le contrle auquel on souhaite effectuer la modification, et le deuxime, la nouvelle valeur du paramtre. private void Button_Click(object sender, RoutedEventArgs e) { // Rcupration de la position de l'lment

double PositionLeft = Canvas.GetLeft(Boutton1); double PositionTop = Canvas.GetTop(Boutton1); // Modification de la position Canvas.SetLeft(Boutton1, PositionLeft + 10); Canvas.SetTop(Boutton1, PositionTop + 10); } De mme, pour modifier l'affectation d'un lment une cellule de grille, vous pouvez

de la mme manire utiliser les mthodes statiques SetRow , SetColumn , SetRowSpan et SetColumnSpan de la classe Grid . DockPanel DockPanel est un exemple typique de lutilisation des proprits attachs. Tous les contrles Windows Forms possdaient

une proprit Dock nous permettant de les coller aux bords d'une fentre. Nous pouvons faire pareil avec WPF en utilisant le DockPanel . L'ajout de contrles dans le DockPanel leur permet de dfinir les proprits DockPanel.Dock qui peuvent prendre les valeurs Left , Right , Top ou Bottom .

Comme vous venez de voir, par dfaut, le dernier contrle remplit automatiquement tout l'espace restant. Ce

comportement peut tre modifi en positionnant la proprit LastChildFill du DockPanel False.

Position et taille des contrles

Proprits spcifiques des boutons La premire proprit IsEnabled n'est pas spcifique qu'aux boutons et permet de dsactiver les contrles. La deuxime, IsDefault permet de spcifier le bouton par dfaut. L'activation de cette proprit permet de pr-valider le bouton. Sous Vista par exemple vous verrez le bouton clignoter lentement. De plus, lorsque cette proprit est utilise, l'appui sur la touche Entre permet de valider

l'action associe au bouton. Enfin, la dernire proprit que nous allons voir est IsCancel. Cette proprit permet de spcifier le bouton d'annulation. La principale caractristique de cette option est que l'action du bouton pourra tre dclenche par la touche chap de votre clavier.

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title= "window1" Height="300" Width="350">

L'activation d'une case se fait grce la proprit IsChecked Tout comme les boutons radios, il est possible de faire passer les lments dans un troisime tat.

ToolTips

Menu

Les ressources Chaque composant WPF possde une proprit

Resources qui, comme son nom lindique, permet de dfinir les ressources qui lui seront associes. Par ressources, on entend beaucoup de choses : les styles (dfinissent lapparence dun contrle), les templates (permettent de dfinir comment afficher les donnes affectes un contrle), les animations les transformations (rotation, etc)

Les ressources Ces ressources vous permettent davoir accs et donc de rutiliser des objets dfinis pour lensemble de votre application Les styles les styles permettent de dfinir lapparence de vos contrles

Setter : qui vont nous servir dfinir la proprit modifier proprit Value : la valeur lui attribuer Les styles Les templates Les Templates sont utiliss pour dcrire la

structure visuelle dun contrle. Pour cela, les contrles WPF prsentent la proprit Template, qui vous permettra donc dassocier un template, que vous avez dfinit, un contrle Les templates Les triggers Les Triggers sont utiliss conjointement avec

les styles et les templates, afin de raliser des applications proposant des interactions riches et dynamiques. Les Triggers sont activs lorsquune condition spcifique devient vraie. Les triggers Il faut galement savoir que WPF vous permet de vrifier trois choses dans les conditions

dun trigger : une Property Dependency (utilisation de Trigger) une proprit .NET (utilisation de DataTrigger) un vnement (utilisation dEventTrigger) Les triggers Pour modifier la valeur dune proprit, dans

un trigger, vous devez l encore utiliser llment Setter : Les triggers vous avez la possibilit dutiliser plusieurs Triggers dans un style, ceci afin de permettre la modification de multiples proprits MultiTrigger

Vous pouvez galement ajouter des triggers qui ne sexcuteront que sous certaines conditions. Pour cela, vous devez utiliser un MultiTrigger, dans lequel vous spcifier, dans llment Conditions, les diffrentes conditions qui doivent tre remplies pour que votre trigger sexcute :

MultiTrigger Dans cet exemple, on sassure que les proprits IsMouseOver et IsFocused sont bien vrais. Si ces deux conditions sont bien remplies, alors on change la proprit Foreground de notre bouton. EventTriggers Les triggers qui sont dclenchs suite un

vnement. En effet, ds quun vnement survient, tel que lvnement Click dun bouton, un EventTrigger est dclench en rponse cet vnement. EventTriggers Storyboards

Les StoryBoards sont des lments XAML qui vous permettent de dfinir un ensemble dactions. On peut donc dire que les Storyboards sont un ensemble danimations/transformations, qui vous offre la possibilit de pouvoir dfinir le temps que doivent durer vos animations, la proprit modifier sur votre objet, etc

Storyboards Attardons nous maintenant sur deux proprits intressantes de llment StoryBoard : La proprit TargetName : Cette proprit est utilise pour dfinir la cible,

autrement dit lobjet, que lon dsire manipuler. Il peut sagir dun lment, dune rotation, etc La proprit TargetProperty Cette proprit, quand elle, est utilise pour indiquer, sur notre Cible, quelle est la proprit que lon souhaite manipuler : un angle, une taille, etc.

Storyboards Storyboard possde dautres proprits intressantes, que nous allons voir tout de suite : AutoReverse : Indique si, une fois arriv la fin du StoryBoard, lanimation doit revenir sa position initiale, BeginTime : Indique quel moment le

StoryBoard doit dmarrer, Duration : Vous permet de spcifier combien de temps doit durer votre animation Les animations Dans vos applications WPF, vous avez la possibilit dutiliser des animations, qui vous permettront danimer vos contrles. Pour manipuler un lment, et plus

prcisment la proprit dun lment, vous devez utiliser les deux proprits que nous avons vues prcdemment : TargetName et TargetProperty. Les animations Ici, on utilise une DoubleAnimation pour modifier la valeur de la proprit Width de notre contrle nomm m_BoutonAnime. On notera au passage lutilisation de la proprit SpeedRatio, qui vous permet de spcifier quelle vitesse doit sexcuter votre animation

Les animations Voici une liste des diffrentes animations possibles que vous pouvez utiliser dans vos applications WPF : ByteAnimation : Ce type danimation vous permet danimer la valeur dune proprit de type Byte,

ColorAnimation : Vous permet danimer la valeur dune proprit de type Color, DoubleAnimation : Est utilis pour animer la valeur dune proprit de type Double, Etc Les animations Les KeyFrames sont utiliss pour dfinir des tapes lors de votre animation.

En effet, vous allez pouvoir dfinir une animation qui dure, au total, 10 secondes, et indiquer quune animation doit se produire 2 secondes, une autre animation doit tre dclenche 7 secondes, etc. Tout cela, en utilisant des KeyFrames, sorte de point darrt de vos animations. Les animations Exemple

Les animations Nous utilisons une DoubleAnimationUsingKeyFrame, cest--dire une animation dans laquelle nous allons pouvoir spcifier des tapes intermdiaires. Sur cette animation, nous spcifions une LinearDoubleKeyFrame, qui vous permet danimer la valeur dune proprit de type Double, suivant une interpolation linaire.

Nous prcisons, pour cette tape, la valeur qui doit tre atteinte (dans notre cas 360), au moyen de lattribut Value. Enfin, grce lattribut KeyTime, on indique que cette valeur doit tre attente au bout de la valeur indique (ici, deux secondes) Les animations Les animations Grce au ParallelTimeline, vous avez la

possibilit denglober des animations qui sexcuteront en parallle. Les transformations Les transformations sont lautre lment que vous pouvez utiliser si vous souhaitez donner plus de vie vos applications Il existe plusieurs types de transformation.

On peut, par exemple, citer : les TranslateTransform les RotateTransform les ScaleTransform les MatrixTransform les SkewTransform les TransformGroup Les transformations Les TranslateTransform, tout dabord, sont

utilises pour translater un objet. On indique donc la position en X et la position en Y que notre objet doit avoir, par rapport son point de dpart, et on assiste ainsi son dplacement Les transformations Les RotateTransform sont des

transformations qui vous permettent de raliser, comme vous le devinez surement, des rotations Les transformations Les ScaleTransform vous offrent la possibilit deffectuer des redimensionnements de contrles. Pour cela, vous devez spcifier, au moyen des attributs

CenterX et CenterY, les coordonnes en X et en Y de la transformation Les transformations Les MatrixTransform vous permettent, quand elles, de crer des transformations personnalises, non fournies par les TranslateTransform,RotateTransform, etc Une matrice 3x3 est utilise pour les

transformations dans un plan deux dimensions.

Recently Viewed Presentations

  • Mayor of Shrewsbury Awards 2019 #MayorsAwards Celebrating 10

    Mayor of Shrewsbury Awards 2019 #MayorsAwards Celebrating 10

    Membership of the group has grown as has the group who go out litter picking championing the need to take back our open spaces and make them litter-free. The reason for this group was spelled out recently when they picked...
  • Saturn Ring Structure - Outline F B A

    Saturn Ring Structure - Outline F B A

    Saturn Ring Structure - Outline F B D C A E and G rings not shown Comet Swan Short Period comets Less than 200 years Started in the Kuiper Belt Long Period comets More than 200 years Started in the...
  • Chapter 1 Making Economic Decisions

    Chapter 1 Making Economic Decisions

    Perfect first-time Waste minimization Continuous improvement Pull processing Flexibility Building Five Laws of Lean Sigma Law 0 Law of the market - customer CTQ defines quality and is the highest priority for improvement (ROIC, NPV) Law 1 Law of flexibility...
  • New Spin on an Old Theme - PC\|MAC

    New Spin on an Old Theme - PC\|MAC

    New Spin on an Old Theme. Middle School Poetry, Bloom's Taxonomy and ... When the top was more and more uncovered until December fifteenthWhen finally it snowed and snowedI love seeing this mountain like a mouseAttached to the tail of...
  • The Traditions of The Apostles - Ntrf

    The Traditions of The Apostles - Ntrf

    ESV Luke 22:16 . For I tell you I will not eat it until* it is fulfilled in the kingdom of God. * heos. hutou "Until He Comes" (1Co 11:26) "until" = achri hou. When used along with an aorist...
  • CMOS Power Dissipation - Washington State

    CMOS Power Dissipation - Washington State

    (Vdd - Vmin) ; Vmin : min voltage swing at the output Glitch power dissipation is dependent on Output load Input pattern Input slope Glitch Power Dissipation Hazard generation can be reduced by gate sizing and path balancing techniques Hazard...
  • Urinary System - ANATOMY AND PHYSIOLOGY

    Urinary System - ANATOMY AND PHYSIOLOGY

    Regulate BP by secreting renin. Kidney Structure A medial depression in the kidney leads to a hollow renal sinus into which blood vessels, nerves, lymphatic vessels, and the ureter enter. Inside the renal sinus lies a renal pelvis that is...
  • School Supplies

    School Supplies

    Write some examples of onomatopoeia from this poem. Write down 2-3 more examples that are not from the poem. How does the poet . personify. the crows in this poem? What were the crows thinking about before one of them...