AvaloniaUI cuenta con el cuadro de mensaje personalizado

Avalonia ui es un marco encantador al que desea volver una y otra vez. Así que volvamos a él nuevamente y veamos algunas de las características con mi cuadro de mensaje.



Quien es Avalonia


Avalonia es un marco multiplataforma que le permite desarrollar interfaces gráficas en todas las plataformas actuales.

En su estructura, está increíblemente cerca de wpf: xaml similar, enlace similar. Incluso hay un tutorial oficial para desarrolladores de wpf.

Avaloniya también destaca por el hecho de que en cada uno de los sistemas accede a sus interfaces nativas: Win32, MonoMac, X11 ...

Lo que apareció en la versión actualizada
  1. Soporte para 13 iconos de mensajes diferentes.
  2. Posibilidad de copiar el cuerpo del mensaje utilizando la combinación de teclas Cntrl + C.
  3. Ajuste el tamaño de la ventana a su contenido.
  4. Un sistema de estilo simplificado que permite a cualquiera involucrarse fácilmente en el desarrollo y soporte de otros nuevos.
  5. Reemplazando TextBlock con TextBox, ahora se puede seleccionar el texto en la ventana.
  6. 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.


Obviamente, si hay comparaciones, se comparará con wpf.

Lo primero que llama la atención después de los marcos de ms es la capacidad de vincular comandos a métodos. Sí, funcionalmente 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) { // Code for executing the command here. } 

Avaloniya también se construye utilizando extensiones reactivas, que permiten trabajar con eventos de marco como con objetos de primera clase utilizando la sintaxis de consulta declarativa LINQ, lo que le permite escribir un 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 me ha recordado (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.

Primero debe registrar un directorio con imágenes como recurso de avalonia porque es importante que los iconos se muestren en cualquier usuario y estén convenientemente empaquetados con todo el código.
  <ItemGroup> ... <AvaloniaResource Include = "Assets \ *" /> </ ItemGroup> 

Ahora puede configurar fácilmente la imagen seleccionada en la etiqueta de imagen.

  <Image Source = "/ Assets / error.ico" /> 


Pero cuando se usa vm Source, las imágenes no se pueden canalizar 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. Lo que necesitas para usar el localizador avalonia.

  ImagePath = new Bitmap (AvaloniaLocator.Current.GetService <IAssetLoader> () .Open (new Uri ($ "avares: // ASSEMBLYNAME / relative / project / path / {ImageName} .ico"))); 

Cabe señalar que para los recursos integrados al compilar uri, se usa el prefijo resm: // , y para avalonia - avares: // .

Dibujo


Las cifras en avalonia y wpf son similares, pero las propiedades públicas son diferentes. Por lo tanto, después de descargar imágenes svg y convertirlas en ms xaml usando inskape, no se pudo acceder a ellas de inmediato.

Forma arbitraria

  <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


Los estilos mismos están suficientemente descritos en la documentación .

Vale la pena señalar que estos son estilos familiares con una pequeña mezcla de CSS.

Quería mostrar cómo aplicar el estilo desde un archivo separado.

Primero, todos los archivos xaml deben ser recursos avalonianos.

  <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 propiedad de marca de agua

Eso permite no buscar paquetes de terceros y no cerrar TextBlock encima de TextBox, que se puede leer en muchos tutoriales para wpf.

  <TextBox Watermark = "Street address" /> 

Además, todo el enlace predeterminado utiliza PropertyChanged para activar la actualización de la propiedad asociada.

En conclusión


Sugiero a todos que prueben este interesante marco.

Gracias a los usuarios Artyom Gorchakov y Nikita Tsukanov .

Y les recuerdo que avalonia tiene un apoyo acogedor y sorprendente en Gitter .

Source: https://habr.com/ru/post/457116/


All Articles