Icônes dans les applications Windows

Les icônes fournissent un raccourci visuel pour une action, un concept ou un produit. En compressant la signification dans une image symbolique, les icônes peuvent traverser les barrières linguistiques et aider à conserver une ressource précieuse : espace d’écran. Les icônes de qualité s’harmonisent efficacement avec la typographie et avec le reste du langage de conception. Ils ne mélangent pas les métaphores, et ils communiquent uniquement ce qui est nécessaire, aussi rapidement et simplement que possible.

Les icônes peuvent apparaître dans les applications et en dehors de celles-ci. Dans votre application, vous utilisez des icônes pour représenter une action, comme copier du texte ou accéder à la page des paramètres.

Cet article décrit les icônes dans l’interface utilisateur de votre application. Pour en savoir plus sur les icônes qui représentent votre application dans Windows (icônes d’application), consultez icônes d’application.

Savoir quand utiliser des icônes

Les icônes permettent d'économiser de l’espace, mais quand faut-il les utiliser ?

Utilisez une icône pour les actions, telles que couper, copier, coller et enregistrer, ou pour les éléments d’un menu de navigation. Utilisez une icône s’il est facile pour l’utilisateur de comprendre ce que signifie l’icône et si elle est suffisamment simple pour être claire à taille réduite.

N’utilisez pas une icône si sa signification n’est pas évidente, ou si le fait de la rendre claire requiert une forme complexe.

Utiliser le type d’icône approprié

Il existe de nombreuses façons de créer une icône. Vous pouvez utiliser une police de symboles comme la police Segoe Fluent Icon. Vous pouvez créer votre propre image vectorielle. Vous pouvez même utiliser une image bitmap, bien que nous ne le conseillions pas. Voici un résumé des façons dont vous pouvez ajouter une icône à votre application.

Pour ajouter une icône dans votre application XAML, vous utilisez un IconElement ou une IcôneSource.

Ce tableau présente les différents types d’icônes dérivés d’IconElement et d’IconSource.

IconElement et IconSource

IconElement est un FrameworkElement. Il peut donc être ajouté à l’arborescence d’objets XAML comme n’importe quel autre élément de l’interface utilisateur de votre application. Toutefois, il ne peut pas être ajouté à un ResourceDictionary et réutilisé en tant que ressource partagée.

IconSource est similaire à IconElement ; toutefois, car il ne s’agit pas d’un FrameworkElement, il ne peut pas être utilisé comme élément autonome dans votre interface utilisateur, mais il peut être partagé en tant que ressource. IconSourceElement est un élément d’icône spécial qui encapsule une IconSource pour pouvoir l’utiliser n’importe où vous avez besoin d’un IconElement. Un exemple de ces fonctionnalités est illustré dans la section suivante.

Exemples IconElement

Vous pouvez utiliser une classe dérivée d’IconElement comme composant d’interface utilisateur autonome.

Cet exemple montre comment définir un glyphe d’icône comme contenu d’un bouton. Définissez fontFamily SymbolThemeFontFamily du bouton sur et sa propriété de contenu sur la valeur Unicode du glyphe que vous souhaitez utiliser.

<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
        Content="&#xE768;"/>

Vous pouvez également ajouter explicitement l’un des objets d’élément d’icône répertoriés précédemment, comme SymbolIcon. Cela vous donne plus de types d’icônes à choisir. Il vous permet également de combiner des icônes et d’autres types de contenu, tels que du texte, si vous le souhaitez.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play"/>
        <TextBlock Text="Play" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

Cet exemple montre comment définir une FontIconSource dans un ResourceDictionary, puis utiliser un IconSourceElement pour réutiliser la ressource à différents emplacements de votre application.

<!--App.xaml-->
<Application
   ...>
    <Application.Resources>
        <ResourceDictionary>
            ...
            <!-- Other app resources here -->

            <FontIconSource x:Key="CertIconSource" Glyph="&#xEB95;"/>

        </ResourceDictionary>
    </Application.Resources>
</Application>

<StackPanel Orientation="Horizontal">
    <IconSourceElement IconSource="{StaticResource CertIconSource}"/>
    <TextBlock Text="Certificate is expired" Margin="4,0,0,0"/>
