Dela via

Ikoner i Windows-appar

Ikoner ger en visuell förkortning för en åtgärd, ett koncept eller en produkt. Genom att komprimera innebörden till en symbolisk bild kan ikoner korsa språkbarriärer och bidra till att spara en värdefull resurs: skärmutrymme. Bra ikoner harmoniserar med typografi och med resten av designspråket. De blandar inte metaforer, och de kommunicerar bara vad som behövs, så snabbt och enkelt som möjligt.

En utfällbar kommandorad med ikoner för att lägga till - plustecken, redigera - penna, dela - sida och pil och inställningar - kugghjul

Ikoner kan visas i appar och utanför dem. I appen använder du ikoner för att representera en åtgärd, till exempel att kopiera text eller gå till inställningssidan.

I den här artikeln beskrivs ikoner i appens användargränssnitt. Mer information om ikoner som representerar din app i Windows (appikoner) finns i Appikoner.

Vet när du ska använda ikoner

Ikoner kan spara utrymme, men när ska du använda dem?

Använd en ikon för åtgärder som klipp ut, kopiera, klistra in och spara, eller för objekt på en navigeringsmeny. Använd en ikon om det är enkelt för användaren att förstå vad ikonen betyder och det är enkelt nog att vara tydlig i små storlekar.

Använd inte en ikon om dess betydelse inte är tydlig, eller om det krävs en komplex form för att göra den tydlig.

Använd rätt typ av ikon

Det finns många sätt att skapa en ikon. Du kan använda ett symbolteckensnitt som teckensnittet Segoe Fluent Icons. Du kan skapa en egen vektorbaserad bild. Du kan till och med använda en bitmappsbild, även om vi inte rekommenderar den. Här är en sammanfattning av hur du kan lägga till en ikon i din app.

Om du vill lägga till en ikon i XAML-appen använder du antingen en IconElement- eller en IconSource-.

Den här tabellen visar de olika typer av ikoner som härleds från IconElement och IconSource.

IconElement IconSource Description
AnimatedIcon AnimatedIconSource Representerar en ikon som visar och styr ett visuellt objekt som kan animera som svar på ändringar av användarinteraktion och visuella tillstånd.
BitmapIcon BitmapIconSource Representerar en ikon som använder en bitmapp som innehåll.
FontIcon FontIconSource Representerar en ikon som använder ett tecken från det angivna teckensnittet.
IconSourceElement N/A Representerar en ikon som använder en IconSource som innehåll.
ImageIcon ImageIconSource Representerar en ikon som använder en bild som innehåll.
PathIcon PathIconSource Representerar en ikon som använder en vektorsökväg som innehåll.
SymbolIcon SymbolIconSource Representerar en ikon som använder en glyf från den SymbolThemeFontFamily resursen som innehåll.

IconElement jämfört med IconSource

IconElement är ett FrameworkElement, så det kan läggas till i XAML-objektträdet precis som andra element i appens användargränssnitt. Det kan dock inte läggas till i en ResourceDictionary- och återanvändas som en delad resurs.

IconSource liknar IconElement. Men eftersom det inte är ett FrameworkElementkan det inte användas som ett fristående element i användargränssnittet, men det kan delas som en resurs. IconSourceElement är ett särskilt ikonelement som omsluter en IconSource så att du kan använda den var som helst där du behöver ett IconElement. Ett exempel på dessa funktioner visas i nästa avsnitt.

IconElement exempel

Du kan använda en IconElement--derived-klass som en fristående UI-komponent.

Det här exemplet visar hur du anger en ikons glyph som innehållet i en knapp. Ange knappens FontFamily till SymbolThemeFontFamily och dess innehållsegenskap till Unicode-värdet för den glyf som du vill använda.

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

en knapp med uppspelningsikonen, en kontur av en triangel som pekar på höger

Du kan också uttryckligen lägga till ett av de ikonelementobjekt som angavs tidigare, till exempel SymbolIcon. Detta ger dig fler typer av ikoner att välja mellan. Du kan också kombinera ikoner och andra typer av innehåll, till exempel text, om du vill.

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

En knapp med uppspelningsikonen, en kontur av en triangel som pekar åt höger, med texten 'play' under

Det här exemplet visar hur du kan definiera en FontIconSource i en ResourceDictionary och sedan använda en IconSourceElement för att återanvända resursen på olika platser i din 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>

En certifikatikon med textcertifikatet har upphört att gälla och en knapp med certifikatikonen och textvisningscertifikatet

