Freigeben über

Symbole in Windows-Apps

  • Artikel

Symbole dienen zur visuellen Darstellung einer Aktion, eines Konzepts oder eines Produkts. Durch die Komprimierung der Bedeutung in ein symbolisches Bild können Symbole Sprachbarrieren überschreiten und dabei helfen, eine wertvolle Ressource zu sparen: Bildschirmfläche. Gute Symbole harmonieren mit der Typografie und der übrigen Gestaltungssprache. Sie mischen keine Metaphern, und sie kommunizieren nur das, was benötigt wird, so schnell und einfach wie möglich.

Ein Befehlsleisten-Flyout mit Symbolen zum Hinzufügen - plus Vorzeichen, Bearbeiten - Bleistift, Freigeben - Seite und Pfeil und Einstellungen - Zahnrad

Symbole können in Apps und außerhalb angezeigt werden. In Ihrer App verwenden Sie Symbole, um eine Aktion darzustellen, z. B. das Kopieren von Text oder das Wechseln zur Einstellungsseite.

In diesem Artikel werden Symbole in der App-Benutzeroberfläche beschrieben. Informationen zu Symbolen, die Ihre App in Windows darstellen (App-Symbole), finden Sie unter App-Symbole.

Wissen, wann Symbole verwendet werden sollen

Symbole können Platz sparen, aber wann ist eine Verwendung sinnvoll?

Verwenden Sie ein Symbol für Aktionen wie Ausschneiden, Kopieren, Einfügen und Speichern oder für Elemente in einem Navigationsmenü. Verwende ein Symbol, wenn dessen Bedeutung für den Benutzer leicht nachvollziehbar und es auch bei geringer Größe gut erkennbar ist.

Verwende kein Symbol, wenn dessen Bedeutung nicht eindeutig oder zur Verdeutlichung eine komplexe Form erforderlich ist.

Verwenden des richtigen Symboltyps

Symbole können auf unterschiedliche Weise erstellt werden. Sie können eine Symbolschriftart wie die Schriftart "Segoe Fluent Icons" verwenden. Sie können ein eigenes vektorbasiertes Bild erstellen. Du kannst sogar ein Bitmap-Bild verwenden. (Davon raten wir allerdings ab.) Hier ist eine Zusammenfassung der Möglichkeiten, wie Sie Ihrer App ein Symbol hinzufügen können.

Zum Hinzufügen eines Symbols in Ihrer XAML-App verwenden Sie entweder ein IconElement oder eine IconSource.

Diese Tabelle zeigt die verschiedenen Arten von Symbolen, die von IconElement und IconSource abgeleitet werden.

IconElement IconSource Beschreibung
AnimatedIcon AnimatedIconSource Stellt ein Symbol dar, das ein visuelles Element anzeigt und steuert, das als Reaktion auf Änderungen der Benutzerinteraktion und des visuellen Zustands animiert werden kann.
BitmapIcon BitmapIconSource Stellt ein Symbol dar, das eine Bitmap als Inhalt verwendet.
FontIcon FontIconSource Stellt ein Symbol dar, das eine Glyphe aus der angegebenen Schriftart verwendet.
IconSourceElement N/V Stellt ein Symbol dar, das eine IconSource als Inhalt verwendet.
ImageIcon ImageIconSource Stellt ein Symbol dar, das ein Bild als Inhalt verwendet.
PathIcon PathIconSource Stellt ein Symbol dar, das einen Vektorpfad als Inhalt verwendet.
SymbolIcon SymbolIconSource Stellt ein Symbol dar, das eine Glyphe aus der SymbolThemeFontFamily Ressource als Inhalt verwendet.

IconElement im Vergleich zu IconSource

IconElement ist ein FrameworkElement, sodass es der XAML-Objektstruktur wie jedes andere Element der Benutzeroberfläche Ihrer App hinzugefügt werden kann. Es kann jedoch nicht zu einem ResourceDictionary hinzugefügt und als freigegebene Ressource wiederverwendet werden.