</StackPanel>

<Button>
    <StackPanel>
        <IconSourceElement IconSource="{StaticResource CertIconSource}"/>
        <TextBlock Text="View certificate" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Propriétés d’icône

Vous placez souvent des icônes dans votre interface utilisateur en affectant une à une icon propriété d’un autre élément XAML. Icon les propriétés qui figurent Source dans le nom prennent une IcôneSource ; sinon, la propriété prend un IconElement.

Cette liste affiche certains éléments courants qui ont une icon propriété.

Les autres exemples de cette page montrent comment affecter une icône à la icon propriété d’un contrôle.

FontIcon et SymbolIcon

La façon la plus courante d’ajouter des icônes à votre application consiste à utiliser les icônes système fournies par les polices d’icône dans Windows. Windows 11 introduit une nouvelle police d’icône système, Segoe Fluent Icons, qui fournit plus de 1 000 icônes conçues pour le langage Fluent Design. Il peut ne pas être intuitif d’obtenir une icône à partir d’une police, mais la technologie d’affichage de police Windows signifie que ces icônes seront nettes et nettes sur n’importe quel affichage, à n’importe quelle résolution et à n’importe quelle taille.

Énumération Symbol

De nombreux glyphes courants de l’énumération SymbolThemeFontFamily Symbol sont inclus dans l’énumération Symbol . Si le glyphe dont vous avez besoin est disponible en tant que symbole, vous pouvez utiliser un SymbolIcon partout où vous utiliseriez un FontIcon avec la famille de polices par défaut.

Vous utilisez également des noms de symboles pour définir une icon propriété en XAML à l’aide de la syntaxe d’attribut, comme ceci

<AppBarButton Icon="Send" Label="Send"/>

Icônes de police

Seuls un petit sous-ensemble de glyphes Segoe Fluent Icon sont disponibles dans l’énumération Symbol . Pour utiliser l’un des autres glyphes disponibles, utilisez un FontIcon. Cet exemple montre comment créer un AppBarButton avec l’icône SendFill .

<AppBarButton Label="Send">
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xE725;"/>
    </AppBarButton.Icon>
</AppBarButton>

Si vous ne spécifiez pas de FontFamily ou si vous spécifiez un FontFamily qui n’est pas disponible sur le système au moment de l’exécution, le FontIcon revient à la famille de polices par défaut définie par la ressource de SymbolThemeFontFamily thème.

Vous pouvez également spécifier une icône à l’aide d’une valeur Glyphe à partir de n’importe quelle police disponible. Cet exemple montre comment utiliser un Glyphe à partir de la police Emoji de l’interface utilisateur Segoe.

<AppBarToggleButton Label="FontIcon">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Segoe UI Emoji" Glyph="&#x25B6;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Pour plus d’informations et d’exemples, consultez la documentation de la classe FontIcon et SymbolIcon .

AnimatedIcon

Le mouvement est une partie importante du langage Fluent Design. Les icônes animées attirent l’attention sur des points d’entrée spécifiques, fournissent des commentaires de l’état à l’état et ajoutent un plaisir à une interaction.

Vous pouvez utiliser des icônes animées pour implémenter des icônes légères et vectorielles avec mouvement à l’aide d’animations Lottie .

Pour plus d’informations et d’exemples, consultez les icônes animées et la documentation de la classe AnimatedIcon .

PathIcon

Vous pouvez utiliser un PathIcon pour créer des icônes personnalisées qui utilisent des formes vectorielles, de sorte qu’elles semblent toujours nettes. Toutefois, la création d’une forme à l’aide d’une géométrie XAML est compliquée, car vous devez spécifier individuellement chaque point et chaque courbe.

Cet exemple montre deux façons différentes de définir la géométrie utilisée dans un PathIcon.

