Design-Toolkits und Beispiele für Windows-Apps

Design- und UI-bezogene Downloads für Fluent Design/Windows-Apps. Zusätzliche Tools wie beispielsweise Visual Studio finden Sie auf der Hauptseite für Downloads.

Toolkits und Bibliotheken

Figma Toolkit
WinUI 3 in WinAppSDK 1.1, Oktober 2022
Download

Windows-UI-Bibliothek
Steuerelemente und andere Benutzeroberflächenelemente für Windows-Apps.
Installationsanweisungen

Windows-Community-Toolkit
Hilfsfunktionen, benutzerdefinierte Steuerelemente und App-Dienste
Installationsanweisungen

Template Studio
Richten Sie schnell Apps mit einer assistentenbasierten Benutzeroberfläche ein.
Installationsanweisungen

WinUI-Katalog

Rufen Sie die WinUI-Katalog-Apps aus dem Microsoft Store ab, um diese XAML-Steuerelemente und das Fluent Design-System in Aktion zu sehen. Die WinUI 3-Katalog- und WinUI 2-Katalog-Apps umfassen interaktive Beispiele für die meisten WinUI 3- und WinUI 2-Steuerelemente, -Features und -Funktionen. Die Apps sind eine interaktive Ergänzung zu dieser Website. Wenn Sie sie installiert haben, können Sie Links auf einzelnen Steuerungsseiten verwenden, um die App zu starten und das Steuerelement in Aktion zu sehen.

• Rufen Sie den WinUI 3-Katalog und den WinUI 2-Katalog aus dem Microsoft Store ab.
• Rufen Sie den Quellcode für beide von GitHub ab (verwenden Sie denmain-Branch für WinUI 3 und den Branchwinui2 für WinUI 2).

Schriftarten

• Segoe UI Variable
• Segoe Fluent-Symbole
• Segoe UI
• Segoe MDL2
• Hololens-Symbolschriftart (nur Windows)

Tools

Kachel- und Symbolgenerator für Adobe Photoshop Mit diesen Aktionen für Adobe Photoshop werden die 68 empfohlenen Kacheln und Symbole aus nur sieben Dateien erstellt.
Kachel- und Symbolgenerator herunterladen

Beispiele

Fluent-XAML-Design-Editor
Der Fluent-XAML-Design-Editor ist ein Tool, mit dem die Flexibilität des Fluent Design-Systems verdeutlicht wird. Darüber hinaus wird der App-Entwicklungsprozess unterstützt, indem XAML-Markup für unser ResourceDictionary-Framework generiert wird, das in Windows-Anwendungen verwendet wird. Toolbeispiel herunterladen
Das Tool auf GitHub

VanArsdel
Die umfassende Windows-Beispiel-App von Van Arsdel, Ltd. wurde entwickelt, um die nächste Welle des Microsoft Fluent Design-Systems zu veranschaulichen. Hierbei werden die verbesserte Dichte und die neuen Steuerelemente in der Windows-UI-Bibliothek sowie leistungsstarke zugrunde liegende Features des UX-Frameworks und der entsprechenden Zusammensetzung umfassend genutzt. Mit dem Beispiel wird verdeutlicht, wie Sie eine produktive Benutzeroberfläche mit großem Funktionsumfang zum Verwalten und Erwerben von IoT-Geräten (hier: Lampen) erstellen können.
VanArsdel-Beispiel herunterladen
VanArsdel-Beispiel auf GitHub

BuildCast
BuildCast ist ein umfassendes Beispiel, das zur Veranschaulichung des Fluent Design-Systems und von Windows entwickelt wurde. Die App ermöglicht es, ausgewählte Video-Podcasts zu durchsuchen, herunterzuladen und wiederzugeben, inklusive einiger Feeds für Windows-Begeisterte. Außerdem verfügt sie über Ink-Notizen, Lesezeichen und eine Remotewiedergabe. Dieses Beispiel wurde anfänglich auf der Build-Konferenz 2017 während der Präsentation Erstellen beeindruckender Apps mit Fluent Design vorgestellt.
BuildCast-Beispiel herunterladen
BuildCast-Beispiel auf GitHub

Lunch Scheduler
Ein Windows-App-Beispiel für die Planung von Mittagessen (Lunch Scheduler) mit Freunden und Kollegen. Sie erstellen ein Mittagessen und laden Freunde in ein Restaurant ein, und die App übernimmt die Verwaltung des Mittagessens für alle beteiligten Parteien. Diese App enthält Elemente des Fluent Design-Systems in einer Windows-App, einschließlich Acryl, Reveal und verbundene Animationen.
Lunch Scheduler-Beispiel herunterladen
Lunch Scheduler-Beispiel auf GitHub

Sie möchten mehr Code?

Auf der Windows-Beispielseite finden Sie eine vollständige Liste aller Windows-App-Beispiele. Portal mit Beispielen aufrufen