IconSource ähnelt IconElement. Da es sich jedoch nicht um ein FrameworkElement handelt, kann es nicht als eigenständiges Element in der Benutzeroberfläche verwendet werden, sondern als Ressource freigegeben werden. IconSourceElement ist ein spezielles Symbolelement , das eine IconSource umschließt, sodass Sie es überall verwenden können, wo Sie ein IconElement benötigen. Ein Beispiel für diese Features ist im nächsten Abschnitt dargestellt.

IconElement-Beispiele

Sie können eine von IconElement abgeleitete Klasse als eigenständige UI-Komponente verwenden.

In diesem Beispiel wird gezeigt, wie Sie eine Symbolglyphe als Inhalt einer Schaltfläche festlegen. Legen Sie die FontFamily-Eigenschaft der Schaltfläche auf SymbolThemeFontFamily den Unicode-Wert der Glyphe fest, die Sie verwenden möchten.

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

Eine Schaltfläche mit dem Wiedergabesymbol, eine Gliederung eines Dreiecks, das auf die rechte Seite zeigt

Sie können auch explizit eines der zuvor aufgeführten Symbolelementobjekte hinzufügen, z. B. SymbolIcon. Dadurch erhalten Sie weitere Arten von Symbolen, aus der Sie auswählen können. Außerdem können Sie Symbole und andere Inhaltstypen kombinieren, z. B. Text, falls gewünscht.

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

Eine Schaltfläche mit dem Wiedergabesymbol, eine Gliederung eines Dreiecks, das auf die rechte Seite zeigt, wobei der Text darunter wiedergegeben wird

In diesem Beispiel wird gezeigt, wie Sie eine FontIconSource in einem ResourceDictionary definieren und dann ein IconSourceElement verwenden können, um die Ressource an verschiedenen Stellen Ihrer App wiederzuverwenden.

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

Ein Zertifikatsymbol mit dem Textzertifikat ist abgelaufen, und eine Schaltfläche mit dem Zertifikatsymbol und dem Textansichtszertifikat

Öffnen Sie die WinUI 3 Gallery-App, um IconElement in Aktion anzuzeigen.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

Symboleigenschaften

Häufig platzieren Sie Symbole in der Benutzeroberfläche, indem Sie einer icon Eigenschaft eines anderen XAML-Elements zuweisen. Icon eigenschaften, die im Namen enthalten Source sind, nehmen eine IconSource; andernfalls akzeptiert die Eigenschaft ein IconElement.

Diese Liste enthält einige allgemeine Elemente mit einer icon Eigenschaft.

Befehle/Aktionen Navigation Status/Sonstiges
AppBarButton.Icon AppBarToggleButton.Icon AutoSuggestBox.QueryIcon MenuFlyoutItem.Icon MenuFlyoutSubItem.Icon SwipeItem.IconSource XamlUICommand.IconSource NavigationViewItem.Icon SelectorBarItem.Icon TabViewItem.IconSource AnimatedIcon.FallbackIconSource AnimatedIconSource.FallbackIconSource IconSourceElement.IconSource InfoBadge.IconSource InfoBar.IconSource TeachingTip.IconSource

Tipp

Sie können diese Steuerelemente in der WinUI 3 Gallery-App anzeigen, um Beispiele für die Verwendung von Symbolen zu sehen.

Die übrigen Beispiele auf dieser Seite zeigen, wie sie der icon Eigenschaft eines Steuerelements ein Symbol zuweisen.

FontIcon und SymbolIcon

Die am häufigsten verwendete Methode zum Hinzufügen von Symbolen zu Ihrer App besteht darin, die Systemsymbole zu verwenden, die von den Symbolschriftarten in Windows bereitgestellt werden. Windows 11 führt eine neue Schriftart für Systemsymbole ein, Segoe Fluent Icons, die mehr als 1.000 Symbole für die Fluent Design-Sprache bereitstellt. Möglicherweise ist es nicht intuitiv, ein Symbol aus einer Schriftart zu erhalten, aber die Anzeigetechnologie von Windows-Schriftarten bedeutet, dass diese Symbole auf jedem Display, in jeder Auflösung und in beliebiger Größe scharf aussehen.

Wichtig

Standardschriftartfamilie