Öppna WinUI-galleriappen för att se IconElement i praktiken

Med WinUI 3-galleriappen kan du utforska och bläddra bland interaktiva exempel på WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub.

Ikonegenskaper

Du placerar ofta ikoner i användargränssnittet genom att tilldela en till en icon egenskap för ett annat XAML-element. Icon-egenskaper som innehåller Source i namnet tar en IconSource, annars tar egenskapen ett IconElement.

Den här listan visar några vanliga element som har en egenskap icon.

Kommandon/åtgärder Navigering Status/Övrigt
AppBarButton.IconAppBarToggleButton.IconAutoSuggestBox.QueryIconMenuFlyoutItem.IconMenuFlyoutSubItem.IconSwipeItem.IconSourceXamlUICommand.IconSource NavigationViewItem.IconSelectorBarItem.IconTabViewItem.IconSource AnimatedIcon.FallbackIconSourceAnimatedIconSource.FallbackIconSourceIconSourceElement.IconSourceInfoBadge.IconSourceInfoBar.IconSourceTeachingTip.IconSource

Tips/Råd

Du kan visa dessa kontroller i WinUI-galleriappen för att se exempel på hur ikoner används med dem.

De återstående exemplen på den här sidan visar hur du tilldelar en ikon till egenskapen icon för en kontroll.

FontIcon och SymbolIcon

Det vanligaste sättet att lägga till ikoner i din app är att använda systemikonerna som tillhandahålls av ikonteckensnitten i Windows. Windows 11 introducerar ett nytt systemikonteckensnitt, Segoe Fluent Icons, som innehåller mer än 1 000 ikoner som är utformade för språket Fluent Design. Det kanske inte är intuitivt att hämta en ikon från ett teckensnitt, men windows teckenvisningsteknik innebär att dessa ikoner ser skarpa och skarpa ut på alla bildskärmar, oavsett upplösning och i valfri storlek.

Viktigt!

Standardteckensnittsfamilj

I stället för att ange en FontFamily- direkt använder FontIcon och SymbolIcon teckensnittsfamiljen som definierats av SymbolThemeFontFamily XAML-temaresursen. Som standard använder den här resursen teckensnittsfamiljen Segoe Fluent Icon. Om appen körs på Windows 10, version 20H2 eller tidigare är teckensnittsfamiljen Segoe Fluent Icon inte tillgänglig och SymbolThemeFontFamily resursen återgår till Segoe MDL2 Assets teckensnittsfamilj i stället.

Symboluppräkning

Många vanliga glyfer från SymbolThemeFontFamily ingår i Symbol uppräkning. Om det glyf du behöver är tillgängligt som en symbol kan du använda en SymbolIcon var som helst där du skulle använda en FontIcon med standardteckensnittsfamiljen.

Du använder också symbolnamn för att ange en icon-egenskap i XAML med hjälp av attributsyntax, så här

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

en knapp med ikonen skicka, en kontur av ett pilhuvud som pekar på höger

Tips/Råd

Du kan bara använda symbolnamn för att ange en egenskap för icon med hjälp av den förkortade attributsyntaxen. Alla andra ikontyper måste anges med hjälp av syntaxen för det längre egenskapselementet , vilket visas i andra exempel på den här sidan.

Teckensnittsikoner

Endast en liten delmängd av Segoe Fluent Icon-glyfer är tillgängliga i Symbol uppräkning. Om du vill använda någon av de andra tillgängliga glyferna använder du en FontIcon-. Det här exemplet visar hur du skapar en AppBarButton- med ikonen SendFill.

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

en knapp med ikonen skicka fyllning, ett ifyllt pilhuvud som pekar på höger

Om du inte anger en FontFamilyeller anger en FontFamily som inte är tillgänglig i systemet vid körtid, faller FontIcon tillbaka till standardteckensnittsfamiljen som definieras av SymbolThemeFontFamily temaresurs.

Du kan också ange en ikon med ett Glyph-värde från valfritt tillgängligt teckensnitt. Det här exemplet visar hur du använder en Glyph från Segoe UI Emoji-teckensnittet.

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

En knapp med uppspelningsikonen från Segoe UI Emoji-teckensnittet, ett vitt pilhuvud som pekar åt höger på en blå bakgrund

Mer information och exempel finns i dokumentationen FontIcon och SymbolIcon class.

Tips/Råd

