Prägnantes C#-Markup der nächsten Generation für .NET-UI-Frameworks
C# Markup 2 unterstützt mehrere UI-Frameworks, einschließlich der hervorragenden Uno-Plattform.
Wenn Sie Uno nicht kennen, empfehle ich Ihnen, es sich anzusehen. Uno ist eines der besten und ausgereiftesten .NET-UI-Frameworks. Es bietet eine beeindruckende Bandbreite an Funktionen, die Sie unterstützen, wenn Sie reale Produktionsanwendungen Ende2Ende und schnell erstellen müssen.
dotnet new install Uno.Templates
dotnet new install Modern.CSharp.Templates
md UnoCSharpMarkup2
cd UnoCSharpMarkup2
dotnet new unoapp -preset recommended
dotnet new mcs-uno-markup2 --presentation mvux --allow-scripts yes
Die Uno-Plattform unterstützt XAML, hat jedoch kürzlich auch die C#-Benutzeroberfläche mit Uno C#-Markup eingeführt. C# Markup 2 fügt eine weitere Option hinzu, die über das hinausgeht, was Gen-1-C#-Markup-Varianten bieten.
Es ist gut, Optionen zu haben – jeder gewinnt: Entwickler erhalten die Erfahrung, die ihnen am besten gefällt, und das UI-Framework wird immer mehr angenommen. Probieren Sie es aus und wählen Sie aus, was Ihnen gefällt!
Als ersten Eindruck hier ein kurzer Vergleich:
Genießen Sie ein Flutter-ähnliches UI-Entwicklungserlebnis mit C# Markup 2:
new
, HorizontalAlignment = HorizontalAlignment.Center
, () =>
oder nameof()
, keine Angabe mehr für jede einzelne TextBlock
-Bindung, die Sie ja an die Text
Eigenschaft binden möchten ...MyPage.cs
nur Markup-APIs an MyPage.cs
, siehe UI-Framework und andere APIs beim Bearbeiten von MyPage.logic.cs
.Kein XAML/HTML/JavaScript/CSS erforderlich. Keine Engine oder Schichten, die Ihnen im Weg stehen.
NuGet
Chat (bei Bedarf zuerst DotNetEvolution beitreten)
Der beste Ort, um Fragen zu stellen oder Hilfe zu leisten!
Suchen Sie nach C#-Markup 1? Finden Sie es hier
7. Mai 2024
Neues C# Markup 2.4 für Uno Platform 5.2 inkl. .NET Single Project
Die heutige Version ist vollständig auf Uno 5.2 aktualisiert, einschließlich Unos .NET Single Project und uno.sdk
!
Plus:
dotnet new unoapp
-Vorlage hinzugefügt21. Dezember 2023
Neue C# Markup 2-Vorlagen für Uno Platform 5
Zusätzlich zu einigen neuen C#-Markup-2-Methoden bietet die heutige Version Unterstützung für die neuen C#-Markup-2-Vorlagen für Uno Platform 5: eine aktualisierte mcs-uno-markup2
Vorlage und eine neue mcs-uno-view
-Vorlage.
dotnet new unoapp
Vorlage von Uno oder mit dem Uno-Lösungsassistenten für Visual Studio erstellt wurdenmcs-uno-view
Vorlage wird vom praktischen Skript New-View.ps1
verwendet, das in mcs-uno-markup2
enthalten ist18. November 2023
2.3 Release ist GA – bietet Unterstützung für .NET 8, Uno 5 und 5 Uno-Bibliotheken!
Diese Version ist vollständig auf die fantastische Uno 5- Version und .NET 8 GA aktualisiert. Sie können den Uno Solution Wizard für Visual Studio verwenden und jederzeit mit einem Befehl ein C#-Markup-2-Projekt hinzufügen. Alle Anpassungen des Uno-Assistenten werden unterstützt: Kombinieren Sie C# Markup 2 mit MVUX oder MVVM, XAML oder Uno C# Markup, verwenden Sie Uno Navigationserweiterungen und zielen Sie auf .NET 8 oder .NET 7 ab. Alle Uno-Zielplattformen werden unterstützt.
Mit einer brandneuen Dotnet-Projektvorlage für C# Markup 2 können Sie im Handumdrehen loslegen – sorgfältig optimiert für ein optimales Entwicklererlebnis: übersichtliche Lösungs-Explorer-Ansicht, automatische Dateigruppierung von Markup- und Logikdateien, übersichtliche Markup-Quelle, fokussierte Intelligenz, klare Ausgangspunkte für Markup-Erweiterungen in Ihrem Code sowie schnelles Hot-Reload – sowohl automatisch als auch mit einer Hot-Reload-Schaltflächenüberlagerung im Debug-Modus für die Plattformen, die Ihre IDE Hot-Reload durchführen, die Benutzeroberfläche aber (noch) nicht aktualisieren kann automatisch.
Genießen Sie allgemeine C#-Markup-2-Verbesserungen sowie C#-Markup-2-APIs für 5 zusätzliche Uno-Bibliotheken:
ThemeResource
sind in C# Intellisense durchsuchbar, stark typisiertDer Einstieg ist voll auf dem neuesten Stand. Beispiele in diesem Repo und dieser Readme-Datei werden in Kürze aktualisiert, um die neuen Funktionen vorzustellen.
Genießen Sie prägnantes C#-Markup!
1. November 2023
2.3 Preview Release fügt 5 Uno-Bibliotheken hinzu!
Genießen Sie allgemeine C#-Markup-2-Verbesserungen sowie C#-Markup-2-APIs für 5 zusätzliche Uno-Bibliotheken:
ThemeResource
sind in C# Intellisense durchsuchbar, stark typisiertSie können dies noch heute ausprobieren – sehen Sie sich die oben aufgeführten NuGets an. Eine Dokumentation der neuen Funktionen sowie ein neuer Leitfaden für die ersten Schritte folgen mit der nächsten Version – bald!
27. Juni 2023
2.2 Veröffentlichung und Beginn der .NET MAUI-Unterstützung
25. März 2023
Umfrageergebnisse sind da! Und der Gewinner ist...
Die Ergebnisse der Umfrage vom März 2023 darüber, was als nächstes für C# Markup 2 entwickelt werden soll, sind da!
Eine überraschende Ergänzung war die Frage nach C# Markup 2 für Avalonia UI in den Antworten; Die Resonanz war groß und landete knapp auf dem zweiten Platz.
Hier sind die Ergebnisse der Umfrage, einschließlich der Likes für die „Anderen“ Optionen Blazor und AvaloniaUI:
Und der Gewinner ist: C# Markup 2 für MAUI !
Sehen Sie sich dieses Repo an und markieren Sie es, um die Veröffentlichung zu sehen. Sie können sich auch #CSharpForMarkup-Tweets ansehen, um den Fortschritt zu verfolgen. Vielen Dank für Ihre Antwort!
28. Februar 2023
Hauptveröffentlichung – C# Markup 2 Version 2.0 für WinUI 3!
C# Markup 2 Version 2.0 für WinUI 3 ist da! Komplett aktualisiert auf .NET 7, C# 11 und das neueste Windows App SDK und die Uno-Plattform. Mit vielen Verbesserungen, darunter 6 unterstützte Zielplattformen, C#-Hot-Reload-Unterstützung und neue Dotnet-Projektvorlagen.
Präsentiert von Applicita
Besonderer Dank geht an Applicita, die diese Veröffentlichung ermöglicht hat. Es ist inspirierend zu sehen, wie ein Unternehmen OSS auf diese Weise unterstützt (Applicita hat auch mehrere andere nützliche Bibliotheken als Open-Source-Lösung bereitgestellt).
Weitere Informationen zu den Neuerungen in dieser Version finden Sie hier.
16. Februar 2023
Eine neue Version von C# Markup 2 für WinUI 3 und Uno Platform erscheint im Februar 2023
Aktualisiert auf .NET 7, C# 11 und das neueste Windows App SDK und die Uno-Plattform. Mit vielen Verbesserungen – einschließlich C#-Hot-Reload-Unterstützung und einer neuen Dotnet-Projektvorlage. Beobachten Sie diesen Bereich!
14. April 2022
Neue Version 0.8: Fügt
ControlTemplate
Unterstützung undStyle
hinzu!
Die vollständige Liste der Verbesserungen finden Sie hier und hier
15. Februar 2022
Neue Version 0.6: Fügt WPF und viele Verbesserungen hinzu!
Die vollständige Liste der Verbesserungen finden Sie hier
30. November 2021
C# Markup 2 auf der UNOCONF 2021 angekündigt!
Diese erste Vorschau zielt auf WinUI 3 und Uno Platform – einschließlich Browser-Webassembly – mit C# 10 und .NET 6 ab. Sie unterstützt .NET Hot Reload für eine schnelle innere Entwicklungsschleife.
Sehen Sie sich die Ankündigung zu C# Markup 2 auf der UNOCONF 2021 an:
Build()
, Assign()
und Invoke()
integriert sind.Überprüfen Sie zunächst, ob Ihre Entwicklungsumgebung bereit ist:
Wählen Sie entweder eine vorhandene Uno Platform 5.2-Lösung oder erstellen Sie eine neue mit dem Uno Platform Template Wizard oder der dotnet new unoapp-Vorlage. Fühlen Sie sich frei, beliebige Optionen auszuwählen; C# Markup 2 unterstützt Uno 5.2 mit .NET 8 oder .NET 7, MVUX oder MVVM, XAML oder Uno C# Markup vollständig auf allen Zielplattformen.
Installieren Sie die neuesten Modern.CSharp.Templates für dotnet new
um diese Vorlagen für Windows App SDK, Uno Platform und mehr zu erhalten
dotnet new install Modern.CSharp.Templates
So sehen Sie Hilfe zu den Vorlagenparametern:
dotnet new mcs-uno-markup2 -h
Fügen Sie der Uno Platform-Lösung ein C#-Markup-2-Projekt hinzu, z. B.:
cd C:ReposUnoApp1
dotnet new mcs-uno-markup2 --appRootNamespace InnoWvate.UnoApp1 --presentation mvux --allow-scripts Yes
Dies wird:
Fügen Sie der Lösung ein neues Projekt UnoApp1.Presentation
mit einem funktionierenden Beispiel hinzu:
New-View.ps1
-Skript zum schnellen Hinzufügen weiterer Seiten und ModelleReadme.md
mit Anweisungen für den schnellen EinstiegDas Präsentationsprojekt ist zur Wartbarkeit gemäß Best Practices für die C#-Markup-Benutzeroberfläche vorstrukturiert
Fügen Sie NuGet-Paketverweise zum Präsentationsprojekt hinzu
Fügen Sie einen Verweis auf das Presentation-Projekt im UnoApp1
-Projekt hinzu
Beachten Sie, dass Sie den Parameter --name
von dotnet new
verwenden können, um den Namen Ihres vorhandenen Uno-Projekts anzugeben, wenn dieser vom Namen des Lösungsordners abweicht (im obigen Beispiel UnoApp1
). Der angegebene Name wird mit dem Suffix .Presentation
auch für das neue Projekt verwendet.
Öffnen Sie die Uno-Lösung oder laden Sie sie neu und befolgen Sie die Schritte in der Readme.md
des Präsentationsprojekts, um zu beginnen.
Um zu erfahren, wie Sie C# Markup 2 verwenden, lesen Sie die Funktionsbeschreibung unten.
Ein vollständigeres Beispiel finden Sie in der Beispiel-App in diesem Repo.
C# Markup 2 enthält eine vollständig deklarative, fließende API für vorhandene UI-Frameworks. Es zeigt praktisch jedes Layout, jede Ansicht und jede Eigenschaft an, einschließlich angehängter Eigenschaften, und enthält eine vollständige Inline-Dokumentation , die jeden Markup-Helfer/Parameter mit der Inline-Dokumentation für das zugrunde liegende UI-Objekt/die zugrunde liegende UI-Eigenschaft verknüpft.
Die umfangreichen UI-Frameworks, die in C# Markup 2 zur Verfügung stehen, können bis zu 500+ UI-Objekttypen enthalten. Zum Beispiel Layouts, Ansichten und Stile, aber auch Pinsel, Rich-Text-Elemente, Zeichenprimitive, Transformationen, Animationen, visuelle Zustände und mehr. Darüber hinaus bietet C# Markup leistungsstarke und übersichtliche Komfort-APIs für Layout, Bindungen, Konverter, Vorlagen und mehr.
Layouts, Ansichten, Eigenschaften und Eigenschaftswerte sehen folgendermaßen aus:
Alle Eigenschaften können mit Erweiterungsmethoden festgelegt werden: Eigenschaften, die für den Ansichtstyp oder seine Basistypen definiert sind, sowie angehängte Eigenschaften.
Eigenschaften, die direkt am Ansichtstyp definiert werden, können alternativ mit benannten Parametern festgelegt werden:
Dies ist vor allem für Eigenschaften nützlich, die primitive Typen annehmen.
Eigenschaften, die Aufzählungswerte annehmen, verfügen über Erweiterungsmethoden, sodass der Aufzählungsname nicht wiederholt werden muss
(wie in TextAlignment: TextAlignment.Center
):
Den Namen angehängter Eigenschaften wird der definierende Typ plus Unterstrich vorangestellt:
Sie können in einem Aufruf mehrere angehängte Eigenschaftswerte für denselben definierenden Typ festlegen :
Darüber hinaus gibt es für einige Ansichtstypen praktische Überladungen mit nur den am häufigsten verwendeten Parametern:
Im to
Subnamespace werden implizite Konverter für allgemeine Eigenschaftswerttypen bereitgestellt:
Diese sind:
string
akzeptieren, wie vom UI-Framework mit dem TypeConverter-Attribut angegebenstring
akzeptieren, einschließlich Tupeln, wenn mehr als ein Wert erwartet wird. Z.B: Button() .CornerRadius (2.5)
oderButton() .CornerRadius ((2.5, 0, 2.5, 0))
Ein Beispiel mit to.Point
:
Button ( ) . Background ( RadialGradientBrush ( Center : ( 50 , 50 ) , GradientOrigin : ( 100 , 50 ) ) )
Ein Beispiel mit to.TimeSpan
und to.Duration
:
ColorAnimation ( BeginTime : " 0:0:5 " , Duration : 2.5 )
In vielen Fällen ist die Inline-Dokumentation auf dem to.
Typ beschreibt die unterstützten Werte und Formatierungen; Dies kann insbesondere bei Saiten das Rätselraten vermeiden.
Stile können wie folgt zugewiesen werden:
Und so definiert:
In WPF können Sie einen Style-Setter-Wert binden (WinUI 3 unterstützt dies nicht):
Ein DataTemplate
wird als Func
übergeben:
Ein ControlTemplate
kann wie folgt erstellt werden:
.BindTemplate()
können Sie Vorlageneigenschaften an das übergeordnete Vorlagenelement bindentargetType
Parameter ist optionalb
ist hier ein static UI_Button
Feld mit Nullwert. In diesem Beispiel dient es nur dazu, eine Möglichkeit zu demonstrieren, beim Bearbeiten von Bindungsausdrücken für einen Button
Intellisense zu erhalten. Weitere Informationen finden Sie unter Bindungskraft. So können Sie ein ControlTemplate
in einem impliziten oder expliziten Style
verwenden:
Sie können Aufzählungen anstelle von Zahlen für Rasterzeilen und -spalten verwenden. Dies verbessert die Lesbarkeit und erspart Ihnen die manuelle Neunummerierung von Zeilen und Spalten beim Hinzufügen/Entfernen/Neuanordnen
Als Alternative zu gängigen Kombinationen von Markup-Helfern sind Kurzschrift-Helfer enthalten:
Alle Layouts ignorieren null
in ihren children
. Dies ermöglicht bedingte Ansichten abhängig vom Wert eines Ausdrucks zum Zeitpunkt der (Neu-)Erstellung der Seite.
Der Spread
Helfer ermöglicht das Einfügen einer variablen Anzahl von Kindern an einer bestimmten Position in der children
(ähnlich wie Flutter es bietet).
Dank des C# 10-Attributs CallerArgumentExpression müssen Sie keine Strings oder nameof()
verwenden, um Bindungspfade mit guter Leistung anzugeben. Stattdessen können Sie C#-Ausdrücke verwenden und alle Vorteile genießen, die sie mit sich bringen: vollständige Intellisense, vom Compiler überprüft, Unterstützung für Umbenennungen:
Beachten Sie aus der Intellisense-Beschreibung im obigen Bild, dass der pathExpression
Parameter mehrere praktische Bindungssyntaxen unterstützt, die Folgendes ermöglichen:
viewmodel.path
|| (viewmodel expression).path
, wobei path
enthalten kann .
z.B:.Bind (vm.SelectedTweet)
bindet an „SelectedTweet“.Bind ((vm.SelectedTweet).Title)
bindet an „Title“.Bind ((vm.SelectedTweet).Author.Name)
bindet an „Author.Name“?
mit nullwertigen Typinstanzen, um die Vorteile von C# zu genießen, ohne Objektinstanzen zu benötigen, z. B.:.Bind (vm?.SelectedTweet?.Title)
bindet an „Title“?
kann notwendig sein, da der Ausdruck zur Laufzeit ausgewertet wird, auch wenn uns sein Wert egal ist; Das CallerArgumentExpression-Attribut stellt zusätzlich zum Ausdruckswert eine Ausdruckszeichenfolge bereit..Bind ("SelectedTweet")
bindet an „SelectedTweet“ Alle umgebenden "
, @
oder Leerzeichen in pathExpression
werden ignoriert
Bind
unterstützt fast alle Funktionen, die das UI-Framework für die Bindung bietet. Darüber hinaus gibt es viele Bind
Überladungen, die Folgendes ermöglichen:
Eine typische Markup-Seite beginnt wie folgt:
FlutterPage.cs
:
using CSharpMarkup . < UI framework name > ;
using static CSharpMarkup . < UI framework name > . Helpers ;
namespace Examples ;
partial class FlutterPage
{
public void Build ( ) => Content =
Beachten Sie die Verwendung von partial class
; Dadurch können Sie das UI-Markup von der UI-Logik trennen:
FlutterPage.logic.cs
:
using < UI framework namespace > . Controls ;
namespace Examples ;
public sealed partial class FlutterPage : Page , IBuild
{
readonly FlutterViewModel vm ;
public FlutterPage ( )
{
InitializeComponent ( ) ; // Only needed for WinUI
DataContext = vm = < obtain viewmodel instance > ;
Build ( ) ;
WICHTIG:
In C#-Markupdateien wie
:
Schließen Sie CSharpMarkup.*
-Namespace-Usings, aber keine UI-Objektmodell-Usings wie using Microsoft.UI.Xaml;
(Die Typnamen im CSharpMarkup-Namespace sind konstruktionsbedingt identisch mit den Typnamen im UI-Objektmodell, daher würde die Einbeziehung beider zu Mehrdeutigkeiten führen.)
Versuchen Sie, die Verwendung des UI-Objektmodells auf UI-Logikdateien zu beschränken. Bei Bedarf können Sie das UI-Objektmodell sicher in C#-Markupdateien verwenden. Eine gute Vorgehensweise besteht dann darin, globale Namespaces mithilfe von Aliasen zu definieren, z. B. global using UI = Microsoft.UI;
Weitere Anleitungen finden Sie in den Kommentaren in GlobalUsings.cs
eines Projekts, das mit dotnet new mcs-uno-markup2
erstellt wurde.
In UI-Logikdateien wie
:
Verwenden Sie keine CSharpMarkup
Objekte
Markup-Objektinstanzen können außerhalb eines Markup-Ausdrucks nicht sicher verwendet werden (aus Leistungsgründen – jeder Markup-Objekttyp verfügt über eine einzelne statische Instanz, um zu verhindern, dass jeder Ansicht ein zusätzliches Objekt zugewiesen wird). Aus diesem Grund übergeben Assign
und Invoke
(siehe unten) das im Markup-Objekt enthaltene UI-Objekt an die Logik und nicht das Markup-Objekt selbst.
Mit Assign
and Invoke
können Sie UI-Markup in die UI-Logik integrieren:
SearchPage.cs
:
SearchPage.logic.cs
:
SearchPage.cs
:
SearchPage.logic.cs
:
Notiz :
InSearchPage.cs
sindStackPanel
undTextBox
Markup- Objekttypen
inSearchPage.logic.cs
sind sie die entsprechenden UI-Framework- Objekttypen
Es gibt (noch) keine C#-Markup-IDE-Erweiterung, um Markup richtig einzufärben. Die Lesbarkeit von C#-Markup kann jedoch mit dieser Problemumgehung in den Visual Studio-Optionen verbessert werden:
Kopieren Sie unter Fonts and Colors
“ die Farbe von User Types - Classes
in User Members - Methods
(mit der Schaltfläche Custom...
). Jetzt ist die Markup-Farbe für Ansichten und Eigenschaften nicht mehr dieselbe.