Balisage C# concis de nouvelle génération pour les frameworks d'interface utilisateur .NET
C# Markup 2 prend en charge plusieurs frameworks d'interface utilisateur, y compris l' excellente plate-forme Uno.
Si vous ne connaissez pas Uno, je vous recommande de les consulter ; Uno est l'un des frameworks d'interface utilisateur .NET les meilleurs et les plus matures, il offre une gamme impressionnante de fonctionnalités qui vous soutiendront lorsque vous aurez besoin de créer des applications de production du monde réel de bout en bout, rapidement .
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
Uno Platform prend en charge XAML mais a récemment adopté également l'interface utilisateur C# avec Uno C# Markup. C# Markup 2 ajoute une autre option qui va au-delà de ce qu'offrent les variantes de balisage C# de génération 1.
C'est bien d'avoir des options - tout le monde y gagne : les développeurs bénéficient de l'expérience qu'ils préfèrent et le cadre d'interface utilisateur est de plus en plus adopté. Vérifiez-le et choisissez ce que vous aimez !
Pour vous donner une première impression, voici une comparaison rapide côte à côte :
Profitez d'une expérience de développement d'interface utilisateur de type Flutter avec C# Markup 2 :
new
, HorizontalAlignment = HorizontalAlignment.Center
, () =>
ou nameof()
, plus besoin de spécifier pour chaque liaison TextBlock
que oui, vous souhaitez lier à la propriété Text
...MyPage.cs
, consultez le framework d'interface utilisateur et d'autres API lors de la modification de MyPage.logic.cs
.Aucun XAML/HTML/JavaScript/CSS requis. Aucun moteur ni couches pour vous gêner.
NuGet
Chat (si nécessaire, rejoignez d'abord DotNetEvolution)
Le meilleur endroit pour poser des questions ou aider !
Vous recherchez le balisage C# 1 ? Trouvez-le ici
7 mai 2024
Nouveau balisage C# 2.4 pour Uno Platform 5.2, y compris le projet unique .NET
La version d'aujourd'hui est entièrement mise à jour vers Uno 5.2, y compris le projet unique .NET d'Uno et uno.sdk
!
Plus:
dotnet new unoapp
21 décembre 2023
Nouveaux modèles C# Markup 2 pour Uno Platform 5
En plus de certaines nouvelles méthodes C# Markup 2, la version d'aujourd'hui ajoute la prise en charge des nouveaux modèles C# Markup 2 pour Uno Platform 5 : un modèle mcs-uno-markup2
mis à jour et un nouveau modèle mcs-uno-view
.
dotnet new unoapp
d'Uno ou avec l'assistant de solution Uno pour Visual Studio.mcs-uno-view
est utilisé par le script pratique New-View.ps1
, inclus dans mcs-uno-markup2
18 novembre 2023
La version 2.3 est GA - ajoute la prise en charge de .NET 8, Uno 5 plus 5 bibliothèques Uno !
Cette version est entièrement mise à jour vers l'impressionnante version Uno 5 et .NET 8 GA. Vous pouvez utiliser l' Assistant Solution Uno pour Visual Studio et y ajouter un projet C# Markup 2 à tout moment avec une seule commande. Toutes les personnalisations de l'assistant Uno sont prises en charge : combinez C# Markup 2 avec MVUX ou MVVM, XAML ou Uno C# Markup, utilisez les extensions de navigation Uno et ciblez .NET 8 ou .NET 7. Toutes les plates-formes cibles Uno sont prises en charge.
Un tout nouveau modèle de projet dotnet C# Markup 2 vous permet de démarrer en un rien de temps - soigneusement optimisé pour une expérience de développement optimale : vue épurée de l'explorateur de solutions, regroupement automatique de fichiers de balisage et de fichiers logiques, source de balisage épurée, intellisense ciblé, points de départ clairs pour des extensions de balisage dans votre code, ainsi qu'un rechargement rapide à chaud - à la fois automatique et avec une superposition de boutons de rechargement à chaud en mode débogage, pour les plates-formes que votre IDE peut recharger à chaud mais ne peut pas (encore) mettre à jour l'interface utilisateur automatiquement.
Profitez des améliorations générales de C# Markup 2, ainsi que des API C# Markup 2 pour 5 bibliothèques Uno supplémentaires :
ThemeResource
peuvent être recherchés en C# Intellisense, fortement typésLe démarrage est entièrement à jour. Les exemples de ce dépôt et de ce fichier Lisez-moi seront bientôt mis à jour pour montrer les nouvelles fonctionnalités.
NJoy un balisage C# concis !
1 novembre 2023
La version préliminaire 2.3 ajoute 5 bibliothèques Uno !
Profitez des améliorations générales de C# Markup 2, ainsi que des API C# Markup 2 pour 5 bibliothèques Uno supplémentaires :
ThemeResource
peuvent être recherchés en C# Intellisense, fortement typésVous pouvez essayer ceci aujourd'hui – consultez les NuGets répertoriés ci-dessus. La documentation des nouvelles fonctionnalités ainsi qu'un nouveau guide de démarrage seront bientôt disponibles dans la prochaine version !
27 juin 2023
2.2 Sortie et démarrage du support .NET MAUI
25 mars 2023
Les résultats du sondage sont arrivés ! Et le gagnant est...
Les résultats du sondage de mars 2023 sur ce qu'il faut construire ensuite pour C# Markup 2 sont disponibles !
Un ajout surprise a été la demande de C# Markup 2 pour Avalonia UI dans les réponses ; il a reçu une grande réponse qui l'a catapulté à une 2ème place très serrée.
Voici les résultats du sondage incluant les likes pour les options « Autres » Blazor et AvaloniaUI :
Et le gagnant est : C# Markup 2 pour MAUI !
Regardez et mettez en vedette ce dépôt pour voir la version ; vous pouvez également regarder les tweets #CSharpForMarkup pour suivre les progrès. Merci pour votre réponse !
28 février 2023
Version majeure – C# Markup 2 version 2.0 pour WinUI 3 !
C# Markup 2 version 2.0 pour WinUI 3 est là ! Entièrement mis à jour vers .NET 7, C# 11 et le dernier SDK d'application Windows et la plateforme Uno. Avec de nombreuses améliorations, notamment 6 plates-formes cibles prises en charge, la prise en charge du rechargement à chaud C# et de nouveaux modèles de projet dotnet.
Présenté par Applicita
Un merci tout spécial à Applicita pour avoir rendu cette version possible ; c'est inspirant de voir une entreprise prendre en charge les logiciels libres de cette manière (Applicita a également ouvert plusieurs autres bibliothèques utiles)
En savoir plus sur les nouveautés de cette version ici.
16 février 2023
Une nouvelle version de C# Markup 2 pour WinUI 3 et Uno Platform arrive en février 2023
Mise à jour vers .NET 7, C# 11 et le dernier SDK d'application Windows et la plateforme Uno. Avec de nombreuses améliorations, notamment la prise en charge du rechargement à chaud C# et un nouveau modèle de projet dotnet. Surveillez cet espace !
14 avril 2022
Nouvelle version 0.8 : ajoute la prise en charge
ControlTemplate
et des améliorationsStyle
!
Voir ici et ici pour la liste complète des améliorations
15 février 2022
Nouvelle version 0.6 : ajoute WPF et de nombreuses améliorations !
Voir ici pour la liste complète des améliorations
30 novembre 2021
C# Markup 2 annoncé à l'UNOCONF 2021 !
Ce premier aperçu cible WinUI 3 et Uno Platform - y compris le webassembly du navigateur - avec C# 10 et .NET 6. Il prend en charge .NET Hot Reload pour une boucle de développement interne rapide.
Voir l'annonce de C# Markup 2 à l'UNOCONF 2021 :
Build()
, Assign()
et Invoke()
.Vérifiez d’abord si votre environnement de développement est prêt :
Choisissez une solution Uno Platform 5.2 existante ou créez-en une nouvelle avec l'assistant de modèle Uno Platform ou le nouveau modèle unoapp dotnet. N'hésitez pas à sélectionner n'importe quelle option ; C# Markup 2 prend entièrement en charge Uno 5.2 avec .NET 8 ou .NET 7, MVUX ou MVVM, XAML ou Uno C# Markup, sur toutes les plateformes cibles.
Installez la dernière version de Modern.CSharp.Templates pour dotnet new
pour obtenir ces modèles pour le SDK d'application Windows, la plate-forme Uno et plus encore.
dotnet new install Modern.CSharp.Templates
Pour consulter l'aide sur les paramètres du modèle :
dotnet new mcs-uno-markup2 -h
Ajoutez un projet C# Markup 2 à la solution Uno Platform, par exemple :
cd C:ReposUnoApp1
dotnet new mcs-uno-markup2 --appRootNamespace InnoWvate.UnoApp1 --presentation mvux --allow-scripts Yes
Cela va :
Ajoutez un nouveau projet UnoApp1.Presentation
à la solution, avec un exemple fonctionnel :
New-View.ps1
pour ajouter rapidement plus de pages et de modèlesReadme.md
avec des instructions pour démarrer rapidementLe projet de présentation est pré-structuré pour la maintenabilité conformément aux meilleures pratiques pour l'interface utilisateur de balisage C#.
Ajouter des références de package NuGet au projet Présentation
Ajouter une référence au projet Présentation dans le projet UnoApp1
Notez que vous pouvez utiliser le paramètre --name
de dotnet new
pour spécifier le nom de votre projet Uno existant , s'il diffère du nom du dossier de solution (dans l'exemple ci-dessus, UnoApp1
). Le nom spécifié sera également utilisé avec le suffixe .Presentation
pour le nouveau projet.
Ouvrez ou rechargez la solution Uno et suivez les étapes du Readme.md
du projet Présentation pour commencer.
Pour savoir comment utiliser C# Markup 2, lisez la description des fonctionnalités ci-dessous.
Pour un exemple plus complet, consultez l'exemple d'application dans ce dépôt.
C# Markup 2 contient une API déclarative et fluide pour les frameworks d'interface utilisateur existants. Il présente pratiquement toutes les mises en page, vues et propriétés, y compris les propriétés attachées, et comprend une documentation en ligne complète qui relie chaque assistant/paramètre de balisage à la documentation en ligne de l'objet/propriété de l'interface utilisateur sous-jacente.
Les riches frameworks d'interface utilisateur présentés par C# Markup 2 peuvent contenir jusqu'à plus de 500 types d'objets d'interface utilisateur . Par exemple, des mises en page, des vues et des styles, mais aussi des pinceaux, des éléments de texte enrichi, des primitives de dessin, des transformations, des animations, des états visuels et bien plus encore. De plus, C# Markup offre des API pratiques puissantes et concises pour la mise en page, les liaisons, les convertisseurs, les modèles et bien plus encore.
Les mises en page, les vues, les propriétés et les valeurs des propriétés ressemblent à ceci :
Toutes les propriétés peuvent être définies avec des méthodes d'extension : propriétés définies sur le type de vue ou ses types de base, ainsi que les propriétés attachées.
Les propriétés définies directement sur le type de vue peuvent également être définies avec des paramètres nommés :
Ceci est principalement utile pour les propriétés qui prennent des types primitifs.
Les propriétés qui prennent des valeurs d'énumération ont des méthodes d'extension, donc le nom d'énumération n'a pas besoin d'être répété
(comme dans TextAlignment: TextAlignment.Center
):
Les noms de propriétés joints sont préfixés par le type de définition plus un trait de soulignement :
Vous pouvez définir plusieurs valeurs de propriété attachées pour le même type de définition en un seul appel :
En plus de cela, il existe des surcharges pratiques pour certains types de vues avec uniquement les paramètres les plus couramment utilisés :
Des convertisseurs implicites sont fournis dans le sous-espace de noms to
pour les types de valeurs de propriété courants :
Ce sont :
string
, comme spécifié par le framework UI avec l'attribut TypeConverterstring
, y compris les tuples si plusieurs valeurs sont attendues. Par exemple : Button() .CornerRadius (2.5)
ouButton() .CornerRadius ((2.5, 0, 2.5, 0))
Un exemple utilisant to.Point
:
Button ( ) . Background ( RadialGradientBrush ( Center : ( 50 , 50 ) , GradientOrigin : ( 100 , 50 ) ) )
Un exemple utilisant to.TimeSpan
et to.Duration
:
ColorAnimation ( BeginTime : " 0:0:5 " , Duration : 2.5 )
Dans de nombreux cas, la documentation en ligne sur le fichier to.
type décrit les valeurs et le formatage pris en charge ; surtout pour les chaînes, cela peut éviter les conjectures.
Les styles peuvent être attribués comme ceci :
Et défini comme ceci :
Dans WPF, vous pouvez lier une valeur de définition de style (WinUI 3 ne prend pas en charge cela) :
Un DataTemplate
est transmis en tant que Func
:
Un ControlTemplate
peut être créé comme ceci :
.BindTemplate()
vous permet de lier les propriétés du modèle au parent modélisétargetType
est facultatifb
voici un champ static UI_Button
de valeur nulle. Dans cet exemple, il ne sert qu'à démontrer une façon d'obtenir l'intellisense lors de la modification d'expressions de liaison pour un Button
; voir Pouvoir de liaison pour plus de détails. Voici comment utiliser un ControlTemplate
dans un Style
implicite ou explicite :
Vous pouvez utiliser des énumérations au lieu de nombres pour les lignes et les colonnes de la grille. Cela améliore la lisibilité et vous évite de renuméroter manuellement les lignes et les colonnes lors de leur ajout/suppression/réorganisation.
Les aides abrégées sont incluses comme alternative aux combinaisons courantes d'aides au balisage :
Toutes les mises en page ignorent les valeurs null
dans leurs children
; cela permet d'avoir des vues conditionnelles en fonction de la valeur d'une expression au moment de la (re)construction de la page.
L'assistant Spread
permet d'insérer un nombre variable d'enfants à une position spécifique dans la liste children
(similaire à ce que propose Flutter).
Grâce à l'attribut C# 10 CallerArgumentExpression, vous n'avez pas besoin d'utiliser des chaînes ou nameof()
pour spécifier des chemins de liaison avec de bonnes performances . Au lieu de cela, vous pouvez utiliser des expressions C# et profiter de tous les bienfaits qu'elles apportent : intellisense complet, compilateur vérifié, support de renommage :
Notez dans la description Intellisense dans l'image ci-dessus que le paramètre pathExpression
prend en charge plusieurs syntaxes de liaison pratiques , ce qui permet de :
viewmodel.path
|| (viewmodel expression).path
, où path
peut contenir .
par exemple :.Bind (vm.SelectedTweet)
se lie à "SelectedTweet".Bind ((vm.SelectedTweet).Title)
se lie à "Titre".Bind ((vm.SelectedTweet).Author.Name)
se lie à "Author.Name"?
avec des instances de type de valeur nulle pour profiter des qualités C# sans avoir besoin d'instances d'objet, par exemple :.Bind (vm?.SelectedTweet?.Title)
se lie à "Titre"?
peut être nécessaire car l'expression sera évaluée au moment de l'exécution, même si sa valeur ne nous intéresse pas ; l'attribut CallerArgumentExpression fournit une chaîne d'expression en plus de la valeur de l'expression..Bind ("SelectedTweet")
se lie à "SelectedTweet" Tous les caractères "
, @
ou espaces blancs environnants dans pathExpression
sont ignorés
Bind
prend en charge presque toutes les fonctionnalités offertes par le framework d'interface utilisateur pour la liaison. De plus, il existe de nombreuses surcharges Bind
qui permettent de :
Une page de balisage typique commence comme ceci :
FlutterPage.cs
:
using CSharpMarkup . < UI framework name > ;
using static CSharpMarkup . < UI framework name > . Helpers ;
namespace Examples ;
partial class FlutterPage
{
public void Build ( ) => Content =
Notez l'utilisation de partial class
; cela vous permet de séparer le balisage de l'interface utilisateur de la logique de l'interface utilisateur :
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 ( ) ;
IMPORTANT:
Dans les fichiers de balisage C# comme
:
Inclut les utilisations de l'espace de noms CSharpMarkup.*
mais aucune utilisation du modèle d'objet de l'interface utilisateur, telle que using Microsoft.UI.Xaml;
(de par leur conception, les noms de types dans l'espace de noms CSharpMarkup sont identiques aux noms de types dans le modèle objet de l'interface utilisateur, donc inclure les deux provoquerait des ambiguïtés)
Essayez de limiter l'utilisation du modèle objet de l'interface utilisateur aux fichiers logiques de l'interface utilisateur. Si vous le devez, vous pouvez utiliser le modèle objet de l’interface utilisateur en toute sécurité dans les fichiers de balisage C# ; une bonne pratique consiste alors à définir un espace de noms global à l'aide d'alias, par exemple global using UI = Microsoft.UI;
Pour plus d'informations, consultez les commentaires dans le GlobalUsings.cs
d'un projet créé avec dotnet new mcs-uno-markup2
.
Dans les fichiers logiques de l'interface utilisateur comme
:
N'utilisez pas d'objets CSharpMarkup
Les instances d'objet de balisage ne peuvent pas être utilisées en toute sécurité en dehors d'une expression de balisage (en raison des caractéristiques de performances : chaque type d'objet de balisage possède une seule instance statique pour éviter d'allouer un objet supplémentaire à chaque vue). C'est pourquoi Assign
et Invoke
(voir ci-dessous) transmettent l'objet UI contenu dans l'objet de balisage à la logique, au lieu de l'objet de balisage lui-même.
Avec Assign
and Invoke
vous pouvez intégrer le balisage de l'interface utilisateur à la logique de l'interface utilisateur :
SearchPage.cs
:
SearchPage.logic.cs
:
SearchPage.cs
:
SearchPage.logic.cs
:
Note :
DansSearchPage.cs
,StackPanel
etTextBox
sont des types d'objets de balisage , tandis que
dansSearchPage.logic.cs
ce sont les types d'objets du framework d'interface utilisateur correspondants
Il n'existe pas (encore...) d'extension IDE de balisage C# pour coloriser correctement le balisage, mais la lisibilité du balisage C# peut être améliorée avec cette solution de contournement dans les options de Visual Studio :
Sous Fonts and Colors
, copiez la couleur des User Types - Classes
dans User Members - Methods
(avec le bouton Custom...
). Désormais, la couleur de balisage des vues et des propriétés ne sera plus la même.