Anstatt eine FontFamily direkt anzugeben, verwenden FontIcon und SymbolIcon die von der SymbolThemeFontFamily XAML-Designressource definierte Schriftartfamilie. Standardmäßig verwendet diese Ressource die Schriftartenfamilie Segoe Fluent Icon. Wenn Ihre App unter Windows 10, Version 20H2 oder früher ausgeführt wird, ist die Schriftartfamilie Segoe Fluent Icon nicht verfügbar, und die SymbolThemeFontFamily Ressource greift stattdessen auf die Schriftartfamilie Segoe MDL2 Assets zurück.

Symbol-Enumeration

Viele gängige Glyphen aus der SymbolThemeFontFamily Symbol-Aufzählung sind enthalten. Wenn die benötigte Glyphe als Symbol verfügbar ist, können Sie an einer beliebigen Stelle ein SymbolIcon mit der Standardschriftartfamilie verwenden.

Sie verwenden auch Symbolnamen, um eine Eigenschaft in XAML mithilfe der icon Attributsyntax festzulegen, z. B.

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

Eine Schaltfläche mit dem Symbol

Tipp

Sie können symbolnamen nur verwenden, um eine icon Eigenschaft mithilfe der gekürzten Attributsyntax festzulegen. Alle anderen Symboltypen müssen mit der längeren Eigenschaftselementsyntax festgelegt werden, wie in anderen Beispielen auf dieser Seite gezeigt.

Schriftartsymbole

Nur eine kleine Teilmenge von Segoe Fluent Icon Glyphen ist in der Symbol-Enumeration verfügbar. Wenn Sie eine der anderen verfügbaren Glyphen verwenden möchten, verwenden Sie ein FontIcon. In diesem Beispiel wird gezeigt, wie Sie ein AppBarButton-Steuerelement mit dem SendFill Symbol erstellen.

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

Eine Schaltfläche mit dem Symbol

Wenn Sie keine FontFamily angeben oder eine FontFamily angeben, die zur Laufzeit nicht auf dem System verfügbar ist, greift FontIcon auf die von der SymbolThemeFontFamily Designressource definierte Standardschriftfamilie zurück.

Sie können ein Symbol auch mithilfe eines Glyphenwerts aus jeder verfügbaren Schriftart angeben. In diesem Beispiel wird gezeigt, wie Sie eine Glyphe aus der Schriftart Segoe UI Emoji verwenden.

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

Eine Schaltfläche mit dem Wiedergabesymbol aus der Schriftart

Weitere Informationen und Beispiele finden Sie in der Dokumentation zur FontIcon - und SymbolIcon-Klasse .

Tipp

Verwenden Sie die Seite "Symbolographie" in der WinUI 3 Gallery-App, um Code für alle in Segoe Fluent Icons verfügbaren Symbole anzuzeigen, zu suchen und zu kopieren.

Öffnen der WinUI 3 Gallery-App auf der Symbolographieseite

AnimatedIcon

Bewegung ist ein wichtiger Bestandteil der Fluent Design-Sprache. Animierte Symbole lenken die Aufmerksamkeit auf bestimmte Einstiegspunkte, geben Feedback vom Zustand zum Zustand und verleihen einer Interaktion Freude.

Mit animierten Symbolen können Sie einfache, vektorbasierte Symbole mit Bewegung mithilfe von Lottie-Animationen implementieren.

Weitere Informationen und Beispiele finden Sie in der Dokumentation zu animierten Symbolen und der AnimatedIcon-Klasse .

Öffnen Sie die WinUI 3 Gallery-App, um AnimiertesIcon in Aktion anzuzeigen.

PathIcon

Sie können ein PathIcon verwenden, um benutzerdefinierte Symbole zu erstellen, die vektorbasierte Formen verwenden, sodass sie immer scharf aussehen. Das Erstellen eines Shapes mit einer XAML-Geometrie ist jedoch kompliziert, da Sie jeden Punkt und jede Kurve einzeln angeben müssen.

In diesem Beispiel werden zwei verschiedene Methoden zum Definieren der Geometrie gezeigt, die in einem PathIcon verwendet wird.

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

Eine Schaltfläche mit einem benutzerdefinierten PfadsymbolEine Schaltfläche mit einem benutzerdefinierten Pfadsymbol, zwei Kreise um einen Mittelpunkt

