Symbole in Windows-Apps
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.
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=""/>
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>
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=""/>
</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>
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.
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"/>
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=""/>
</AppBarButton.Icon>
</AppBarButton>
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="▶"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
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.
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 .
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>
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>
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>
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.
Verwandte Artikel
Windows developer