Pictogrammen in Windows-apps

Pictogrammen bieden een visuele afkorting voor een actie, concept of product. Door betekenis te comprimeren in een symbolische afbeelding, kunnen pictogrammen taalbarrières kruisen en een waardevolle resource besparen: schermruimte. Goede pictogrammen harmoniseren met typografie en met de rest van de ontwerptaal. Ze combineren geen metaforen en communiceren alleen wat er nodig is, zo snel en eenvoudig mogelijk.

Pictogrammen kunnen binnen apps en buiten apps worden weergegeven. In uw app gebruikt u pictogrammen om een actie weer te geven, zoals het kopiëren van tekst of het gaan naar de instellingenpagina.

In dit artikel worden pictogrammen in de gebruikersinterface van uw app beschreven. Zie App-pictogrammenvoor meer informatie over pictogrammen die uw app vertegenwoordigen in Windows (app-pictogrammen).

Weten wanneer pictogrammen moeten worden gebruikt

Pictogrammen kunnen ruimte besparen, maar wanneer moet u ze gebruiken?

Gebruik een pictogram voor acties, zoals knippen, kopiëren, plakken en opslaan, of voor items in een navigatiemenu. Gebruik een pictogram als de gebruiker gemakkelijk begrijpt wat het pictogram betekent en het is eenvoudig genoeg om duidelijk te zijn in kleine maten.

Gebruik geen pictogram als de betekenis ervan niet duidelijk is, of als het duidelijk maken een complexe vorm vereist.

Het juiste type pictogram gebruiken

Er zijn veel manieren om een pictogram te maken. U kunt een symboollettertype gebruiken zoals het lettertype Segoe Fluent Icons. U kunt uw eigen vectorgebaseerde afbeelding maken. U kunt zelfs een bitmapafbeelding gebruiken, hoewel dit niet wordt aanbevolen. Hier volgt een overzicht van de manieren waarop u een pictogram aan uw app kunt toevoegen.

Als u een pictogram wilt toevoegen aan uw XAML-app, gebruikt u een IconElement- of een IconSource-.

In deze tabel ziet u de verschillende soorten pictogrammen die zijn afgeleid van IconElement en IconSource.

IconElement versus IconSource

IconElement is een FrameworkElement, zodat deze kan worden toegevoegd aan de XAML-objectstructuur, net als elk ander element van de gebruikersinterface van uw app. Het kan echter niet worden toegevoegd aan een ResourceDictionary en opnieuw worden gebruikt als een gedeelde resource.

IconSource lijkt op IconElement; Omdat het echter geen FrameworkElementis, kan het niet worden gebruikt als een zelfstandig element in uw gebruikersinterface, maar kan het worden gedeeld als een resource. IconSourceElement is een speciaal pictogramelement dat een IconSource verpakt, zodat u deze overal kunt gebruiken waar u een IconElement nodig hebt. In de volgende sectie ziet u een voorbeeld van deze functies.

IconElement-voorbeelden

U kunt een IconElement-afgeleide klasse gebruiken als een zelfstandig UI-onderdeel.

In dit voorbeeld wordt getoond hoe u een pictogram kunt instellen als knopinhoud. Stel de FontFamily- van de knop in op SymbolThemeFontFamily en de bijbehorende inhoudseigenschap op de Unicode-waarde van het symbool dat u wilt gebruiken.

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

U kunt ook expliciet een van de eerder vermelde pictogramelementobjecten toevoegen, zoals SymbolIcon. Dit geeft u meer soorten pictogrammen waaruit u kunt kiezen. U kunt ook pictogrammen en andere typen inhoud, zoals tekst, combineren als u wilt.

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

In dit voorbeeld ziet u hoe u een FontIconSource in een ResourceDictionary kunt definiëren en vervolgens een IconSourceElement kunt gebruiken om de resource opnieuw te gebruiken op verschillende plaatsen van uw 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>

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Pictogrameigenschappen

U plaatst vaak pictogrammen in uw gebruikersinterface door er een toe te wijzen aan een icon eigenschap van een ander XAML-element. Icon-eigenschappen die Source bevatten in de naam, ontvangen een IconSource; anders ontvangen ze een IconElement.

Deze lijst bevat enkele algemene elementen met een eigenschap icon.

In de overige voorbeelden op deze pagina ziet u hoe u een pictogram toewijst aan de eigenschap icon van een besturingselement.

FontIcon en SymbolIcon

De meest voorkomende manier om pictogrammen aan uw app toe te voegen, is door de systeempictogrammen te gebruiken die worden geleverd door de pictogramlettertypen in Windows. Windows 11 introduceert een nieuw lettertype voor systeempictogrammen, Segoe Fluent Icons, dat meer dan 1000 pictogrammen biedt die zijn ontworpen voor de Fluent Design-taal. Het is mogelijk niet intuïtief om een pictogram van een lettertype te krijgen, maar de technologie voor het weergeven van lettertypen in Windows betekent dat deze pictogrammen er scherp en scherp uitzien op elk beeldscherm, op elke resolutie en op elke grootte.

Symbolen opsomming

Veel veelvoorkomende glyphs uit de SymbolThemeFontFamily zijn opgenomen in de opsomming Symbool. Als het symbool dat u nodig hebt beschikbaar is als symbool, kunt u een SymbolIcon overal gebruiken waar u een FontIcon met de standaardlettertypefamilie zou gebruiken.

