Avalonia ui est un cadre délicieux auquel vous souhaitez revenir encore et encore. Revenons donc à nouveau et examinons certaines fonctionnalités avec ma boîte de message.
Qui est Avalonia?
Avalonia est un framework multiplateforme qui vous permet de développer des interfaces graphiques sur toutes les plateformes pertinentes.
Dans sa structure, il est incroyablement proche de wpf: xaml similaire, liants similaires. Il existe même un
tutoriel officiel pour les développeurs wpf.
Avalonia se distingue par le fait que sur chacun des systèmes il fait référence aux interfaces natives: Win32, MonoMac, X11 ...
Ce qui est apparu dans la version mise à jour- Prend en charge 13 icônes de message différentes.
- Possibilité de copier le corps du message à l'aide de la combinaison de touches Cntrl + C.
- Ajuster la taille de la fenêtre à son contenu.
- Un système de style simplifié qui permet à ceux qui souhaitent facilement participer au développement et au support de nouveaux.
- En remplaçant TextBlock par TextBox, maintenant le texte dans la fenêtre peut être sélectionné.
- L'architecture elle-même a été entièrement repensée.
La documentation peut être trouvée sur
gitlab .
Le package lui-même peut être téléchargé depuis
nuget .
Parlons des fonctionnalités et des puces avalonia
Évidemment, s'il y a des comparaisons, alors il sera comparé à wpf.
La première chose qui attire votre attention après les frameworks ms est la possibilité de lier des commandes à des méthodes. Oui, fonctionnellement, cela donne moins d'opportunités, mais en réponse simplifie l'approche de développement d'un modèle de vue.
<Button Command="{Binding RunTheThing}" CommandParameter="Hello World"> Do the thing! </Button>
public void RunTheThing(string parameter) {
Avalonia est également construit à l'aide d'extensions réactives, ce qui vous permet de travailler avec des événements du framework en tant qu'objets de la première classe en utilisant la syntaxe déclarative des requêtes LINQ - vous permettant d'écrire du code concis et lisible.
Mais en allant un peu plus loin, tout ne devient pas si rose et évident, et la documentation n'a pas encore été évoquée (mais vous pouvez aider).
Reliure à l'image
Le problème que j'ai rencontré presque immédiatement lors de la mise à jour de mon projet était de savoir comment afficher les images sur ma fenêtre.
Tout d'abord, vous devez enregistrer un répertoire avec des images en tant que ressource Avalonia, car il est important que tout utilisateur affiche des icônes et soit emballé avec tout le code.
<ItemGroup> ... <AvaloniaResource Include="Assets\*" /> </ItemGroup>
Maintenant, dans la balise d'image, vous pouvez facilement définir l'image sélectionnée.
<Image Source="/Assets/error.ico" />
Mais lorsque vous utilisez vm Source, les images ne peuvent pas être simplement attachées à une chaîne, mais Bitmap doit être utilisé.
<Image Source="{Binding ImagePath}" />
public Bitmap ImagePath { get; private set; }
Et en conséquence, nous devons maintenant extraire notre image des ressources. Pourquoi utiliser le localisateur Avalonia?
ImagePath = new Bitmap(AvaloniaLocator.Current.GetService<IAssetLoader>() .Open(new Uri($" avares://ASSEMBLYNAME/relative/project/path/{ImageName}.ico")));
Il convient de noter que pour les ressources intégrées lors de la compilation de uri, le préfixe
resm: // est utilisé , et pour avalonia -
avares: // .
Dessin
Les formes en avalonie et en wpf sont similaires, mais les propriétés publiques sont différentes. Par conséquent, le téléchargement d'images svg et leur conversion à l'aide de mskam en ms xaml ne pouvaient pas être utilisés immédiatement.
Personnage personnalisé
<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 transforme 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" />
Une ligne:
<Line X1="25" Y1="37" X2="25" Y2="39" StrokeThickness="2" Stroke="#FFFFFFFF" StrokeMiterLimit="10" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
Se transforme en:
<Line StartPoint="25,37" EndPoint="25,39" StrokeThickness="2" Stroke="#FFFFFFFF" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
Les styles
A propos des styles eux-mêmes est assez dit dans la
documentation . Il est à noter que ce sont des styles familiers avec un peu de CSS. Je voulais montrer comment appliquer le style à partir d'un fichier séparé. Tout d'abord, tous les fichiers xaml doivent être des ressources d'avalonia.
<ItemGroup> <AvaloniaResource Include="**\*.xaml"> <SubType>Designer</SubType> </AvaloniaResource> ..... </ItemGroup>
Deuxièmement, les styles sont appliqués de la même manière que les ressources d'image en utilisant uri et locator.
YourControl.Styles.Add(new StyleInclude(new Uri("avares://ASSEMBLYNAME/relative/project/path.xaml")){Source = new Uri("avares://ASSEMBLYNAME/relative/project/path.xaml")});
De jolies petites choses
TextBox a la propriété Watermark. Cela vous permet de ne pas rechercher de packages tiers et de ne pas bloquer TextBlock au-dessus de TextBox, qui peut être lu dans de nombreux didacticiels pour wpf.
<TextBox Watermark="Street address" />
Et tous les classeurs utilisent PropertyChanged par défaut pour déclencher la mise à jour d'une propriété associée.
En conclusion
Je suggère à tout le monde d'essayer ce cadre intéressant. Merci aux utilisateurs d'
Artyom Gorchakov et
Nikita Tsukanov .
Et je vous rappelle que l'avalonie a un soutien confortable et incroyable chez
Gitter .