Använd sidan Iconography i WinUI-galleriappen för att visa, söka efter och kopiera kod för alla ikoner som är tillgängliga i Segoe Fluent-ikoner.

Öppna WinUI-galleriappen på sidan Ikonografi

AnimatedIcon

Motion är en viktig del av Fluent Design-språket. Animerade ikoner uppmärksammar specifika startpunkter, ger feedback från tillstånd till tillstånd och lägger till glädje i en interaktion.

Du kan använda animerade ikoner för att implementera lätta, vektorbaserade ikoner med rörelse med hjälp av Lottie animeringar.

Mer information och exempel finns i Animerade ikoner och dokumentationen om AnimatedIcon-klassen.

Öppna WinUI-galleriappen för att se AnimatedIcon i praktiken

PathIcon

Du kan använda en PathIcon- för att skapa anpassade ikoner som använder vektorbaserade former, så att de alltid ser skarpa ut. Att skapa en form med hjälp av en XAML-geometri är dock komplicerat eftersom du måste ange varje punkt och kurva individuellt.

Det här exemplet visar två olika sätt att definiera geometrin som används i en 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>

En knapp med en anpassad sökvägsikon en knapp med en anpassad sökvägsikon, två cirklar runt en mittpunkt

Mer information om hur du använder geometri klasser för att skapa anpassade former finns i klassdokumentationen och Flytta och rita kommandon för geometrier. Se även dokumentationen WPF Geometry. Klassen WinUI Geometry har inte samma funktioner som WPF-klassen, men att skapa former är detsamma för båda.

Mer information och exempel finns i PathIcon-klassdokumentationen.

BitmapIcon och ImageIcon

Du kan använda en BitmapIcon- eller ImageIcon för att skapa en ikon från en bildfil (till exempel PNG, GIF eller JPEG), även om vi inte rekommenderar det om det finns något annat alternativ. Bitmappsbilder skapas med en viss storlek, så de måste skalas upp eller ned beroende på hur stor du vill att ikonen ska vara och skärmens upplösning. När bilden skalas ned (krympt) kan den verka suddig. När den skalas upp kan den se blockerad och pixelerad ut.

Bitmap-ikon

Som standard tar en BitmapIcon bort all färginformation från bilden och återger alla icke-transparenta bildpunkter i Förgrund färg. Om du vill skapa en monokrom ikon använder du en solid bild på en transparent bakgrund i PNG-format. Andra bildformat tycks laddas utan fel men resulterar i ett solitt block av förgrundsfärgen.

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

en knapp med en bitmappsikon, cirkelformade sektorer i svartvitt

Du kan åsidosätta standardbeteendet genom att ange egenskapen ShowAsMonochrome till false. I det här fallet fungerar BitmapIcon på samma sätt som en ImageIcon för bitmappsfiltyper som stöds (SVG-filer stöds inte).

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

Mer information och exempel finns i BitmapIcon-klassdokumentation.

Tips/Råd

Användningen av BitmapIcon liknar användningen av BitmapImage. Se klassen BitmapImage för mer information som gäller för BitmapIcon, som att ange egenskapen UriSource i kod.

Bildikon

En ImageIcon visar bilden som tillhandahålls av en av de ImageSource-härledda klasserna. Det vanligaste är BitmapSource, men som tidigare nämnts rekommenderar vi inte bitmappsbilder för ikoner på grund av potentiella skalningsproblem.

Skalbara SVG-resurser (Vector Graphics) är idealiska för ikoner, eftersom de alltid ser skarpa ut i valfri storlek eller upplösning. Du kan använda en SVGImageSource- med en ImageIcon, som stöder säkert statiskt läge från SVG-specifikationen men inte stöder animeringar eller interaktioner. Mer information finns i SVGImageSource och SVG-stöd.

En ImageIcon ignorerar egenskapen Foreground, så den visar alltid bilden i sin ursprungliga färg. Eftersom förgrundsfärg ignoreras svarar inte ikonen på ändringar i det visuella tillståndet när den används i en knapp eller annan liknande kontroll.

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

En knapp med en bildikon, cirkelformade sektorer i olika färger

Mer information och exempel finns i dokumentationen ImageIcon class.

Tips/Råd

Användningen av ImageIcon liknar bildkontrollen. Mer information om ImageIcon finns i klassen Image. En anmärkningsvärd skillnad är att med ImageIcon används endast den första ramen i en bild med flera bildramar (som en animerad GIF). Information om hur du använder animerade ikoner finns i AnimatedIcon.

  • Last updated on