Tài liệu XAML- P7 pdf

Friend WithEvents blkPhoto As System.Windows.Controls.Label Private _contentLoaded As Boolean ’’’<summary> ’’’InitializeComponent ’’’</summary> Public Sub InitializeComponent() Implements System.Windows.Markup. IComponentConnector.InitializeComponent If _contentLoaded Then Return End If _contentLoaded = true Dim resourceLocater As System.Uri = _ New System.Uri( _ "WinFxBrowserApplication1;component\page1.baml" _ , System.UriKind.RelativeOrAbsolute) System.Windows.Application.LoadComponent(Me _ , resourceLocater) End Sub Sub System_Windows_Markup_IComponentConnector_Connect( _ ByVal connectionId As Integer _ , ByVal target As Object) _ Implements _ System.Windows.Markup.IComponentConnector.Connect If (connectionId = 1) Then Me.lblNom = _ CType(target,System.Windows.Controls.Label) Return End If If (connectionId = 2) Then Me.txtNom = _ CType(target,System.Windows.Controls.TextBox) Return End If If (connectionId = 3) Then Me.lblPrenom = _ CType(target,System.Windows.Controls.Label) Return End If If (connectionId = 4) Then Me.txtPrenom = _ CType(target,System.Windows.Controls.TextBox) Return End If If (connectionId = 5) Then Me.lblAdr = _ Le designer de Visual Studio (nom de code CIDER) 10 Le guide du codeur • 301 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CType(target,System.Windows.Controls.Label) Return End If If (connectionId = 6) Then Me.txtAdr = _ CType(target,System.Windows.Controls.TextBox) Return End If If (connectionId = 7) Then Me.lblCP = _ CType(target,System.Windows.Controls.Label) Return End If If (connectionId = 8) Then Me.txtCP = _ CType(target,System.Windows.Controls.TextBox) Return End If If (connectionId = 9) Then Me.lblLocalite = _ CType(target,System.Windows.Controls.Label) Return End If If (connectionId = 10) Then Me.txtLocalite = _ CType(target,System.Windows.Controls.TextBox) Return End If If (connectionId = 11) Then Me.Canvas1 = _ CType(target,System.Windows.Controls.Canvas) Return End If If (connectionId = 12) Then Me.blkPhoto = _ CType(target,System.Windows.Controls.Label) Return End If Me._contentLoaded = true End Sub End Class Lorsqu’il y a une faute au cours de l’exécution dans la partie du programme écrite en XAML, c’est ce code que le debugger va vous montrer. 10 Les outils graphiques 302 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 10.2 Dans la gamme expression La gamme expression est une nouvelle gamme de logiciels Microsoft destinée au designer. Elle se compose de trois programmes distincts : Graphic Designer pour le graphisme, Interactive Designer pour le design d’application XAML et Web Designer pour le développement de page web. Graphic Designer Comme son nom l’indique, il s’agit d’un outil de design destiné à celui qui souhaite réaliser du graphisme. Il ne s’agit pas a priori d’un pur outil XAML puisqu’il travaille avec un autre format de fichier. En revanche, il dispose d’un outil d’exportation vers le XAML, ce qui fait de lui un candidat idéal pour réaliser les graphismes que vous souhaitez introduire dans vos développements. Le but de ce livre n’étant clairement pas de vous expliquer le fonctionnement de cet outil, qui mérite à lui seul un livre, vous ne trouverez dans ce chapitre qu’une simple présentation de l’outil sans même entrer dans ses possibilités. La page principale de Graphic Designer est très classique avec la page proprement dite à droite et les fenêtres d’outils présentées par défaut à gauche. b Figure 10-12 : Expression Graphic Designer m Figure 10-13 : La page principale Dans la gamme expression 10 Le guide du codeur • 303 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Le traçage des objets se fait classiquement en utilisant des points de référence. Il est évidemment possible de changer après coup les motifs dessinés. m Figure 10-14 : Tracer une forme m Figure 10-15 : Modifier la forme 10 Les outils graphiques 304 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Pour exporter le résultat en XAML, il suffit d’utiliser la fonction d’exportation. Celle-ci vous permet de définir quelques paramètres comme l’utilisation d’un Canvas. Une fois le fichier exporté, il ne vous reste qu’à l’incorporer dans votre programme ou à l’afficher directement dans un browser. b Figure 10-16 : Exporter en XAML m Figure 10-17 : Le dessin dans un navigateur Web Dans la gamme expression 10 Le guide du codeur • 305 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Comme vous pouvez le constater, le rendu n’est pas totalement identique mais Graphic Designer est lui aussi en version bêta et nous pouvons espérer que ces problèmes soient prochainement résolus. Vous pouvez également ouvrir le fichier XAML généré mais, comme nous pouvions nous y attendre, celui-ci est relativement touffu. Il contient plus de 400 nœuds pour un total de plus de 150 000 caractères. Interactive Designer Interactive Designer est un outil qui peut être considéré soit comme un outil de conception complet, soit comme un outil complémentaire à Visual Studio et à Cider. Grâce à sa puissante interface utilisateur, il permet de créer des pages XAML très complètes et incluant des animations entièrement créées visuelle- ment. Comme Visual Studio, il travaille sur la base de projets contenant l’ensemble d’une application. Celle-ci sera alors compilée. Vous avez le choix entre le langage VB.NET ou C#. Avec ceux-ci, vous pourrez encoder du code .NET. Il est également capable de compiler et d’exécuter les projets. C’est pourquoi il peut être considéré comme un outil complet. Il n’offre toutefois pas les facilités de développement de code qu’offre Visual Studio. L’idéal étant d’utiliser les deux. b Figure 10-18 : Expression Interactive Designer b Figure 10-19 : Choix du langage 10 Les outils graphiques 306 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Les fichiers projets sont compatibles avec ceux de Visual Studio, ce qui permet de passer facilement de l’un à l’autre et rend ces outils complémentaires, Visual Studio étant destiné au développeur et Interactive Designer, comme son nom l’indique, au designer. Créons avec Visual Studio un petit projet où le développeur n’a fait que placer les contrôles dont il avait besoin et sans se soucier de l’esthétique. Récupérons-le dans Interactive Designer simplement en faisant Open Project (voir Figure 10-21). Le projet est parfaitement récupéré et la fenêtre est affichée telle quelle. Le designer peut alors réaliser la mise en page. Si nécessaire, il peut avoir accès au code et même à l’IntelliSense (voir Figure 10-22). m Figure 10-20 : Un projet en Visual Studio Dans la gamme expression 10 Le guide du codeur • 307 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. m Figure 10-21 : Un projet en Visual Studio m Figure 10-22 : Le code .NET dans Interactive Designer 10 Les outils graphiques 308 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Il peut évidemment aussi accéder au code XAML. Une fois les modifications apportées, il peut exécuter l’application pour voir le résultat. Le projet peut parfaitement être à nouveau ouvert dans Visual Studio, qui prendra parfaitement en compte les modifications apportées. m Figure 10-23 : Le code XAML dans Interactive Designer b Figure 10-24 : Exécution depuis Interactive Designer Dans la gamme expression 10 Le guide du codeur • 309 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 10.3 Aurora Designer Aurora Designer est produit par la société Mobiform. Il est une alternative aux produits Microsoft et offre lui aussi un outil puissant de design XAML. Il offre également des composants supplémentaires pour enrichir encore les possibilités de XAML. En revanche, comme d’ailleurs Graphic Designer, il s’agit d’un outil exclusivement XAML sans support du code .NET qui devra être géré séparé- ment si vous en avez besoin. m Figure 10-25 : Projet réouvert avec Visual Studio m Figure 10-26 : Choix du langage 10 Les outils graphiques 310 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... PerspectiveCamera, DirectionalLight, et MeshGeometry3D Please purchase PDF Split-Merge on www.verypdf.com to du codeur •this waterma Le guide remove 327 Please purchase PDF Split-Merge on www.verypdf.com to remove this waterma Ch apit re 12 Réaliser une application complète Checklist 349 Please purchase PDF Split-Merge on www.verypdf.com to remove this waterma 12 Réaliser une application complète... 3D avec ZAM 3D ; le XAML dans le monde du graphisme avec Graphic Designer Please purchase PDF codeur 314 • Le guide du Split-Merge on www.verypdf.com to remove this waterma Ch apit re 11 Le dessin Le dessin en 2D 316 Le dessin en 3D 323 Checklist 327 Please purchase PDF Split-Merge on www.verypdf.com to remove this waterma 11 Le dessin Dans l’informatique moderne, le visuel a pris une... sauvé en format XAML soit sous forme d’une page de code soit sous forme d’une ressource que vous pourrez inclure dans vos développements m Figure 10-31 : L’interface de ZAM 3D Please purchase PDF Split-Merge on www.verypdf.com to du codeur •this waterma Le guide remove 313 10 Les outils graphiques m Figure 10-32 : Une autre vue de ZAM 3D 10.5 Checklist Dans ce chapitre, nous avons parcouru les outils les... fichier choisi lors de la création, Aurora vous propose un conteneur adapté Pour une fenêtre Windows, il s’agit par défaut d’une grille m Figure 10-28 : Design d’une fenêtre Please purchase PDF Split-Merge on www.verypdf.com to du codeur •this waterma Le guide remove 311 10 Les outils graphiques Vous pouvez non seulement visualiser le code XAML mais également le modifier La partie gauche de l’écran vous... Height="122" Width="491"> b Figure 11-1 : Un simple trait Please purchase PDF codeur 316 • Le guide du Split-Merge on www.verypdf.com to remove this waterma Le dessin en 2D 11 Comme vous pouvez le constater, pour tracer une ligne vous devez définir le point d’origine aux attributs X1 et Y1 et le point... à ce que nous avions utilisé jusqu’ici puisqu’il faut utiliser les propriétés attachées du conteneur; ici de Canvas La propriété Fill permet de remplir le fond d’une forme Please purchase PDF Split-Merge on www.verypdf.com to du codeur •this waterma Le guide remove 317 11 Le dessin Pour tracer un cercle, il suffit de tracer une ellipse dont les deux dimensions sont égales Partant de ce principe, XAML... xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> Please purchase PDF codeur 318 • Le guide du Split-Merge on www.verypdf.com to remove this waterma Le dessin en 2D 11 . (nom de code CIDER) 10 Le guide du codeur • 301 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CType(target,System.Windows.Controls.Label) Return End. Les outils graphiques 302 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 10.2 Dans la gamme expression La