Avalonia ui es un marco encantador al que quieres volver una y otra vez. Así que volvamos a él nuevamente y veamos algunas características junto con mi cuadro de mensaje.
Quien es Avalonia
Avalonia es un marco multiplataforma que le permite desarrollar interfaces gráficas en todas las plataformas relevantes.
En su estructura, está increíblemente cerca de wpf: xaml similar, aglutinantes similares. Incluso hay un
tutorial oficial para desarrolladores de wpf.
Avalonia es notable por el hecho de que en cada uno de los sistemas se refiere a las interfaces nativas: Win32, MonoMac, X11 ...
Lo que apareció en la versión actualizada- Admite 13 iconos de mensajes diferentes.
- Posibilidad de copiar el cuerpo del mensaje utilizando la combinación de teclas Cntrl + C.
- Ajuste del tamaño de la ventana a su contenido.
- Un sistema de estilo simplificado que permite a aquellos que desean unirse fácilmente en el desarrollo y soporte de otros nuevos.
- Reemplazando TextBlock con TextBox, ahora se puede seleccionar el texto en la ventana.
- La arquitectura en sí ha sido completamente rediseñada.
La documentación se puede encontrar en
gitlab .
El paquete en sí se puede descargar desde
nuget .
Hablemos de las características y chips de avalonia
Obviamente, si hay comparaciones, se comparará con wpf.
Lo primero que llama la atención después de ms frameworks es la capacidad de vincular comandos a métodos. Sí, funcionalmente esto ofrece menos oportunidades, pero en respuesta simplifica el enfoque para desarrollar un modelo de vista.
<Button Command="{Binding RunTheThing}" CommandParameter="Hello World"> Do the thing! </Button>
public void RunTheThing(string parameter) {
Avalonia también se construye utilizando extensiones reactivas, lo que le permite trabajar con eventos del marco como objetos de la primera clase utilizando la sintaxis declarativa de consultas LINQ, lo que le permite escribir código conciso y legible.
Pero yendo un poco más profundo, todo no se vuelve tan optimista y obvio, y la documentación aún no se ha traído a la mente (pero puede ayudar).
Enlace a la imagen
El problema que encontré casi inmediatamente al actualizar mi proyecto fue cómo mostrar imágenes en mi ventana.
En primer lugar, debe registrar un directorio con imágenes como recurso de Avalonia, porque es importante que cualquier usuario muestre los iconos y los empaquete convenientemente con todo el código.
<ItemGroup> ... <AvaloniaResource Include="Assets\*" /> </ItemGroup>
Ahora en la etiqueta de imagen puede configurar fácilmente la imagen seleccionada.
<Image Source="/Assets/error.ico" />
Pero cuando se usa vm Source, las imágenes no se pueden adjuntar simplemente a una cadena, sino que se debe usar Bitmap.
<Image Source="{Binding ImagePath}" />
public Bitmap ImagePath { get; private set; }
Y en consecuencia, ahora necesitamos extraer nuestra imagen de los recursos. ¿Por qué usar el localizador Avalonia?
ImagePath = new Bitmap(AvaloniaLocator.Current.GetService<IAssetLoader>() .Open(new Uri($" avares://ASSEMBLYNAME/relative/project/path/{ImageName}.ico")));
Vale la pena señalar que para los recursos integrados al compilar uri,
se usa el prefijo
resm: // , y para avalonia -
avares: // .
Dibujo
Las formas en avalonia y wpf son similares, pero las propiedades públicas son diferentes. Por lo tanto, descargando imágenes svg y convirtiéndolas usando mskam a ms xaml, no se pueden usar de inmediato.
Figura personalizada
<PathGeometry Figures="M30 53 C15.641 53 4 41.359 4 27S15.641 1 30 1s26 11.641 26 26c0 7.135-2.874 13.599-7.528 18.297" FillRule="NonZero"/>
Se convierte en:
<GeometryDrawing Brush="#FF50C8EF" Geometry="M30 53 C15.641 53 4 41.359 4 27S15.641 1 30 1s26 11.641 26 26c0 7.135-2.874 13.599-7.528 18.297" />
Una linea:
<Line X1="25" Y1="37" X2="25" Y2="39" StrokeThickness="2" Stroke="#FFFFFFFF" StrokeMiterLimit="10" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
Se convierte en:
<Line StartPoint="25,37" EndPoint="25,39" StrokeThickness="2" Stroke="#FFFFFFFF" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
Estilos
Sobre los estilos en sí se dice lo suficiente en la
documentación . Vale la pena señalar que estos son estilos familiares con un poco de CSS. Quería mostrar cómo aplicar el estilo desde un archivo separado. En primer lugar, todos los archivos xaml deben ser recursos de avalonia.
<ItemGroup> <AvaloniaResource Include="**\*.xaml"> <SubType>Designer</SubType> </AvaloniaResource> ..... </ItemGroup>
En segundo lugar, los estilos se aplican de la misma manera que los recursos de imagen usando uri y localizador.
YourControl.Styles.Add(new StyleInclude(new Uri("avares://ASSEMBLYNAME/relative/project/path.xaml")){Source = new Uri("avares://ASSEMBLYNAME/relative/project/path.xaml")});
Pequeñas cosas bonitas
TextBox tiene la propiedad Watermark. Esto le permite no buscar paquetes de terceros y no bloquear TextBlock encima de TextBox, que se puede leer en muchos tutoriales para wpf.
<TextBox Watermark="Street address" />
Y también todos los enlazadores usan PropertyChanged por defecto para activar la actualización de una propiedad relacionada.
En conclusión
Sugiero a todos que prueben este interesante marco. Gracias a los usuarios de
Artyom Gorchakov y
Nikita Tsukanov .
Y les recuerdo que avalonia tiene un apoyo acogedor y sorprendente en
Gitter .