Marcado C# conciso de próxima generación para marcos de interfaz de usuario .NET
C# Markup 2 admite múltiples marcos de interfaz de usuario, incluida la excelente plataforma Uno.
Si no conoces Uno, te recomiendo que los consultes; Uno es uno de los mejores y más maduros marcos de interfaz de usuario .NET, ofrece una impresionante variedad de características que lo respaldarán cuando necesite crear aplicaciones de producción del mundo real de extremo a extremo, de forma rápida .
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 es compatible con XAML, pero recientemente ha adoptado también la interfaz de usuario de C# con Uno C# Markup. C# Markup 2 agrega otra opción que va más allá de lo que ofrecen las variantes gen-1 de C# Markup.
Es bueno tener opciones: todos ganan: los desarrolladores obtienen la experiencia que más les gusta y el marco de la interfaz de usuario obtiene una mayor adopción. ¡Compruébalo y elige lo que más te guste!
Como primera impresión, aquí hay una rápida comparación lado a lado:
Disfrute de una experiencia de desarrollo de UI similar a Flutter con C# Markup 2:
new
, HorizontalAlignment = HorizontalAlignment.Center
, () =>
o nameof()
, no más especificaciones para todos y cada uno de los enlaces TextBlock
que sí, desea enlazar a la propiedad Text
...MyPage.cs
, consulte el marco de la interfaz de usuario y otras API mientras edita MyPage.logic.cs
.No se requiere XAML/HTML/JavaScript/CSS. Sin motor ni capas que se interpongan en tu camino.
NuGet
Chat (si es necesario, únete primero a DotNetEvolution)
¡El mejor lugar para hacer preguntas o ayudar!
¿Busca el marcado C# 1? Encuéntralo aquí
7 de mayo de 2024
Nuevo C# Markup 2.4 para Uno Platform 5.2, incluido .NET Single Project
¡La versión de hoy está completamente actualizada a Uno 5.2, incluido el proyecto único .NET de Uno y uno.sdk
!
Más:
dotnet new unoapp
más reciente.21 de diciembre de 2023
Nuevas plantillas de C# Markup 2 para Uno Platform 5
Además de algunos métodos nuevos de C# Markup 2, el lanzamiento de hoy agrega soporte para las nuevas plantillas de C# Markup 2 para Uno Platform 5: una plantilla mcs-uno-markup2
actualizada y una nueva plantilla mcs-uno-view
.
dotnet new unoapp
de Uno o con el asistente de soluciones Uno para Visual Studio.mcs-uno-view
es utilizada por el conveniente script New-View.ps1
, que se incluye en mcs-uno-markup2
18 de noviembre de 2023
La versión 2.3 es GA: ¡agrega soporte para .NET 8, Uno 5 más 5 bibliotecas Uno!
Esta versión está completamente actualizada a la increíble versión Uno 5 y .NET 8 GA. Puede utilizar el Asistente de solución Uno para Visual Studio y agregarle un proyecto de C# Markup 2 en cualquier momento con un solo comando. Se admiten todas las personalizaciones del asistente Uno: combine C# Markup 2 con MVUX o MVVM, XAML o Uno C# Markup, use extensiones de navegación Uno y apunte a .NET 8 o .NET 7. Todas las plataformas de destino Uno son compatibles.
Una nueva plantilla de proyecto C# Markup 2 de dotnet lo pone en marcha en poco tiempo, cuidadosamente optimizada para una experiencia de desarrollador óptima: vista ordenada del explorador de soluciones, agrupación automática de archivos de marcado y lógicos, fuente de marcado ordenada, intellisense enfocado, puntos de partida claros para extensiones de marcado en su código, además de recarga rápida en caliente, tanto automática como con un botón de recarga en caliente superpuesto en modo de depuración, para las plataformas en las que su IDE puede recargar en caliente pero no puede (todavía) actualizar la interfaz de usuario automáticamente.
Disfrute de las mejoras generales de C# Markup 2, además de las API de C# Markup 2 para 5 bibliotecas Uno adicionales:
ThemeResource
se pueden buscar en C# intellisense, fuertemente tipadosEl Getting Started está totalmente actualizado. Los ejemplos de este repositorio y este archivo Léame se actualizarán pronto para mostrar las nuevas funciones.
NJoy marcado C# conciso !
1 de noviembre de 2023
¡La versión preliminar 2.3 agrega 5 bibliotecas Uno!
Disfrute de las mejoras generales de C# Markup 2, además de las API de C# Markup 2 para 5 bibliotecas Uno adicionales:
ThemeResource
se pueden buscar en C# intellisense, fuertemente tipadosPuede probar esto hoy; consulte los NuGets enumerados anteriormente. La próxima versión incluirá documentación de las nuevas funciones y una nueva guía de introducción, ¡pronto!
27 de junio de 2023
2.2 Lanzamiento e inicio del soporte para .NET MAUI
25 de marzo de 2023
¡Los resultados de la encuesta están disponibles! Y el ganador es...
¡Ya tenemos los resultados de la encuesta de marzo de 2023 sobre qué compilar a continuación para C# Markup 2!
Una adición sorpresa fue la solicitud de C# Markup 2 para la interfaz de usuario de Avalonia en las respuestas; obtuvo una gran respuesta que lo catapultó a un segundo lugar muy cercano.
Estos son los resultados de la encuesta, incluidos los Me gusta de las opciones "Otras" Blazor y AvaloniaUI:
Y el ganador es: ¡C# Markup 2 para MAUI !
Mire y destaque este repositorio para ver el lanzamiento; También puede ver los tweets #CSharpForMarkup para conocer el progreso. ¡Gracias por tu respuesta!
28 de febrero de 2023
Lanzamiento principal: ¡C# Markup 2 versión 2.0 para WinUI 3!
¡C# Markup 2 versión 2.0 para WinUI 3 ya está aquí! Completamente actualizado a .NET 7, C# 11 y el último SDK de aplicaciones de Windows y la plataforma Uno. Con muchas mejoras, incluidas 6 plataformas de destino compatibles, compatibilidad con recarga en caliente de C# y nuevas plantillas de proyectos dotnet.
Presentado por Applicita
Un agradecimiento especial a Applicita por hacer posible este lanzamiento; Es inspirador ver una empresa que admita OSS de esta manera (Applicita también abre varias otras bibliotecas útiles)
Más información sobre las novedades de esta versión aquí.
16 de febrero de 2023
Una nueva versión de C# Markup 2 para WinUI 3 y Uno Platform llegará en febrero de 2023
Actualizado a .NET 7, C# 11 y el último SDK de aplicaciones de Windows y la plataforma Uno. Con muchas mejoras, incluida la compatibilidad con recarga en caliente de C# y una nueva plantilla de proyecto dotnet. ¡Mira este espacio!
14 de abril de 2022
Nueva versión 0.8: ¡agrega compatibilidad
ControlTemplate
y mejorasStyle
!
Consulte aquí y aquí para obtener la lista completa de mejoras.
15 de febrero de 2022
Nueva versión 0.6: ¡agrega WPF y muchas mejoras!
Consulte aquí para obtener la lista completa de mejoras.
30 de noviembre de 2021
¡C# Markup 2 anunciado en UNOCONF 2021!
Esta primera vista previa está dirigida a WinUI 3 y la plataforma Uno, incluido el ensamblaje web del navegador, con C# 10 y .NET 6. Es compatible con .NET Hot Reload para un bucle de desarrollo interno rápido.
Vea el anuncio de C# Markup 2 en UNOCONF 2021:
Build()
, Assign()
e Invoke()
.Primero verifique si su entorno de desarrollo está listo:
Elija una solución Uno Platform 5.2 existente o cree una nueva con el Asistente de plantillas de Uno Platform o la nueva plantilla dotnet unoapp. Siéntase libre de seleccionar cualquier opción; C# Markup 2 es totalmente compatible con Uno 5.2 con .NET 8 o .NET 7, MVUX o MVVM, XAML o Uno C# Markup, en todas las plataformas de destino.
Instale las últimas Modern.CSharp.Templates para dotnet new
para obtener estas plantillas para Windows App SDK, Uno Platform y más
dotnet new install Modern.CSharp.Templates
Para ver ayuda sobre los parámetros de la plantilla:
dotnet new mcs-uno-markup2 -h
Agregue un proyecto C# Markup 2 a la solución Uno Platform, por ejemplo:
cd C:ReposUnoApp1
dotnet new mcs-uno-markup2 --appRootNamespace InnoWvate.UnoApp1 --presentation mvux --allow-scripts Yes
Esto:
Agregue un nuevo proyecto UnoApp1.Presentation
a la solución, con un ejemplo práctico:
New-View.ps1
para agregar rápidamente más páginas y modelosReadme.md
con instrucciones sobre cómo empezar rápidamenteEl proyecto de presentación está preestructurado para facilitar el mantenimiento de acuerdo con las mejores prácticas para la interfaz de usuario de marcado de C#.
Agregue referencias de paquetes NuGet al proyecto de presentación
Agregar una referencia al proyecto de Presentación en el proyecto UnoApp1
Tenga en cuenta que puede usar el parámetro --name
de dotnet new
para especificar el nombre de su proyecto Uno existente , si difiere del nombre de la carpeta de la solución (en el ejemplo anterior, UnoApp1
). El nombre especificado también se utilizará con el sufijo .Presentation
para el nuevo proyecto.
Abra o vuelva a cargar la solución Uno y siga los pasos en el Readme.md
del proyecto de presentación para comenzar.
Para aprender a utilizar C# Markup 2, lea la descripción de las funciones a continuación.
Para ver un ejemplo más completo, consulte la aplicación de ejemplo en este repositorio.
C# Markup 2 contiene una API fluida y declarativa completa para marcos de interfaz de usuario existentes. Muestra prácticamente todos los diseños, vistas y propiedades, incluidas las propiedades adjuntas, e incluye documentación en línea completa que vincula cada parámetro/ayudante de marcado con la documentación en línea para el objeto/propiedad de la interfaz de usuario subyacente.
Los ricos marcos de UI que presenta C# Markup 2 pueden contener hasta más de 500 tipos de objetos de UI . Por ejemplo, diseños, vistas y estilos, pero también pinceles, elementos de texto enriquecido, primitivos de dibujo, transformaciones, animaciones, estados visuales y más. Además, C# Markup ofrece API potentes y concisas para diseño, enlaces, convertidores, plantillas y más.
Los diseños, vistas, propiedades y valores de propiedad se ven así:
Todas las propiedades se pueden configurar con métodos de extensión: propiedades definidas en el tipo de vista o sus tipos base, así como propiedades adjuntas.
Las propiedades que se definen directamente en el tipo de vista también se pueden configurar con parámetros con nombre:
Esto es principalmente útil para propiedades que toman tipos primitivos.
Las propiedades que toman valores de enumeración tienen métodos de extensión, por lo que no es necesario repetir el nombre de enumeración.
(como en TextAlignment: TextAlignment.Center
):
Los nombres de las propiedades adjuntas tienen el prefijo del tipo de definición más un guión bajo:
Puede establecer varios valores de propiedad adjuntos para el mismo tipo de definición en una sola llamada :
Además de esto, existen sobrecargas convenientes para algunos tipos de vistas con solo los parámetros más utilizados:
Se proporcionan convertidores implícitos en el subespacio to
nombres para tipos de valores de propiedad comunes:
Estos son:
string
, según lo especificado por el marco de la interfaz de usuario con el atributo TypeConverterstring
, incluidas tuplas si se espera más de un valor. P.ej: Button() .CornerRadius (2.5)
oButton() .CornerRadius ((2.5, 0, 2.5, 0))
Un ejemplo usando to.Point
:
Button ( ) . Background ( RadialGradientBrush ( Center : ( 50 , 50 ) , GradientOrigin : ( 100 , 50 ) ) )
Un ejemplo usando to.TimeSpan
y to.Duration
:
ColorAnimation ( BeginTime : " 0:0:5 " , Duration : 2.5 )
En muchos casos, la documentación en línea en to.
tipo describe los valores y el formato admitidos; especialmente en el caso de cadenas, esto puede evitar conjeturas.
Los estilos se pueden asignar así:
Y definido así:
En WPF puede vincular un valor de establecimiento de estilo (WinUI 3 no lo admite):
Se pasa un DataTemplate
como Func
:
Se puede crear una ControlTemplate
así:
.BindTemplate()
le permite vincular propiedades de plantilla al padre con plantillatargetType
es opcionalb
aquí hay un campo static UI_Button
de valor nulo. En este ejemplo, solo sirve para demostrar una forma de obtener inteligencia al editar expresiones vinculantes para un Button
; consulte Poder vinculante para obtener más detalles. Así es como puedes usar un ControlTemplate
en un Style
implícito o explícito:
Puede utilizar enumeraciones en lugar de números para las filas y columnas de la cuadrícula. Esto mejora la legibilidad y le evita tener que volver a numerar filas y columnas manualmente al agregarlas, eliminarlas o reordenarlas.
Los ayudantes taquigráficos se incluyen como alternativa a las combinaciones comunes de ayudantes de marcado:
Todos los diseños ignoran los valores null
en sus children
; esto hace posible tener vistas condicionales dependiendo del valor de una expresión en el momento de (re)construcción de la página.
El asistente Spread
permite insertar un número variable de niños en una posición específica en la lista children
(similar a lo que ofrece Flutter).
Gracias al atributo CallerArgumentExpression de C# 10, no es necesario utilizar cadenas o nameof()
para especificar rutas de enlace con buen rendimiento . En su lugar, puede utilizar expresiones de C# y disfrutar de todas las bondades que aportan: intellisense completo, compilador comprobado, soporte para cambio de nombre:
Tenga en cuenta en la descripción de Intellisense en la imagen de arriba que el parámetro pathExpression
admite varias sintaxis de enlace convenientes , lo que permite:
viewmodel.path
|| (viewmodel expression).path
, donde path
puede contener .
p.ej:.Bind (vm.SelectedTweet)
se vincula a "SelectedTweet".Bind ((vm.SelectedTweet).Title)
se vincula a "Título".Bind ((vm.SelectedTweet).Author.Name)
se vincula a "Author.Name"?
con instancias de tipo con valor nulo para disfrutar de las bondades de C# sin necesidad de instancias de objetos, por ejemplo:.Bind (vm?.SelectedTweet?.Title)
se vincula a "Título"?
puede ser necesario porque la expresión será evaluada en tiempo de ejecución, aunque no nos importe su valor; el atributo CallerArgumentExpression proporciona una cadena de expresión además del valor de la expresión..Bind ("SelectedTweet")
se vincula a "SelectedTweet" Se ignoran los caracteres "
, @
o espacios en blanco circundantes en pathExpression
Bind
admite casi todas las funciones que ofrece el marco de la interfaz de usuario para el enlace. Además, existen muchas sobrecargas Bind
que permiten:
Una página de marcado típica comienza así:
FlutterPage.cs
:
using CSharpMarkup . < UI framework name > ;
using static CSharpMarkup . < UI framework name > . Helpers ;
namespace Examples ;
partial class FlutterPage
{
public void Build ( ) => Content =
Tenga en cuenta el uso de partial class
; esto le permite separar el marcado de la interfaz de usuario de la lógica de la interfaz de usuario :
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 ( ) ;
IMPORTANTE:
En archivos de marcado C# como
:
Incluya los usos del espacio de nombres CSharpMarkup.*
pero no los usos del modelo de objetos de la interfaz de usuario, como using Microsoft.UI.Xaml;
(por diseño, los nombres de los tipos en el espacio de nombres CSharpMarkup son idénticos a los nombres de los tipos en el modelo de objetos de la interfaz de usuario, por lo que incluir ambos causaría ambigüedades)
Intente limitar el uso del modelo de objetos de la interfaz de usuario a archivos lógicos de la interfaz de usuario. Si es necesario, puede utilizar el modelo de objetos de la interfaz de usuario de forma segura en archivos de marcado C#; una buena práctica entonces es definir el espacio de nombres global usando alias, por ejemplo, global using UI = Microsoft.UI;
Para obtener más orientación, consulte los comentarios en GlobalUsings.cs
de un proyecto creado con dotnet new mcs-uno-markup2
.
En archivos lógicos de UI como
:
No utilice objetos CSharpMarkup
No es seguro usar instancias de objetos de marcado fuera de una expresión de marcado (debido a características de rendimiento: cada tipo de objeto de marcado tiene una única instancia estática para evitar la asignación de un objeto adicional para cada vista). Es por eso que Assign
and Invoke
(ver más abajo) pasa el objeto UI contenido en el objeto de marcado a la lógica, en lugar del objeto de marcado en sí.
Con Assign
and Invoke
puede integrar el marcado de la interfaz de usuario con la lógica de la interfaz de usuario:
SearchPage.cs
:
SearchPage.logic.cs
:
SearchPage.cs
:
SearchPage.logic.cs
:
Nota :
EnSearchPage.cs
,StackPanel
yTextBox
son tipos de objetos de marcado , mientras que
enSearchPage.logic.cs
son los tipos de objetos del marco de interfaz de usuario correspondientes
No existe una extensión IDE de marcado de C# (todavía...) para colorear correctamente el marcado; sin embargo, la legibilidad del marcado de C# se puede mejorar con esta solución alternativa en las opciones de Visual Studio:
En Fonts and Colors
, copie el color de User Types - Classes
a User Members - Methods
(con el botón Custom...
). Ahora el color de marcado para vistas y propiedades ya no será el mismo.