Share
Comme le titre l'indique, nous allons créer un Wallview inspiré par iTunes. Ce didacticiel est divisé en deux parties: l’une pour la conception dans Blend et l’autre pour le code suivant dans Visual Studio..
Jetez un coup d’œil à cette démo vidéo du résultat final sur lequel nous allons travailler (ou consultez simplement la démo Web ci-dessus):
Dans cette partie du didacticiel, nous allons concevoir deux contrôles utilisateur dans Expression Blend. Ce tutoriel semble assez long par rapport au nombre d’étapes, mais c’est parce qu’il est très complet; il y a une explication et une capture d'écran pour presque chaque clic que vous devez faire. La raison pour laquelle je l'ai écrit avec tant de détails est que mes camarades de l'université ont trouvé Blend trop complexe et difficile à utiliser..
Ouvrez Visual Studio et cliquez sur "Fichier"> "Nouveau"> "Projet" dans la barre de menus supérieure..
Sélectionnez Silverlight Application Visual C # dans le menu et entrez "WallviewApp" pour un nom de projet en bas ainsi que l'emplacement pour enregistrer le projet..
Après cela, vous verrez un popup. Assurez-vous de cocher la case en bas et de sélectionner Silverlight 4 dans la liste déroulante..
Démarrez Expression Blend et ouvrez le projet que nous venons de créer dans Visual Studio..
Recherchez le fichier de projet dans le répertoire du projet et ouvrez-le..
Cliquez avec le bouton droit sur le projet WallviewApp dans l'arborescence du projet et choisissez "Ajouter un nouveau dossier". Faites cela deux fois, appelez les dossiers "usercontrols" et "image".
Cliquez avec le bouton droit sur le dossier "usercontrols" fraîchement créé et sélectionnez "Ajouter un nouvel élément"..
Dans la fenêtre contextuelle, assurez-vous que UserControl est sélectionné et entrez "image.xaml" comme nom..
Choisissez le conteneur StackPanel dans la barre d’outils qui devrait être sur le côté gauche par défaut…
… Et dessinez un rectangle au milieu de LayoutRoot qui était là depuis le début.
Assurez-vous que StackPanel est sélectionné sur le côté gauche dans le panneau "Objets et chronologie". Sur le côté droit, vous voyez les paramètres de l'élément sélectionné. Changez la largeur et la hauteur en "Auto (0)" en cliquant sur les flèches croisées à côté du champ de texte. HorizontalAlignment to "Center" et VerticalAlignment to "Top". Réinitialisez la marge en cliquant sur l'icône en forme de carré blanc à côté des champs de texte et choisissez Réinitialiser dans le menu. Après cela, réglez la marge supérieure sur "5". Maintenant, le panneau Disposition devrait ressembler à ceci et comme le StackPanel a une taille de 0x0 pixels, vous ne pouvez plus le voir:
Allez-y et sélectionnez le conteneur Grid dans la barre d’outils sur le côté gauche (où nous avons déjà sélectionné StackPanel) et tracez un autre rectangle au milieu de votre espace de travail..
Examinez le panneau "Objets et chronologie" et assurez-vous que la grille est à l'intérieur de StackPanel. Si ce n'est pas juste cliquez et faites-le glisser dans le StackPanel.
Ajustez les paramètres de disposition pendant que la grille est toujours sélectionnée. Définissez Width et Height sur "200" pixels, Horizontal et VerticalAlignment sur "Stretch" s'ils ne le sont pas déjà..
Nous allons maintenant créer une frontière. Vous pouvez le sélectionner comme Grid et StackPanel dans la barre d’outils sur le côté gauche. Dessinez un rectangle avec la bordure et déplacez-le dans la grille s'il ne l'est pas déjà..
Ouvrez la zone des pinceaux sur le côté droit et modifiez BorderBrush à la couleur suivante: "# 0076A2F9". Définissez ensuite BorderThickness dans le panneau Apparence sur "5" pixels dans les quatre directions et sur CornerRadius sur "5" pixels. Largeur et Hauteur doivent être réglés sur "Auto" en cliquant sur les flèches croisées à côté de la zone de texte. HorizontalAlignment doit être réglé sur "Center" et VerticalAlignment sur "Bottom":
Nous allons maintenant ajouter un ShadowEffect à la bordure. Cliquez sur le bouton "Nouveau" dans la zone d'apparence juste à côté de l'effet. Dans la prochaine fenêtre, sélectionnez "DropShadowEffect" et cliquez sur "OK".
Ajustez les paramètres de l’ombre qui sont apparus juste en dessous du bouton "Nouveau" en réglant BlurRadius sur "10" et ShadowDepth sur "1":
Nous allons maintenant importer une image dans Blend. Pour ce faire, vous pouvez soit cliquer avec le bouton droit sur le dossier "image" que nous avons créé précédemment et sélectionner "Ajouter un élément existant", soit sélectionner le dossier et y faire glisser une image directement à partir de votre bureau ou de votre explorateur..
Après l'importation, votre arborescence de projet devrait ressembler à ceci:
Pour utiliser l'image dans le contrôle, il vous suffit de la faire glisser du navigateur de projet, où vous l'avez importée, directement dans l'espace de travail. Comme vous pouvez le constater, il est beaucoup trop gros et dans le mauvais conteneur:
Pour résoudre ce problème, nous faisons simplement glisser l'image dans la bordure:
Modifiez la hauteur et la largeur de l'image en "Auto", les alignements horizontal et vertical en "Centre", les marges en "0" et l'étirement en "Uniforme" dans le panneau Propriétés communes:
Sélectionnez l'outil TextBlock dans la barre d'outils à gauche et créez un TextBlock quelque part dans la zone de travail..
Appuyez sur la touche "Echap" de votre clavier pour annuler la modification du texte à l'intérieur du TextBlock..
Cliquez et faites glisser le TextBlock du panneau "Objets et chronologie" dans le StackPanel créé précédemment..
Après cela, changez la couleur de premier plan en "# FF1F1F1F" et les paramètres de disposition du côté droit sur les valeurs suivantes: Largeur: "Auto", Hauteur: "Auto", HorizontalAlignment: "Centre", VerticalAlignment: "Haut", Marge -Top: "8". Désactivez le texte en cochant le texte "TextBlock" et en le supprimant ou en cliquant sur le carré blanc à côté de lui et en cliquant sur "Réinitialiser". Changez également la police du texte en "Verdana":
Créez un autre bloc de texte en répétant les étapes 16 et 17, ou en sélectionnant celui que nous avons déjà créé dans le panneau "Objets et chronologie" et en appuyant sur Ctrl + C puis Ctrl + V pour le dupliquer. La seule chose que nous devons faire différemment de l’étape 17 est que nous ne voulons pas qu’une marge soit établie. Si vous avez utilisé la méthode de duplication, définissez simplement la marge supérieure sur "0" ou cliquez sur le petit carré blanc à côté et réinitialisez la marge:
Pour pouvoir travailler avec les éléments que nous avons créés jusqu'à présent, nous devons leur donner des noms. Allez-y et renommez le TextBlock tout en bas en "imgDate" en cliquant lentement deux fois ou en cliquant avec le bouton droit de la souris et en sélectionnant "renommer". Changez le nom de l'autre TextBlock en "imgName", l'image en "img", la bordure en "imgBorder" et la grille en "imgSize". Nous en avons terminé avec la conception de ce contrôle et votre hiérarchie devrait ressembler à ceci:
Et le design devrait ressembler à ceci:
Bien sûr, vous ne pouvez pas voir les deux TextBlocks dans votre projet puisque nous avons défini leur texte à néant à quelques étapes précédentes.
Personnellement, je laisse les noms des blocs de texte tant que j'en ai besoin pour terminer la conception avant de les supprimer. De cette façon, vous pouvez contrôler si tout est au bon endroit.
Si vous voulez jeter un oeil sur le code que nous venons de générer, cliquez sur l'icône "< >"au milieu en haut de la barre de défilement droite de la zone de travail. Pour revenir à la vue Conception cliquez sur l'icône en haut.
Notre code ressemble à ceci:
Assurez-vous de revenir à la vue de conception.
Créez un autre UserControl dans le dossier "usercontrols" en cliquant dessus avec le bouton droit de la souris et en choisissant "Ajouter un nouvel élément" dans le menu..
Dans la fenêtre, sélectionnez "UserControl" et entrez le nom "wallview-img.xaml":
Choisissez le conteneur ScrollViewer dans la barre d’outils à gauche…
… Et dessinez un rectangle avec celui-ci dans l'espace de travail.
Alors que ScrollViewer est sélectionné, inspectez la zone Pinceaux sur le côté droit et réglez BorderBrush sur "Pas de pinceau"..
Définissez BorderThickness sur "0" pour les quatre directions, Horizontal et VerticalAlignment sur "Stretch", la marge supérieure sur "29" pixels et les autres marges sur "0". Contrôlez également si la largeur et la hauteur sont sur "Auto" en cliquant sur les flèches croisées. Développez davantage la zone de mise en page en cliquant sur la petite flèche et définissez les quatre directions de remplissage à "0":
Sélectionnez le StackPanel dans la barre d’outils à gauche…
… Et créez un StackPanel au milieu de ScrollViewer.
Sélectionnez le StackPanel s'il ne figure pas déjà dans le panneau "Objets et chronologie", puis cliquez sur le bouton "Brosse de couleur unie" dans la zone Formes (il s'agit de la deuxième de gauche, juste à côté de "Sans pinceau"). et définissez la couleur d'arrière-plan sur "# FFB8B8B8". De plus, changez les Horizontal et VerticalAlignment en "Stretch", vérifiez si Width et Height sont réglés sur "Auto" et si les marges sont toutes à "0":
Choisissez le conteneur de la grille dans la barre d'outils et créez une grille.
Si vous l'avez créé dans StackPanel, faites-le simplement glisser dans la LayoutRoot-Grid:
Changez la hauteur de la grille en "30" pixels et la largeur en "Auto". HorizontalAlignment to "Stretch", VerticalAlignment to "Top" et la marge sur (-1, -1, -1, 0) pour (gauche, haut, droite, bas):
Sélectionnez l'outil Rectangle dans la partie gauche, au-dessus des conteneurs que nous avons déjà utilisés plusieurs fois…
… Et dessinez une boîte dans la zone de travail.
Déplacez le rectangle dans la grille créée à l'étape précédente:
Changez la couleur de remplissage du rectangle en "# FF4E4E4E":
Et la couleur de trait à "# FF1F1F1F":
Réglez Height et Width sur "Auto", Horizontal et VerticalAlignment sur "Stretch" et réinitialisez la marge s'il y en a:
Maintenant, nous créons un StackPanel et le déplaçons dans la grille:
Modifiez les paramètres de StackPanel comme suit: Largeur et Hauteur sur "Auto", Orientation sur "Horizontal", HorizontalAlignment sur "Left", VerticalAlignment sur "Center" et la marge gauche sur "10":
Sélectionnez le bouton-outil dans la barre d'outils…
… Et créer un bouton quelque part dans la zone de travail.
Ensuite, faites-le glisser dans le StackPanel que nous venons de créer:
Définissez la largeur et la hauteur du bouton sur "Auto", HorizontalAlignment sur "Stretch", VerticalAlignment sur "Centre", les marges s'il y en a "0", le contenu sur "Tous les albums" (espaces blancs exprès pour que le bouton par défaut apparaisse). légèrement mieux) et la police à "Verdana":
Sélectionnez le bouton et appuyez sur Ctrl + C, Ctrl + V pour copier et coller le bouton dans le même StackPanel, puis modifiez la marge à gauche en "5" et le contenu en "Album actuel":
Sélectionnez le StackPanel contenant les deux boutons dans le panneau "Objets et chronologie" et appuyez sur CTRL + C, CTRL + V pour le dupliquer également. Maintenant, votre hiérarchie devrait ressembler à ceci:
Sélectionnez le StackPanel dupliqué si vous ne l'avez pas déjà fait, modifiez HorizontalAlignment en "Droite" et définissez toutes les marges en "0" à l'exception de celle de droite, définie à "10" pixels..
Sélectionnez l'un des boutons du StackPanel dupliqué et remplacez son contenu par " < " if you selected the left one and to " > "pour le droit. Maintenant, nous avons deux boutons avec un symbole de flèche qui sera utilisé plus tard pour la navigation.
Sélectionnez l'outil curseur dans la barre d'outils et créez un curseur sur votre espace de travail..
Ensuite, faites-le glisser vers le haut du StackPanel inférieur:
Sélectionnez le curseur et réglez-le sur les paramètres suivants:
Et sous Propriétés communes:
Comme dans l'image UserControl que nous avons créée précédemment, nous allons renommer les éléments dont nous avons besoin ultérieurement. De bas en haut: Bouton: "btnNext", Bouton: "btnPrev", Curseur: "curseur", ignore le StackPanel, Bouton: "btnCurrentAlbum", Bouton: "btnAllAlbums", ignore les éléments suivants jusqu'au StackPanel situé à l'intérieur du ScrollViewer. Renommez ce StackPanel en "contenu". Maintenant, la hiérarchie devrait ressembler à ceci:
Voici comment l'utilisateur "wallview-img" devrait apparaître:
Voici comment le code xaml pour notre UserControl "wallview.img.xaml" apparaît:
Blend est un excellent outil pour créer de superbes conceptions et animations. Vous pouvez même écrire tout le code derrière dans Blend, mais je préfère utiliser Visual Studio, car il est plus puissant, dispose d'un débogueur et d'un meilleur IntelliSense pour les propositions et l'auto-complétion..
Dans la deuxième partie de ce didacticiel, nous allons écrire le code complet pour nos deux contrôles utilisateur en C #, ainsi que pour notre propre service Web, qui affiche chaque image d’un dossier particulier dans notre vue murale..
Comme il s’agit de mon premier tutoriel, j’espère que vous avez aimé y travailler et que vous avez appris quelque chose d’utile. Pour tout commentaire, suggestion ou préoccupation, veuillez laisser une note dans la section commentaire..
Merci d'avoir lu!
Essai de 30 jours de Blend
Introduction à Microsoft Silverlight 4 - Mélange
Accentsconagua