AvaloniaUI: Funktionen am Beispiel der MessageBox

Avalonia ui ist ein entzückender Rahmen, zu dem Sie immer wieder zurückkehren möchten. Kehren wir also noch einmal zurück und sehen uns einige Funktionen zusammen mit meinem Meldungsfeld an.



Wer ist Avalonia?


Avalonia ist ein plattformübergreifendes Framework, mit dem Sie grafische Oberflächen auf allen relevanten Plattformen entwickeln können.

In seiner Struktur ist es unglaublich nah an wpf: ähnliche xaml, ähnliche Bindemittel. Es gibt sogar ein offizielles Tutorial für wpf-Entwickler.

Avalonia zeichnet sich dadurch aus, dass es sich auf jedem der Systeme auf die nativen Schnittstellen bezieht: Win32, MonoMac, X11 ...

Was erschien in der aktualisierten Version
  1. Unterstützt 13 verschiedene Nachrichtensymbole.
  2. Möglichkeit zum Kopieren des Nachrichtentexts mit der Tastenkombination Strg + C.
  3. Anpassen der Größe des Fensters an den Inhalt.
  4. Ein vereinfachtes Stilsystem, das es denjenigen ermöglicht, die sich einfach an der Entwicklung und Unterstützung neuer beteiligen möchten.
  5. Durch Ersetzen von TextBlock durch TextBox kann nun der Text im Fenster ausgewählt werden.
  6. Die Architektur selbst wurde komplett neu gestaltet.



Die Dokumentation finden Sie auf gitlab .

Das Paket selbst kann von nuget heruntergeladen werden .

Lassen Sie uns über die Funktionen und Chips Avalonia sprechen


Wenn es Vergleiche gibt, wird es natürlich mit wpf verglichen.

Das erste, was nach ms-Frameworks auffällt, ist die Fähigkeit, Befehle an Methoden zu binden. Ja, funktionell bietet dies weniger Möglichkeiten, vereinfacht jedoch als Reaktion den Ansatz zur Entwicklung eines Ansichtsmodells.

<Button Command="{Binding RunTheThing}" CommandParameter="Hello World"> Do the thing! </Button> 

 public void RunTheThing(string parameter) { // Code for executing the command here. } 

Avalonia wird auch mit reaktiven Erweiterungen erstellt, mit denen Sie mit Ereignissen des Frameworks als Objekte der ersten Klasse mithilfe der deklarativen Syntax von LINQ-Abfragen arbeiten können. So können Sie präzisen und lesbaren Code schreiben.

Wenn Sie jedoch etwas tiefer gehen, wird nicht alles so rosig und offensichtlich, und die Dokumentation wurde noch nicht in Erinnerung gerufen (aber Sie können helfen).

Bindung an Bild


Das Problem, auf das ich beim Aktualisieren meines Projekts fast sofort stieß, war das Anzeigen von Bildern in meinem Fenster.

Zunächst müssen Sie ein Verzeichnis mit Bildern als Avalonia-Ressource registrieren, da es wichtig ist, dass jeder Benutzer die Symbole anzeigt und sie bequem mit dem gesamten Code verpackt.

  <ItemGroup> ... <AvaloniaResource Include="Assets\*" /> </ItemGroup> 

Jetzt können Sie im Bild-Tag das ausgewählte Bild einfach einstellen.

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

Bei Verwendung von vm Source können Bilder jedoch nicht einfach an eine Zeichenfolge angehängt werden, sondern es muss Bitmap verwendet werden.

 <Image Source="{Binding ImagePath}" /> 

  public Bitmap ImagePath { get; private set; } 

Und dementsprechend müssen wir jetzt unser Image aus den Ressourcen extrahieren. Warum den Avalonia Locator verwenden?

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

Es ist erwähnenswert, dass für eingebettete Ressourcen beim Kompilieren von uri das Präfix resm: // und für avalonia - avares: // verwendet wird .

Zeichnen


Die Formen in Avalonia und wpf sind ähnlich, aber die öffentlichen Eigenschaften sind unterschiedlich. Daher konnten SVG-Bilder, die mit mskam in ms xaml konvertiert und konvertiert wurden, nicht sofort verwendet werden.

Benutzerdefinierte Figur

 <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"/> 

Wird zu:

 <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" /> 

Eine Zeile:

 <Line X1="25" Y1="37" X2="25" Y2="39" StrokeThickness="2" Stroke="#FFFFFFFF" StrokeMiterLimit="10" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/> 

Wird zu:

 <Line StartPoint="25,37" EndPoint="25,39" StrokeThickness="2" Stroke="#FFFFFFFF" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/> 

Stile


Über die Stile selbst wird in der Dokumentation genug gesagt. Es ist erwähnenswert, dass dies vertraute Stile mit ein wenig CSS sind. Ich wollte zeigen, wie man den Stil aus einer separaten Datei anwendet. Erstens müssen alle xaml-Dateien Avalonia-Ressourcen sein.

 <ItemGroup> <AvaloniaResource Include="**\*.xaml"> <SubType>Designer</SubType> </AvaloniaResource> ..... </ItemGroup> 

Zweitens werden Stile auf dieselbe Weise wie Bildressourcen mit uri und locator angewendet.

 YourControl.Styles.Add(new StyleInclude(new Uri("avares://ASSEMBLYNAME/relative/project/path.xaml")){Source = new Uri("avares://ASSEMBLYNAME/relative/project/path.xaml")}); 

Schöne kleine Dinge


TextBox hat die Watermark-Eigenschaft. Auf diese Weise können Sie nicht nach Paketen von Drittanbietern suchen und TextBlock nicht über TextBox blockieren, was in vielen Tutorials für wpf gelesen werden kann.

 <TextBox Watermark="Street address" /> 

Außerdem verwenden alle Ordner standardmäßig PropertyChanged, um die Aktualisierung einer verwandten Eigenschaft auszulösen.

Abschließend


Ich empfehle jedem, diesen interessanten Rahmen auszuprobieren. Vielen Dank an die Benutzer von Artyom Gorchakov und Nikita Tsukanov .

Und ich erinnere Sie daran, dass Avalonia bei Gitter eine gemütliche und erstaunliche Unterstützung hat.

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


All Articles