<AppBarButton Label="PathIcon">
    <AppBarButton.Icon>
        <PathIcon Data="F1 M 16,12 20,2L 20,16 1,16"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarButton Label="Circles">
    <AppBarButton.Icon>
        <PathIcon>
            <PathIcon.Data>
                <GeometryGroup>
                    <EllipseGeometry RadiusX="15" RadiusY="15" Center="90,90" />
                    <EllipseGeometry RadiusX="50" RadiusY="50" Center="90,90" />
                    <EllipseGeometry RadiusX="70" RadiusY="70" Center="90,90" />
                    <EllipseGeometry RadiusX="100" RadiusY="100" Center="90,90" />
                    <EllipseGeometry RadiusX="120" RadiusY="120" Center="90,90" />
                </GeometryGroup>      
            </PathIcon.Data>
        </PathIcon>
    </AppBarButton.Icon>
</AppBarButton>

Pour en savoir plus sur l’utilisation de classes Geometry pour créer des formes personnalisées, consultez la documentation de la classe et les commandes Move et draw pour les géométries. Consultez également la documentation WPF Geometry. La classe Geometry WinUI n’a pas toutes les mêmes fonctionnalités que la classe WPF, mais la création de formes est la même pour les deux.

Pour plus d’informations et d’exemples, consultez la documentation de la classe PathIcon .

BitmapIcon et ImageIcon

Vous pouvez utiliser bitmapIcon ou ImageIcon pour créer une icône à partir d’un fichier image (par exemple PNG, GIF ou JPEG), bien que nous ne le recommandons pas si une autre option est disponible. Les images bitmap sont créées dans une taille spécifique, donc elles doivent être mises à l’échelle pour les agrandir ou les réduire en fonction de la taille d'icône souhaitée et de la résolution de l’écran. Lorsque l’image est réduite (réduite), elle peut apparaître floue. Lorsqu’elle est mise à l’échelle, elle peut apparaître bloquée et pixelisée.

BitmapIcon

Par défaut, une bitmapIcon supprime toutes les informations de couleur de l’image et affiche tous les pixels non transparents dans la couleur de premier plan . Pour créer une icône monochrome, utilisez une image solide sur un arrière-plan transparent au format PNG. D’autres formats d’image se chargent apparemment sans erreur, mais entraînent un bloc unie de la couleur de premier plan.

<AppBarButton Label="ImageIcon">
    <AppBarButton.Icon>
        <ImageIcon Source="ms-appx:///Assets/slices3.png"/>
    </AppBarButton.Icon>
</AppBarButton>

Vous pouvez remplacer le comportement par défaut en définissant la propriété ShowAsMonochrome sur false. Dans ce cas, BitmapIcon se comporte de la même façon qu’un ImageIcon pour les types de fichiers bitmap pris en charge (les fichiers SVG ne sont pas pris en charge).

<BitmapIcon UriSource="ms-appx:///Assets/slices3.jpg" 
            ShowAsMonochrome="False"/>

Pour plus d’informations et d’exemples, consultez la documentation de la classe BitmapIcon .

ImageIcon

ImageIcon montre l’image fournie par l’une des classes dérivées d’ImageSource. Le plus courant est BitmapSource, mais comme mentionné précédemment, nous ne recommandons pas les images bitmap pour les icônes en raison de problèmes de mise à l’échelle potentiels.

Les ressources SVG (Scalable Vector Graphics) sont idéales pour les icônes, car elles semblent toujours nettes à n’importe quelle taille ou résolution. Vous pouvez utiliser svgImageSource avec imageIcon, qui prend en charge le mode statique sécurisé à partir de la spécification SVG, mais ne prend pas en charge les animations ou les interactions. Pour plus d’informations, consultez la prise en charge svgImageSource et SVG.

ImageIcon ignore la propriété Foreground . Elle affiche donc toujours l’image dans sa couleur d’origine. Étant donné que la couleur de premier plan est ignorée, l’icône ne répond pas aux modifications d’état visuel lorsqu’elle est utilisée dans un bouton ou un autre contrôle similaire.

<AppBarButton Label="ImageIcon">
    <AppBarButton.Icon>
        <ImageIcon Source="ms-appx:///Assets/slices3.svg"/>
    </AppBarButton.Icon>
</AppBarButton>

Pour plus d’informations et d’exemples, consultez la documentation de la classe ImageIcon .

Articles connexes

• Iconographie dans Windows
• Icônes d’application
• AnimatedIcon
• Barre de commandes