Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

Essayez ! Créer une réflexion d'un objet sur la planche graphique dans Blend

Vous pouvez utiliser les outils de transformation et de dégradé dans Blend for Visual Studio pour donner l’impression d’une réflexion d’un objet sur la planche graphique.

Afin de créer une réflexion d’image sur la planche graphique, vous devez commencer par ajouter une image à votre projet. Créez ensuite un conteneur pour vos images, ajustez la hauteur, la largeur et la sélection élective du conteneur pour créer une image miroir. Après avoir créé le conteneur et ajouté les images, vous pouvez appliquer des transformations et des dégradés pour donner l’impression d’une réflexion de l’image.

Pour ajouter une image au projet

  1. Dans le menu Projet, cliquez sur Ajouter un élément existant.

  2. Dans la boîte de dialogue Ajouter un élément existant, localisez l’image à ajouter, puis cliquez sur Ouvrir.

    Vous pouvez recevoir un message vous avertissant que votre image est supérieure à 250 Ko et vous recommandant de l’incorporer. Si vous recevez ce message, cliquez sur Oui.

    Conseil Conseil

    Pour cet exemple, utilisez une image issue du dossier Images exemples.

L’image est ajoutée au panneau Projets.

Pour créer l’image miroir

  1. Ajoutez un contrôle StackPanel à la planche graphique. Dans le panneau Composant, cliquez sur Panneaux, puis double-cliquez sur StackPanel. Confirmez que vous utilisez un contrôle StackPanel vertical en sélectionnant StackPanel dans le panneau Arbre visuel et animation, puis en localisant Orientation dans la catégorie Disposition dans le panneau Propriétés. La valeur Orientation doit être définie à Vertical.

    Conseil Conseil

    Vous pouvez créer une réflexion à l’aide de différents types de contrôles. Un contrôle StackPanelle vous permet d’« empiler » les objets, facilite l’alignement des objets et permet de déplacer une collection d’objets à l’aide d’un seul contrôle.

  2. Avec StackPanel sélectionné dans le panneau Arbre visuel et animation, cliquez avec le bouton droit sur le fichier image dans le panneau Projets, puis cliquez sur Insérer.

  3. Ajustez la taille de l’image en modifiant la Hauteur et la Largeur dans la catégorie Disposition du panneau Propriétés. Pour cet exemple, la Hauteur est de 200 et Largeur de 267.

    Conseil Conseil

    Vous pouvez également mettre l’image à l’échelle. Dans la catégorie Transformation du panneau Propriétés, cliquez sur Redimensionner, puis entrez les valeurs souhaitées pour X et Y. Utilisez les mêmes valeurs pour X et Y afin de conserver les proportions.

  4. Ajustez la hauteur et la largeur de StackPanel en sélectionnant StackPanel dans le panneau Arbre visuel et animation, puis en modifiant la Hauteur et la Largeur dans la catégorie Disposition du panneau Propriétés. La largeur doit être identique à la largeur de l’image sélectionnée. La hauteur doit être égale à deux fois la hauteur de l’image sélectionnée, puisque deux images seront utilisées pour créer la réflexion. Pour cet exemple, la Hauteur est de 400 et Largeur de 267.

  5. Insérez une deuxième instance de la même image en répétant l'étape 2. Comme vous utilisez un contrôle StackPanel vertical, l'image apparaît en dessous de la première image. Ajustez la hauteur en cliquant sur Définir en automatique JJ170084.aa9ec064-22f8-4b62-9eed-3f4772362d22(fr-fr,VS.120).png à droite de Hauteur dans la catégorie disposition du panneau Propriétéq.

  6. Cliquez sur StackPanel dans le panneau Arbre visuel et animation, puis faites glisser StackPanel au milieu de la planche graphique.

  7. Avec la deuxième image (image du bas dans le StackPanel) sélectionnée dans le panneau Objects and Timeline, dans la catégorie Transformer du panneau Propriétés, cliquez sur Retourner l’axe Y dans l’onglet RetournerJJ170084.2ba85702-e92f-4341-9497-9c9fb8af9c75(fr-fr,VS.120).png.

Maintenant que l’impression d’une image miroir a été créée, vous pouvez régler l’opacité, appliquer des dégradés et transformer l’image pour créer l’impression d’une réflexion.

Pour créer la réflexion

  1. Avec la deuxième image (image du bas dans le StackPanel) sélectionnée dans le panneau Objects and Timeline, dans la catégorie Pinceaux, cliquez sur Pinceau de dégradé, puis sur OpacityMask.

  2. Dans l’éditeur de couleurs, cliquez sur le point de dégradé gauche et tapez 0 dans la zone de texte du canal Alpha.

    Conseil Conseil

    Vous pouvez également cliquer et faire glisser la valeur à l’intérieur de la zone de texte du canal Alpha.

  3. Faites glisser le point de dégradé gauche pour régler l’opacité, ou tapez une valeur dans la zone de texte Décalage de point de dégradé sélectionné. Dans cet exemple, tapez 20 dans la zone de texte Décalage de point de dégradé sélectionné.

  4. Dans l’éditeur de couleurs, cliquez sur le point de dégradé droit et tapez 70 dans la zone de texte du canal Alpha.

  5. Avec la deuxième image (image du bas dans le StackPanel) sélectionnée dans le panneau Objects and Timeline, placez le pointeur sur la poignée de l’image jusqu’à ce que le pointeur Incliner JJ170084.2be41f49-8a61-4966-bf08-598f4253b610(fr-fr,VS.120).png apparaisse. Cliquez et faites glisser la poignée jusqu’à ce que l’image apparaisse comme vous le souhaitez.

    Conseil Conseil

    Le pointeur Incliner correspond à l’onglet Incliner dans la zone RelativeTransform dans le panneau Propriétés.

  6. Placez le pointeur sur la poignée de l’image jusqu’à ce que le pointeur RedimensionnerJJ170084.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(fr-fr,VS.120).png s’affiche. Cliquez et faites glisser la poignée jusqu’à ce que l’image apparaisse comme vous le souhaitez.

    Conseil Conseil

    Le pointeur Redimensionner correspond à l’onglet Incliner dans la zone RelativeTransform dans le panneau Propriétés.

  7. Appuyez sur F5 pour générer et exécuter votre projet.

L’image et sa réflexion s’affichent.

Vous pouvez utiliser des méthodes similaires pour créer des réflexions d’une grande variété de contrôles dans Blend.

Afficher: