Icone nelle app di Windows

Le icone sintetizzano graficamente un'azione, un concetto o un prodotto. Comprimendo il significato in un'immagine simbolica, le icone possono superare le barriere linguistiche e aiutare a conservare una risorsa preziosa: lo spazio sullo schermo. Icone efficaci si armonizzano con gli elementi tipografici e con il resto del linguaggio di progettazione. Non mescolano le metafore e comunicano solo ciò che è necessario, nel modo più rapido e semplice possibile.

Le icone possono essere visualizzate all'interno delle app e all'esterno di esse. All'interno dell'app si usano icone per rappresentare un'azione, ad esempio la copia di testo o l'accesso alla pagina delle impostazioni.

Questo articolo descrive le icone all'interno dell'interfaccia utente dell'app. Per informazioni sulle icone che rappresentano l'app in Windows (icone dell'app), vedi Icone dell'app.

Sapere quando usare le icone

Le icone consentono di risparmiare spazio, ma quando è consigliabile usarle?

Usa un'icona per le azioni, come tagliare, copiare, incollare e salvare, o per le voci di un menu di navigazione. Usa un'icona se il suo significato è intuitivo per l'utente e l'icona risulta abbastanza chiara nelle dimensioni più piccole.

Non usare un'icona se il suo significato non è chiaro o se per renderla chiara è necessaria una forma complessa.

Usa il giusto tipo di icona

Un'icona può essere creata in molti modi. È possibile usare un tipo di carattere simbolo come il tipo di carattere Segoe Fluent Icons. Puoi creare la tua immagine vettoriale. Puoi anche usare un'immagine bitmap, sebbene non sia consigliabile. Ecco un riepilogo dei modi in cui puoi aggiungere un'icona alla tua app.

Per aggiungere un'icona nell'app XAML, puoi usare IconElement o IconSource.

Questa tabella mostra i diversi tipi di icone derivati da IconElement e IconSource.

IconElement e IconSource

IconElement è un FrameworkElement, quindi può essere aggiunto all'albero degli oggetti XAML esattamente come qualsiasi altro elemento dell'interfaccia utente dell'app. Tuttavia, non può essere aggiunto a un ResourceDictionary e riutilizzato come risorsa condivisa.

IconSource è simile a IconElement. Tuttavia, poiché non è un FrameworkElement, non può essere usato come elemento autonomo nell'interfaccia utente, ma può essere condiviso come risorsa. IconSourceElement è un elemento icona speciale che esegue il wrapping di IconSource in modo da poterlo usare ovunque sia necessario un elemento IconElement. Un esempio di queste funzionalità è illustrato nella sezione successiva.

Esempi di IconElement

È possibile usare una classe derivata da IconElement come componente dell'interfaccia utente autonomo.

In questo esempio viene illustrato come impostare un glifo icona come contenuto di un pulsante. Impostare FontFamily del pulsante su SymbolThemeFontFamily e la relativa proprietà content sul valore Unicode del glifo che si desidera utilizzare.

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

È anche possibile aggiungere in modo esplicito uno degli oggetti elemento icona elencati in precedenza, ad esempio SymbolIcon. In questo modo è possibile scegliere più tipi di icone. Consente inoltre di combinare icone e altri tipi di contenuto, ad esempio testo, se si desidera.

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

In questo esempio viene illustrato come definire un oggetto FontIconSource in un oggetto ResourceDictionary e quindi usare IconSourceElement per riutilizzare la risorsa in posizioni diverse dell'app.

<!--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'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Proprietà icona

Spesso inserisci le icone nell'interfaccia utente assegnandole una a una icon proprietà di un altro elemento XAML. Icon proprietà che includono Source nel nome accettano un oggetto IconSource; in caso contrario, la proprietà accetta un elemento IconElement.

Questo elenco mostra alcuni elementi comuni con una icon proprietà .

Negli esempi rimanenti di questa pagina viene illustrato come assegnare un'icona alla icon proprietà di un controllo .

FontIcon e SymbolIcon

Il modo più comune per aggiungere icone all'app consiste nell'usare le icone di sistema fornite dai tipi di carattere icona in Windows. Windows 11 introduce un nuovo tipo di carattere icona di sistema, Segoe Fluent Icons, che fornisce più di 1.000 icone progettate per il linguaggio Fluent Design. Potrebbe non essere intuitivo ricavare un'icona da un font, ma la tecnologia di visualizzazione dei font di Windows fa sì che queste icone appaiano nitide e definite su qualsiasi display, a qualsiasi risoluzione e a qualsiasi dimensione.

Enumerazione Symbol

Molti glifi comuni di SymbolThemeFontFamily sono inclusi nell'enumerazione Symbol . Se il glifo necessario è disponibile come simbolo, è possibile usare symbolIcon in qualsiasi punto in cui si userebbe un Oggetto FontIcon con la famiglia di caratteri predefinita.

Puoi anche usare i nomi dei simboli per impostare una icon proprietà in XAML usando la sintassi degli attributi, come illustrato di seguito

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

Icone dei tipi di carattere

Nell'enumerazione Symbol sono disponibili solo un piccolo subset di glifi Segoe Fluent Icon. Per usare uno qualsiasi degli altri glifi disponibili, usare fontIcon. Questo esempio illustra come creare un controllo AppBarButton con l'icona SendFill .

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

Se non specifichi fontFamily o specifichi un FontFamily che non è disponibile nel sistema in fase di esecuzione, FontIcon torna alla famiglia di caratteri predefinita definita dalla risorsa del SymbolThemeFontFamily tema.

È anche possibile specificare un'icona usando un valore Glyph da qualsiasi tipo di carattere disponibile. Questo esempio illustra come usare un glifo del tipo di carattere Segoe UI Emoji.

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

Per altre informazioni ed esempi, vedere la documentazione della classe FontIcon e SymbolIcon .

Icona animata

Motion è una parte importante del linguaggio Fluent Design. Le icone animate attirano l'attenzione su punti di ingresso specifici, forniscono feedback dallo stato allo stato e aggiungono piacere a un'interazione.

Puoi usare icone animate per implementare icone leggere e basate su vettori con movimento usando animazioni Lottie .

Per altre informazioni ed esempi, vedere Icone animate e la documentazione della classe AnimatedIcon .

PathIcon

È possibile usare pathIcon per creare icone personalizzate che usano forme basate su vettori, in modo che abbiano sempre un aspetto nitido. Tuttavia, la creazione di una forma usando una geometria XAML è complessa perché è necessario specificare singolarmente ogni punto e curva.

In questo esempio vengono illustrati due modi diversi per definire la geometria usata in un oggetto 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>

Per altre informazioni sull'uso delle classi Geometry per creare forme personalizzate, vedere la documentazione della classe e i comandi Move and draw per le geometrie. Vedere anche la documentazione geometry WPF. La classe Geometry WinUI non ha tutte le stesse funzionalità della classe WPF, ma la creazione di forme è la stessa per entrambi.

Per altre informazioni ed esempi, vedere la documentazione della classe PathIcon .

BitmapIcon e ImageIcon

È possibile usare bitmapIcon o ImageIcon per creare un'icona da un file di immagine (ad esempio PNG, GIF o JPEG), anche se non è consigliabile se è disponibile un'altra opzione. Le immagini bitmap vengono create con una dimensione specifica, pertanto devono essere ridimensionate in base alla grandezza desiderata per l'icona e la risoluzione dello schermo. Quando l'immagine viene ridimensionata (rimpicciolita), può apparire sfocata. Quando viene ridimensionata, può apparire bloccata e pixelata.

BitmapIcon

Per impostazione predefinita, bitmapIcon rimuove tutte le informazioni sul colore dall'immagine ed esegue il rendering di tutti i pixel non trasparenti nel colore di primo piano. Per creare un'icona monocromatica, usare un'immagine a tinta unita su uno sfondo trasparente in formato PNG. Altri formati di immagine verranno caricati apparentemente senza errori, ma generano un blocco a tinta unita del colore di primo piano.

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

È possibile eseguire l'override del comportamento predefinito impostando la proprietà ShowAsMonochrome su false. In questo caso, BitmapIcon si comporta come imageIcon per i tipi di file bitmap supportati (i file SVG non sono supportati).

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

Per altre informazioni ed esempi, vedere la documentazione della classe BitmapIcon .

ImageIcon

ImageIcon mostra l'immagine fornita da una delle classi derivate da ImageSource. Il più comune è BitmapSource, ma come accennato in precedenza, non è consigliabile usare immagini bitmap per le icone a causa di potenziali problemi di ridimensionamento.

Le risorse Scalable Vector Graphics (SVG) sono ideali per le icone, perché appaiono sempre nitide a qualsiasi dimensione o risoluzione. Puoi usare SVGImageSource con imageIcon, che supporta la modalità statica sicura dalla specifica SVG, ma non supporta animazioni o interazioni. Per altre informazioni, vedere SVGImageSource e supporto SVG.

ImageIcon ignora la proprietà Foreground , quindi mostra sempre l'immagine nel colore originale. Poiché il colore di primo piano viene ignorato, l'icona non risponde alle modifiche dello stato di visualizzazione quando viene usato in un pulsante o in un altro controllo simile.

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

Per altre informazioni ed esempi, vedere la documentazione della classe ImageIcon .

Articoli correlati

• Iconografia in Windows
• Icone dell'app
• Icona animata
• Barra dei comandi