Weitere Informationen zur Verwendung von Geometrieklassen zum Erstellen von benutzerdefinierten Shapes finden Sie in der Klassendokumentation und in den Befehlen "Verschieben und Zeichnen" für Geometrien. Siehe auch die WPF Geometry-Dokumentation. Die WinUI Geometry-Klasse verfügt nicht über alle features wie die WPF-Klasse, aber das Erstellen von Shapes ist für beide identisch.

Weitere Informationen und Beispiele finden Sie in der PathIcon-Klassendokumentation .

BitmapIcon und ImageIcon

Sie können ein BitmapIcon oder ImageIcon verwenden, um ein Symbol aus einer Bilddatei (z. B. PNG, GIF oder JPEG) zu erstellen, obwohl wir es nicht empfehlen, wenn eine andere Option verfügbar ist. Bitmap-Bilder werden in einer bestimmten Größe erstellt und müssen daher je nach Bildschirmauflösung und gewünschter Symbolgröße vergrößert oder verkleinert werden. Wenn das Bild verkleinert wird (verkleinert), kann es verschwommen angezeigt werden. Wenn sie skaliert wird, kann sie blockig und pixelig angezeigt werden.

BitmapIcon

Standardmäßig entfernt ein BitmapIcon alle Farbinformationen aus dem Bild und rendert alle nicht transparenten Pixel in der Vordergrundfarbe . Verwenden Sie ein einfarbiges Bild auf einem transparenten Hintergrund im PNG-Format, um ein monochromes Symbol zu erstellen. Andere Bildformate werden scheinbar ohne Fehler geladen, führen jedoch zu einem einfarbigen Block der Vordergrundfarbe.

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

Eine Schaltfläche mit einem Bitmapsymbol, kreisförmigen Segmenten in Schwarzweiß

Sie können das Standardverhalten überschreiben, indem Sie die ShowAsMonochrome-Eigenschaft auf falsefestlegen. In diesem Fall verhält sich BitmapIcon genauso wie ein ImageIcon für unterstützte Bitmapdateitypen (SVG-Dateien werden nicht unterstützt).

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

Weitere Informationen und Beispiele finden Sie in der Dokumentation zur BitmapIcon-Klasse .

Tipp

Die Verwendung von BitmapIcon ähnelt der Verwendung von BitmapImage; weitere Informationen, die für BitmapIcon gelten, finden Sie in der BitmapImage-Klasse , z. B. beim Festlegen der UriSource-Eigenschaft im Code.

ImageIcon

Ein ImageIcon zeigt das Bild, das von einer der von ImageSource abgeleiteten Klassen bereitgestellt wird. Am häufigsten wird BitmapSource verwendet, aber wie bereits erwähnt, empfehlen wir aufgrund potenzieller Skalierungsprobleme keine Bitmapbilder für Symbole.

Skalierbare Vektorgrafikressourcen (SVG) eignen sich ideal für Symbole, da sie immer scharf auf jede Größe oder Auflösung aussehen. Sie können eine SVGImageSource mit einem ImageIcon verwenden, das den sicheren statischen Modus aus der SVG-Spezifikation unterstützt, jedoch keine Animationen oder Interaktionen unterstützt. Weitere Informationen finden Sie unter SVGImageSource und SVG-Unterstützung.

Ein ImageIcon ignoriert die Foreground-Eigenschaft , sodass das Bild immer in seiner Originalfarbe angezeigt wird. Da Vordergrundfarbe ignoriert wird, reagiert das Symbol nicht auf Änderungen des visuellen Zustands, wenn es in einer Schaltfläche oder einem anderen ähnlichen Steuerelement verwendet wird.

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

Eine Schaltfläche mit einem Bildsymbol, kreisförmigen Segmenten in unterschiedlichen Farben

Weitere Informationen und Beispiele finden Sie in der ImageIcon-Klassendokumentation .

Tipp

Die Verwendung von ImageIcon ähnelt dem Bildsteuerelement; weitere Informationen, die für ImageIcon gelten, finden Sie in der Image-Klasse . Ein wichtiger Unterschied besteht darin, dass bei ImageIcon nur der erste Frame eines Multiframebilds (z. B. ein animiertes GIF) verwendet wird. Informationen zum Verwenden animierter Symbole finden Sie unter AnimatedIcon.