Les fonctions de conversion Créer un pinceau d'image à partir d'une texture et Créer un pinceau d'image à partir d'un matériau vous permettent d'insérer une texture ou un matériau à partir d'un modèle d'affichage dans un widget Image directement dans votre widget utilisateur.
Contrairement aux fonctions de conversion Définir le paramètre du matériau, ces deux fonctions de conversion éliminent la nécessité de disposer d'un matériau avec un paramètre de texture. Ces fonctions de conversion insèrent des textures dans votre interface utilisateur.
Cet exemple développe le widget Traqueur à partir des tutoriels En texte en transmettant la propriété Icône du modèle d'affichage du Traqueur dans un widget Image à l'aide de la fonction Créer un pinceau d'image à partir de la texture.
Les fonctions Créer un pinceau d'image à partir d'un matériau et Créer un pinceau d'image à partir d'une texture souple/d'un matériau partagent le même flux de travail et possèdent également des propriétés identiques. Cependant, nous n'aborderons pas leur mode de configuration dans ce tutoriel. Consultez les tutoriels de la page Créer un ATH personnalisé pour savoir comment configurer ces propriétés dans le widget.
Configurer le widget
Le même widget utilisateur des tutoriels Entier en texte/Double est utilisé pour créer ce widget de suivi.
Ce tutoriel dispose d'un widget Image supplémentaire qui transmet l'icône de l'appareil Traqueur. Les champs Titre et Valeur actuelle existants sont enveloppés dans une zone empilable en mode d'orientation horizontale afin que l'icône s'affiche de gauche à droite en regard du texte du widget.
Ajoutez les widgets suivants à la hiérarchie dans le même ordre que celui défini dans la liste ci-dessous :
Superposition
Image (imbriquez le widget Image dans la superposition et renommez-le "Arrière-plan")
Zone empilable (imbriquez la zone empilable sous la superposition)
2 images (imbriquez ces widgets sous la zone empilable et renommez-les "Icône" et "Espacement")
Zone empilable (imbriquez la deuxième zone empilable sous la première)
Définissez les paramètres Alignement horizontal et Alignement vertical du widget Image d'icône sur Centre. afin que l'icône soit toujours centrée.
Un widget Image d'espacement supplémentaire est utilisé pour créer un espace entre l'icône et le texte ci-dessous.
Configurer la fonction de conversion
Ouvrez la fenêtre Liaisons d'affichage pour lier l'icône de l'appareil Traqueur au widget Image d'icône dans votre interface utilisateur.
Sélectionnez le widget Image d'icône dans la hiérarchie, puis cliquez sur +Ajouter un widget dans la fenêtre Liaisons d'affichage.
Dans le champ de gauche, sélectionnez Icône > Pinceau > Sélectionner. Cela permet de transmettre une valeur dans le champ Pinceau de l'image d'icône.
Ce champ Pinceau se trouve également dans le panneau Détails du widget Image d'icône. La plupart des champs du panneau Détails sont accessibles via les liaisons d'affichage.
Dans le champ de gauche, sélectionnez Fonctions de conversion > Créer un pinceau d'image à partir d'une texture > Sélectionner.
Un certain nombre de champs s'affichent sous la liaison. Consultez la section Créer un pinceau d'image à partir des propriétés de texture/matériau pour en savoir plus sur la fonction de chaque champ.
Cliquez sur l'icône de chaîne en regard de Image, puis sélectionnez MVVM_UEFN_Tracker > Icône > Sélectionner.
Sélectionnez la taille de votre choix dans le champ Taille de l'image pour l'image de votre widget Traqueur.
La liaison d'affichage n'hérite pas des tailles X et Y de votre widget Image d'origine. Dans cet exemple, la taille de l'image est définie sur 72x72px pour garantir la lisibilité de l'icône.
Résultat final
Faites glisser un appareil Traqueur dans votre projet et définissez les options suivantes :
Dans le panneau Détails, définissez les icônes dans les champs Icône de quête pour les petites et grandes icônes. Dans cet exemple, les icônes T_UI_IconLibrary_Ham ont été utilisées pour les petites et grandes icônes.
Le widget Image d'icône est rempli avec l'icône de jambon définie dans l'appareil Traqueur.
Créer un pinceau d'image à partir des propriétés de texture/matériau
Les deux fonctions de conversion partagent les mêmes champs, sauf indication contraire :
Image (uniquement pour Créer une image à partir d'une texture)
La variable Texture à transmettre au pinceau du widget d'image.
Matériau (uniquement pour Créer une image à partir d'un matériau)
La variable Matériau à transmettre au pinceau du widget d'image.
Taille
La taille de l'image ou du matériau généré.
Couleur de la teinte
La couleur utilisée pour teinter l'image ou le matériau.
Type de carré (uniquement pour Créer une image à partir d'une texture)
Détermine si l'image est disposée horizontalement, verticalement ou les deux lorsqu'elle est transmise au pinceau du widget d'image. Si la taille de l'icône d'origine est inférieure à la taille spécifiée dans la fonction de conversion, l'image s'affiche dans un carré.
Dans cet exemple, mon icône mesure 64x64px, tandis que la taille est définie sur 72x72px ; elle s'affiche donc dans un carré.