U gebruikt ook symboolnamen om een eigenschap icon in XAML in te stellen met behulp van kenmerksyntaxis, zoals deze

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

Lettertypepictogrammen

Er is slechts een kleine subset van Segoe Fluent Icon-glyphs beschikbaar in de opsomming Symbool. Als u een van de andere beschikbare glyphs wilt gebruiken, gebruikt u een FontIcon-. In dit voorbeeld ziet u hoe u een AppBarButton- maakt met het pictogram SendFill.

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

Als u tijdens runtime geen FontFamily-opgeeft of als u een FontFamily opgeeft die tijdens runtime niet beschikbaar is op het systeem, valt de FontIcon terug op de standaardlettertypefamilie die is gedefinieerd door de SymbolThemeFontFamily themaresource.

U kunt ook een pictogram opgeven met behulp van een Glyph-waarde uit elk beschikbaar lettertype. In dit voorbeeld ziet u hoe u een Glyph gebruikt uit het lettertype Segoe UI Emoji.

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

Zie de documentatie van de FontIcon en SymbolIcon voor meer informatie en voorbeelden.

GeanimeerdIcoon

Beweging is een belangrijk onderdeel van de Fluent Design-taal. Pictogrammen met animatie vestigen de aandacht op specifieke toegangspunten, geven feedback van status tot status en voegen vreugde toe aan een interactie.

U kunt animatiepictogrammen gebruiken om lichtgewicht vectorpictogrammen met beweging te implementeren met behulp van Lottie animaties.

Voor meer informatie en voorbeelden, zie Geanimeerde pictogrammen en de AnimatedIcon klassedocumentatie.

PathIcon

U kunt een PathIcon- gebruiken om aangepaste pictogrammen te maken die gebruikmaken van vectorvormen, zodat ze er altijd scherp uitzien. Het maken van een vorm met behulp van een XAML-Geometrie is echter ingewikkeld omdat u elk punt en elke curve afzonderlijk moet opgeven.

In dit voorbeeld ziet u twee verschillende manieren om de Geometrie te definiëren die in een PathIcon wordt gebruikt.

<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>

Zie de klassedocumentatie en Verplaats- en tekencodes voor geometrieënvoor meer informatie over het gebruik van Geometrie klassen om aangepaste vormen te maken. Zie ook de documentatie WPF Geometry. De WinUI Geometrieklasse heeft niet dezelfde functies als de WPF-klasse, maar het maken van shapes is voor beide hetzelfde.

Zie de PathIcon klassedocumentatie voor meer informatie en voorbeelden.

BitmapIcon en ImageIcon

U kunt een BitmapIcon of ImageIcon gebruiken om een pictogram te maken op basis van een afbeeldingsbestand (zoals PNG, GIF of JPEG), hoewel dit niet wordt aanbevolen als er een andere optie beschikbaar is. Bitmapafbeeldingen worden gemaakt op een specifieke grootte, zodat ze omhoog of omlaag moeten worden geschaald, afhankelijk van hoe groot het pictogram moet zijn en de resolutie van het scherm. Wanneer de afbeelding omlaag wordt geschaald (verkleind), kan deze wazig worden weergegeven. Wanneer deze omhoog wordt geschaald, kan deze blokkerig en ge pixeleerd worden weergegeven.

BitmapIcon

Standaard worden met een BitmapIcon alle kleurinformatie uit de afbeelding verwijderd en worden alle niet-transparante pixels weergegeven in de Voorgrond kleur. Als u een monochrome pictogram wilt maken, gebruikt u een effen afbeelding op een transparante achtergrond in PNG-indeling. Andere afbeeldingsindelingen worden blijkbaar zonder fouten geladen, maar resulteren in een effen blok van de voorgrondkleur.

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

U kunt het standaardgedrag overschrijven door de eigenschap ShowAsMonochrome in te stellen op false. In dit geval gedraagt bitmapicon zich hetzelfde als een ImageIcon voor ondersteunde bitmapbestandstypen (SVG-bestanden worden niet ondersteund).

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

Zie de BitmapIcon klassedocumentatie voor meer informatie en voorbeelden.

ImageIcon

Een ImageIcon toont de afbeelding van een van de ImageSource-afgeleide klassen. De meest voorkomende is BitmapSource, maar zoals eerder vermeld, raden we bitmapafbeeldingen niet aan voor pictogrammen vanwege mogelijke schaalproblemen.

SVG-bronnen (Scalable Vector Graphics) zijn ideaal voor pictogrammen, omdat ze er altijd scherp uitzien op elke grootte of resolutie. U kunt een SVGImageSource- gebruiken met een ImageIcon, dat veilige statische modus van de SVG-specificatie ondersteunt, maar geen animaties of interacties ondersteunt. Zie SVGImageSource- en SVG-ondersteuningvoor meer informatie.

Een ImageIcon negeert de eigenschap Voorgrond, zodat de afbeelding altijd in de oorspronkelijke kleur wordt weergegeven. Omdat de voorgrondkleur wordt genegeerd, reageert het pictogram niet op visuele toestandswijzigingen wanneer het wordt gebruikt in een knop of een andere soortgelijke controle.

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

Zie de ImageIcon klassedocumentatie voor meer informatie en voorbeelden.

Verwante artikelen

• Iconografie in Windows
• app-icoontjes
• AnimatedIcon-
• Opdrachtbalk