🎨 GESTION DES ICÔNES ET TAILLES DANS CustomUIEditor POUR EXCEL

L’un des avantages majeurs du Custom UI Editor est la possibilité d’ajouter des icônes personnalisées à votre ruban Excel (ou Word) pour le rendre plus intuitif, professionnel, et adapté à vos besoins.

Dans cet article, nous allons voir comment :

• Ajouter des icônes standards de Microsoft Office

• Utiliser des icônes personnalisées (images PNG ou BMP)

• Contrôler la taille des boutons (petite ou grande)

• Optimiser l’affichage pour plus de lisibilité

---

🧩 1. Icônes standards : imageMso

Le moyen le plus simple d’ajouter une icône est d’utiliser un nom d’image standard d’Office, appelé imageMso.

📌 Exemple de bouton avec icône standard

xml
<button id="btnExporter"
        label="Exporter en PDF"
        imageMso="FileSaveAsPdf"
        size="large"
        onAction="ExporterEnPDF" />

Attribut	Description
imageMso	Nom d’une icône standard Office (ex. Copy, Paste, FileSaveAsPdf, TableInsertRowsAbove…)
size	"large" ou "normal"
label	Texte visible du bouton
onAction	Nom de la macro associée

👉 Pour trouver les noms disponibles, consultez la liste complète ici :
🔗 Liste complète des imageMso (Microsoft)

---

🖼️ 2. Icônes personnalisées : image

Pour un design sur mesure, vous pouvez insérer vos propres icônes PNG ou BMP dans votre fichier Excel au format .xlsm ou .xlsb.

🔧 Étapes :

1. Ouvrez CustomUIEditor

2. Ouvrez votre fichier Excel .xlsm

3. Menu Insert > Icons

4. Sélectionnez votre image (PNG de préférence, 32x32px ou 16x16px)

5. Donnez-lui un nom d’identifiant (ex. : iconeFacture)

6. Dans le XML, utilisez :

xml
<button id="btnFacture"
        label="Créer Facture"
        image="iconeFacture"
        size="large"
        onAction="CréerFactureMacro" />

---

📏 3. Gérer la taille des boutons : size

L’attribut size permet de définir la taille d’affichage du bouton dans le ruban.

Valeur	Résultat visuel
large	Icône + texte en dessous (format carré)
normal	Icône à gauche + texte à droite (format rectangulaire)

✅ Conseil : utilisez large pour les actions principales, normal pour les actions secondaires.

---

📋 4. Grouper et organiser avec style

Pour un ruban bien structuré, utilisez des group, box, separator, etc.

🎯 Exemple :

xml
<group id="grpGestionFacture" label="Facturation">
    <button id="btnDevis" imageMso="FormControlComboBoxInsert" label="Créer Devis" size="normal" onAction="CréerDevis"/>
    <button id="btnFacture" imageMso="FileSaveAsPdf" label="Créer Facture" size="large" onAction="CréerFacture"/>
    <separator id="sep1"/>
    <button id="btnHistorique" imageMso="TableSort" label="Historique" size="normal" onAction="OuvrirHistorique"/>
</group>

---

🔁 5. Astuce : Rafraîchir le ruban après modification

Pour voir les effets dans Excel :

1. Fermez le fichier Excel

2. Sauvegardez les modifications dans CustomUIEditor

3. Rouvrez Excel

4. Activez les macros

---

🎁 BONUS : Design optimal

• 🔹 Taille d’icône recommandée : 32x32 pixels (pour large) / 16x16 (pour normal)

• 🔹 Format conseillé : .png avec fond transparent

• 🔹 Nommez vos images sans espace (ex. : btn_export_pdf.png)

• 🔹 Centralisez les actions dans un groupe logique (group)

---

🧠 En résumé

Élément	Exemple	Résultat
imageMso="Copy"	Icône Office intégrée	Icône copier
image="monIcone"	Icône personnalisée	Image insérée dans le projet
size="large"	Grand bouton	Icône + texte en dessous
size="normal"	Petit bouton	Icône à gauche, texte à droite

Dans le CustomUIEditor pour Excel, la taille des icônes est bien standardisée selon deux valeurs et non pas 25×25 px.

Voici les tailles exactes à utiliser pour garantir un affichage propre dans le ruban :

---

✅ Tailles recommandées pour les icônes personnalisées

Type de bouton	Taille recommandée (en pixels)	Détail
size="large"	32 x 32 px	Grand bouton avec icône au-dessus du texte
size="normal"	16 x 16 px	Petit bouton avec icône à gauche du texte

---

📌 Important à savoir :

• Les tailles 25 x 25 px ne sont pas utilisées dans le ruban d’Office.

• Si vous utilisez une taille différente (ex. 25×25 ou 64×64), Excel va :

  • soit la redimensionner automatiquement,

  • soit l’afficher floue ou mal alignée.

---

🎨 Conseils de design :

• Format idéal : .png (avec fond transparent)

• Nommage : pas d’espace ou caractères spéciaux (mon_icone.png, pas Mon icône #1.png)

• Résolution : 72 dpi (standard écran)