Building Engaging Cross Platform Applications using Rider and Avalonia

all right all right welcome everyone today we have another webinar and the topic for today is building engaging cross-platform applications using ryden avalonia and we have dan wemsley and mike james as a guest today but before we start into that uh first things first uh if you have any questions during the webinar feel free to post them in the chat we will probably address them right afterwards or uh since we have two guests a day maybe they can already answer that in the chat when we're switching also if at any point you have to drop out feel free to to continue watching right afterwards we will publish the recordings uh with another blog post also to make everyone uh know and with that said uh i would like to introduce my two guests let's bring on dan and mike so hi hi you too hey how are you very well hello how are you so i've heard a lot of things about avalonia um i'm i'm typically not by myself not a ui guy but i gotta say i'm really jealous about the popularity of avalonia so it's seems like a really great open source project which is quite quite popular right yeah in the the last few years it's grown enormously there's you know in the beginning there was just a few of us and now there's so many people involved in the community yeah for how long are you both uh are with the team for how long are you remember uh yeah with the team of avalonia no i'm not i'm not even going mike okay i say dan first uh i've been involved with avalonia for over six years since the early days dan's a real pro and i'm just an amateur i'm i'm not part of the avalonia team per se but i've been using it and falling in love with it for seriously for about a year now but i kind of looked at it off and on before that as well okay are you both using it actually uh during your your job also or is it plainly just a hobby yeah so i i use it um in my work i lead the ui team on wasabi wallet and they use avalonia for that so i uh we use avalonia there and they've been using it for about two and a half three years now okay and i'm using it'll work but i haven't shipped anything to production uh just yet uh but i also i also use it in my spare time so it's kind of it's my go-to framework at the moment for building anything yeah so it sounds really great okay uh so with that said uh i think it's show time right as far as i know uh dan wants to go first and then somewhere in the middle we switch over to mike so let me first remove mic now we will add a dance screen where is it here is it this one then yeah that's the right one and i would disappear as well and it's your stage have fun everyone thank you matthias uh hello everyone so i'll tell you a little bit about avalonia first for the people that have not come across abalone before um so firstly i've been uh involved in avalonia for over five years and i've also worked with other c-sharp and xaml based cross platform technologies for the last 10 years i'm one of the first contributors to avalonia and i've also helped several projects and companies adopt avalonia and as i said earlier on i lead the ui dev team for wasabi wallet which uses avalonia as its ui technology so what is avalonia exactly avalonia is a cross-platform xaml based ui framework4.net so we support net framework.netcore mono.net 5 so basically every flavor of net and and what does that mean that means that avolonia can run on any device or any place where you can run.net avalonia also has a familiar xaml dialect that wpf developers and uwp developers will be they it will feel familiar and you'll feel at home adopting avalonia you can use abalone to target windows linux and mac os and avalonia is production ready it's also very suited to embedded and iot applications we run on raspberry pi and those kind of technologies we can use as little as a frame buffer to render to and we also have mobile platforms coming shortly avalonia is also a big open source community so there's many people out there to answer your questions give you support um a lot going on there it's a dependable platform in that um the [Music] the software is at it's got to the point where it's highly tested we um we have api checks so our api is now stable and we're an evolving platform so um we're bringing new features adding new platforms as time goes uh ahead so i'll just tell you a little bit about how avalonia actually works so another lonelier application um your application code is made up of xaml and c-sharp and this is like the shared code that you build for your application um avalonia uses skier to do the actual rendering of the of your application and we have separate um windowing system back ends for x11 on linux uh cocoa osx and win32 on windows um another important aspect of avalonia is we have cross-platform development so it doesn't matter if you use linux or mac or windows you're going to find first-class development tools to develop avalonia applications the very best experience is available through jetbrains rider and also using resharper there are obviously other ids available as well jetbrains have made a huge effort to integrate avalonia support into rider which gives you refactoring tools and debugging tools for the xaml and there's also a previewer which you will see in the demo why would you use avalonia so you probably would have a application that you need to be cross-platform these days it's very important people are not tied to a particular operating system anymore and more and more applications need to be cross-platform um avalonia is particularly good if you already have an application that was based on wpf or you have experience in wpf uh avalonia is very very similar to wpf in its syntax and how it works you need a reliable platform and you need something that's available now the type of ui framework that avalonia is is um i refer to as a pixel perfect ui framework so um you may have seen applications like slack that have a uh like a branding um a look and feel throughout the application those kind of applications uh avalonia is very suited to where you need it to look exactly the same on every platform as you're sharing the the ui is shared on all platform or platforms uh because it's net code it's basically native it's performant um your application is not sandbox so it can just make calls into the operating system so it's very easy to to integrate and also the one of the biggest uh advantages of using avalonia is um you need a cross-platform application but you only want to maintain a single code base so many cross-class cross-platform applications you may have be having to maintain different new um uis or different front ends for mac uh windows and linux with avalonia we can you can get that down to just a single code base for for the whole ui and most importantly avalonia is now trusted by industry leaders who are now selecting and using it for for their products um for example jetbrains um so jetbrains one of their engineers has quoted that we've been considering making our standalone profilers4.net cross-platform for some time and we've been actively looking for a ui framework to use as our tools used wpf avalonia was an easy choice for us it is an impressive technology which has seen tremendous growth in recent years and it feels mature enough to be used for production code we greatly appreciate the quick and helpful support we have had from the avalonia developers who have addressed our questions okay so um demo time so i'll give a demonstration that i'll show you how to set up an abalone project and ride how to create a modern looking window we'll show you how to display some list of items in the ui and update them adding items and at runtime and later mike will show creating some custom controls okay so once you have rider installed and you launch it you get to the welcome screen if you click on the first thing is we should install the preview which at the moment comes as a separate plugin and i will very quickly show you how to do that so if you click on this configure and click on plugins what we need to do is press on this settings and manage plugin repositories i'll just find the uh there's a url that we have to paste in here and by the way all of the steps for this demo are available on uh on the avalonia website so this this url you can get there i'll show you [Music] when you get to avalonia ui.net you click on the documentation and if you click on this advanced tutorial this has all the steps um for the demonstration that i'm doing now so this will go into even more detail than i'll have time to to cover um and this is where you can find all the this this url that you need to paste in here okay so we've pasted put the url in now we can click on the marketplace and we can search for avalonia and you can see avalonia rider so we just press install and then restart ide okay so while that's restarting one of the other steps that you will need to take is to install the avalonia templates you can do this by typing the net new dash i avalonia dot templates and then press enter this will take a few seconds okay that's done so you can see that it successfully installed some avalonia templates uh we don't need to do a terminal anymore um we can close that okay so if we press the new solution button you can find down at the the bot this list on the left you can find right down the day at the bottom there's an option for an avalonia.net core mvvm app we can change the name here i'm going to change it to avalonia dot music store and press create by the way there the application that um that i'll be demonstrating on how to build some parts of this is uh like a damaged a demo music store where the user can open a dialog they can search it'll search their itunes api for album covers they can select an album cover and then add it to their own collection as if they were kind of buying music in a music store okay so once ryder has created our project for us you can see that there's view models and views with xaml all the kind of [Music] stuff that you'll be familiar with if you're familiar with xaml and nvvm development you can see we can just press the debug button up here and the project will build and you can see we now have a window with welcome to avalonia and there the other is obviously the other the window is a little bit basic if you see the kind of window we want to to get to so i'll show you how to do that so the first thing that we can do is we can change the theme from light mode to dark mode you can see in the app.xaml fluent theme mode equals light we can change this to dark and if we open the main window xaml file one of the first things that we can do is we can enable uh the window to blur what is behind the window um to allow us to give the what what a lot of people call the acrylic effect that modern applications have we can do this by setting the background of the window to transparent and we can also set the property transparency level hint to acrylic blur if you run the with the program now you'll see that the the window now has this blurring effect um however if you would put controls on this um it could become difficult to read what was in your window um depending on on the the color of your text if you had white text in there and somebody puts it on a very light background they wouldn't be able to read the text anymore so what we can do is we can put in some acrylic material inside the window which we can apply a tint to so we can use this acrylic border control i'll put this all inside a panel actually so we can you can see that as i'm coding um ryder is giving me all the intelligent intelligence suggestions that i would expect so okay you can see that this acrylic material i'm setting the background source to digger this means whichever level it is on the ui it will dig down to that blur that's on the window behind to give the the acrylic blur effect it's going to use a tint color of black and the tinto opacity is how much of that black is applied to the to the acrylic material and then this material opacity of 0.65 is how transparent the overall material is so if we uh run this now you can see now that we have a window and you can just see what's behind there's the the blurry effect and um it may not be too visible on the stream but the there is actually a very slight uh texture on the the surface of the material although it would be nice if i could get this uh the title bar to blend in and also be uh the same uh as the as the main window so how we do that in avalonia is on the window we can set the extend client area to decorations hint equals true and this means that all of the content of the window is rendered edge to edge from there throughout their title bar so if you've got an application um a bit like uh the modern web browsers where you tend to have tabs into the title bar by enabling that property it will label enable you to render right into the title bar so we've got a nice modern window okay so i'll quickly show you how we can add some content into the window so we can add a button that the users will be able to click on and this button will open the dialog to allow them to purchase some music so we can set the button content to buy music you can see that as i change the the xaml the previewer updates instantly so i can see the the effect that the xml is going to have so if i if i set the horizontal alignment to top sorry the vertical alignment to the top you can see that it moves the deep button right up to the the top and set the vertical sorry horizontal alignment to the right see now it's gone to the top right of the window um so we can we don't i just have to put text inside the the buttons we can actually put icons um there's a link in the um in the documentation that i that i showed you before that shows you where to get icons from i'll show you in a second so all of the microsoft fluent icons are available here on avalonia dot get up to io forward slash icons.html so we can search for an icon that we like so probably something to do with store for buying and we can choose this one so we can simply copy this stream geometry here and we actually need a an icons file where we can we can store these so i'll right click on the project and add an avalonia styles and we'll give this the name sum icons.xml okay and then we can simply type a style and we can paste the icon that we got from the web page this is just normal svg path data so you can you can make a path icons from from anywhere and you can see it has a key so we can we can copy that if we go back to our main window and the button if we remove the text content there in avalonia you can use the path icon control and we can use static resource and simply paste the key name for the icon that we want to use okay so at the moment it will not find the icon and the reason for this is because we need to return to the app.xaml and we need to add a reference so that it can find our icons file that uh that rider was able to create for us so i can go style include source equals ava res that's for avalonia resource okay what you'll find is that when new files are added to the projects you have to build the project for the previewer to pick the changes up so i'll tell it to build a startup project now and with any luck we will see our icon inside our button there we go so we've got a nice nice looking button now okay so i'm going to skip ahead a few stages if you are new to avalonia or mvvm development you'll find all of the the next steps on this tutorial which will show you how to open and close uh dialogue um and so but i'll i'll skip ahead until that that parts done as there won't be enough time to to show that join this demo so just bear with me one second so you can see i've still got here the familiar project and in the main window we've got our our button just how we left it okay so i'll run the application and show you what uh the the parts that have been added okay so here's the application and here's the button when user clicks on the button it opens a dialog we can search for a uh the name of an artist to see if we can find some some music and you could see that there was a progress bar popped up there for a second while it did a search but there's no results yet so i'll show you how because the results will basically be a list there'll be several of them so i'll show you how we can we can deal with that inside that dialogue so i have this control this user control called music store view and you can see here we have a dock panel and we have in the docked to the top of the stack panel we have a text box that the user can type into there's uh immediately below it the progress bar and its visibility is bound to and is busy property and then at the bottom of the dock panel we have a button with the by album and its command is bound to by music command and we don't yet have any code to display the albums that are have been returned so we can use a list box to display that so i'll declare a list box and you'll see for every view there's a a view model that goes along with it so this is the music store view so i would expect that all the logic to be stored in the to be in the music store view model class so if i go there you can see here is the search text property that we that has updated when the user types um so how this works is the the as the user types it updates this search text and this dot when any value is used to convert it into a observable it's filtered for empty strings it then uses throttle so that we can run a search when the user stops typing because we don't want to run a search on every single key press only when the user stop typing this observe on rx app.main thread scheduler is important because it as with all summer frameworks the changes need to be raised on the ui thread so that gets us back onto the ui thread and then it calls this do search method so you can see that our backend code has a and an asynchronous method search async it takes the string and it returns an innumerable of albums so we need to do something with this to get that into the ui so we can use the observable collection type that is built in and part of the dot net framework we can make an observable collection of album view models with other properties um we're using the declaring a full ghetto and setter and using uh this dot raisins that have changed but because this time we're going to just have a collection and add remove or clear the collection we don't need to to do that we can just have a getter and we can just instantiate it at the beginning so that it always exists okay so we've we've declared our search results observable collection so when we've run when we've run our just before we run our search we should clear the the results to remove any existing results from the uh ui so this this observable collection when you clear or add or remove an item it fires off an event and and that's how the ui will automatically update because it behind the scenes it will be listening to those events for us so we can iterate over the the albums that are returned by our synchronous method and we can simply add the results to our observable collection we can add a new album view model which takes an album if i go back to my okay so we've we've added the properties that are required to our view model and we need to wire up the search results to the list box that we added on the music store view so we can do this by doing items equals and we use a binding expression and you can use the same name as the property search results the other thing that the user will have to do on the screen is select one of the albums so uh finding selected [Music] album you can see that i've already put in a selected album property there so whatever the user selects on the screen will this property will automatically be updated okay let's run this and see what happens okay so what we can see now is we've got a list box and it's showing us several items so it's obviously found something but it's saying not found avalonia.musicstore.views.album view okay so why is that happening so what you will notice if you open the app.xaml there's a special data template called view locator and this comes as part of the application template you can decide whether or not you want to use this but this will make it very easy to to get started so what this view locator is and the code for that here is the viewlocator.cs basically if it finds if their data context as in our list box items each one has got an album view model for its data context then avalonia or the view locator here will will say okay the data context is called album view model is there a view inside the views folder called album view and if it is it will display the view uh accordingly so to fix that uh this this this error message we need to add an album view so if we right click on our views folder and go to add and then avalonia user control and we'll call this album view okay so this is created as an empty control as i was saying before when you add a new xaml file for the preview to work you'll have to build the project again so i'll tell ryder to quickly build it for me again okay so we can see the preview is working okay and what we want to display here is uh a um the album cover and the title of the album and the uh the the artist name um but one of the things that we know is that it's going to take a little bit of time to download the the actual album cover from the internet and to to load the image and uh display it especially if there's as many of them as there may be in this case so we can put in a nice placeholder okay i'm going to paste in some ui i'll quickly explain what that is okay so for the ui here i've put in a stack panel i'm going to make these a bit smaller just so that it shows up nicely on the stream okay and inside the stack panel i've put a border with a corner radius which is going to give me nice rounded edges on the border you can make it clip the contents so that the the corner radius is and imposed on the contents of the border as well so that's why i've got clip to bound set to true here i'm going to give it a a background using a hex code i'm going to paste the an image control in there which is bound to a property called cover which will we'll deal with that a little bit later on and then you can see we on top of there we've got a panel and it's bound to cover the the is visible property of the panel is bound to cover but it's using this object converters is no that means that this will only be shown when the cover property is null so when the image is not loaded so this will give us an alternative to to see and you can see in the preview it's showing there's like a music icon um let's make it a little bit smaller okay uh then uh after the border we have a text block bound to the title of the album and then the the artist name so that should be fairly simple okay so let's run this and uh hopefully we'll see something in our list box okay so now we have something showing up in our list box you can see that they're vertically stacked so it'd be nice to have these uh these uh wrap around so we can have them going horizontally and then wrap around and you can also see that we've not loaded the cover yet so office i'll show you how to do the wrapping so we go back to our music store view and we have the list box so in inside the the list box the way that the control works is it it has a stack panel that is adding and removing the the items from to display uh to display the items and the stack panel stacks them vertically um so on list box there is a property called items panel and this allows us to override the panel that is used so you could change to another stat panel with horizontal orientation but then that wouldn't give us the wrapping or we could use the wrap panel control so by declaring that we should see that they now wrap around there we go we can see that they're nicely wrapping around and scroll down smoothly resizing the window they adapts to the size of the window okay so i think the final thing to do now is to load the actual images from from the the itunes api okay so to do this i'll go to our album view model and we're going to need our cover property okay so i'll show you this so we have a property called cover it's got the normal raisins that have changed to to raise events when when the the property changes so the ui can update you can see it's the bitmap type and i'm using the nullability operator because it should be null when the cover is not yet loaded and i've added the this method called load cover and it's an asynchronous method so it can it can run in the background without blocking the ui so you can see that our our back end code actually gives us a stream of image data so we can we can call that and and then uh instead of um newing up the bitmap class inside the task i'm actually calling this helper method in one of the avalonia apis called bitmap decode to width so why would you want to use this method instead of just newing up a norm a new bitmap well when you load a graphic into your ui you will have to avalonia will have to allocate uh ram or memory uh either in the gpu or in the uh the uh computer's memory to to reserve some space for the the image now we know that our images are just going to be small squares on the on the ui they don't actually take up that much space so perhaps you might want to display an image and the image is actually you know 10 20 megapixels is quite a quite a big image but you actually only need to display a thumbnail if that's the case you wouldn't want to load the full image into a bitmap because then you you'll end up allocating um you know hundreds of megabytes of of memory per image so we can use this decode to width which will actually load the image at with width 400 maintaining the aspect ratio so it doesn't load the image and then resizes it it loads it immediately it decodes it to that to that size and you can see that's done in a test.run so that's done on a background thread so we're not blocking the ui thread and when that returns back onto the ui thread it sets the result to our cover which will trigger the raisins that have changed and that will show the image on the ui with a bit of luck so we just need to call this load cover so if we go back to our music store view model remember we have this uh do search method you can see at the end i've got a function called load covers that's called it's passed a cancellation token because if you imagine the users typing they might have typed something some results start to load and then they they change what what they're searching for so you would have to cancel loading the the covers so you can see all i do is i go through a list of the search results and on each one i await each cover in turn to load and then after each one i just check if if the cancellation is is going to happen and if not return or continue okay so let's see if if this works there we go we can see the album covers loading we can select one you can buy one we can go back to the store you can search for another and you will you'll see there the the content loading okay so that concludes my demonstration of the music store um obviously there's a lot more to it than what i've been able to show in this time here so please remember you can go back to the avalonia website go on to the documentation and all of this is under the advanced tutorial this is a step-by-step guide how to create this application so i will hand over to mike james who will give you a demonstration on custom controls in avalonia okay thanks dan first of all thank you uh what was what's really cool uh people liked it also the chat i gotta say is on fire uh i have already meanwhile we're switching to mike i have one task for you people ask for the link to the icons yeah that maybe you can put in the chat uh other than that oh you did already yeah i think i i certainly put it into my clipboard then i just didn't see it's like okay uh okay then mike it's your turn now awesome so thank you dan uh that was a really neat little demo you put together there so i've been using avalonia as i said at the beginning for about a year now um porting over some mammoth wpf app that it's like five years worth of work um and i've been really enjoying the process and as i kind of dig into it uh it it just shows more and more every time i use it just how powerful it is and how the project's evolving and one of the things i wanted to build was a chat application um as a kind of sample and to play around with some ideas and not just the the front end but the back end as well but today we're going to be looking primarily at the the front end so for those of you who don't know me uh i i used to used to work for xamarin um so kind of cross-platform and and zamel is is in my blood really um and moving from xamarin or wpf to avalonia has been a really natural fit um so anyway we're we're going to build out a custom control which is a chat view and i've got the app running already here so that we don't have to wait for it to build and let's go up one the universe the universe we'll send that so it kind of works but it doesn't look very good this isn't what i want from a pretty user interface i want it to look more modern and more in line with how chat applications look so we'll stop all of that and let's take some inspiration from apple so the first thing that i want to do is i want my chat bubbles to actually be bubbles i want them to be rounded i want them to have some padding and eventually i'd like to have this little tail this little tick down at the side so the control is defined as just a standard c sharp uh piece of code there's no there's no ui that's tied specifically to this user control and that's because with avalonia we can create these loopless controls so we provide the styling for it at a later date which means that i can customize it depending on what platform i want to to run on or between different apps for example without having to come in and tweak the the code behind and the logic that actually powers this control there's not a great deal of things happening because we just have some content that we display most of the magic is happening within the chat bubble dot xaml and on the right hand side here we can see the the preview of how it how it looks and i get that by defining this design.pre uh dot preview with and then creating an instance of the the chat bubble now i've put it in the stack panel just to make my life easier so that i can have a couple of them but this means that when i'm editing this control style i can instantly see how that's actually going to look if i wanted to rerun the application so the first thing i want to do is to make this rounded i want this to be a bubble so to do that what i'm going to do is i'm going to take this content presenter if we pop back to the chat bubble we see that we've got this inheritance or we're inheriting from the content control uh and that means that we we're going to have this content presenter so that's actually the thing that's sitting inside here it's in this case a text block and over here it's an image so i'm going to wrap that in a border and i like to give all of my controls at names and i'll use the kind of standard naming convention when creating styles which is starting with parts and this is going to be at the body i am going to set the tabbing something like 10 uh we'll set the corner radius would be 15 and i'm also going to set the background template binding the background so what that's doing is it's grabbing the background property value here from the actual control so in this case it would be resolving to chat bubble which inherits from content control which has a background property so that's where that's coming from so the preview is updated and we have something that looks a bit more like the the imessage example that i want to get to but what i don't have is a little tail the little flick so to do that what i've done is i've added a resource to this xaml file and just like dan was using earlier with the icons this is a stream geometry and i've got the the path data here and i've actually used the svg visualizer to to show you what this would look like so i'm going to use that resource to create the tail so to do that what i want to do is add another control so it's not just going to be the border and at the moment we have the border that contains the content presenter and the control template can only have one child so if i were to create another control here let's just add a border in an error telling me this isn't this isn't valid you need to stop being stupid and do something correct write some correct code sounded kind of instant feedback that's very useful especially when you're learning a technology we're going to wrap everything in a panel with start no errors and i'm going to add that icon so i'm going to create a path i'm going to give it a name i'm going to call it part pale now we're going to set the data here static resource and what's really nice about the rider integration is that it's intelligent enough to realize that i have this as a resource i've got these resources within my application so within the autocomplete it's actually showing me which resources have been defined and are available to me so i want this doubletail geometry so i can just hit tab and that's automatically added it for me and we're going to set the fill the like the background it's going to be a template template binding i'm going to say stretch is uniform and we're starting to get something that looks not quite what i want but it's getting closer i think a few more lines of code and will be where we want to be let's set the width and height to 15. for alignment to bottom and then the horizontal alignment can come from the template binding again there we go so i've now got the tails exactly how i want them for the sender but for the receiver that's not what i want i want the the tail to be if we look like this so pointing the other direction so to do that let's have a look so i defined this part tail and i already actually have written a a small style selector here that handles setting the part tail for the sender in fact it's it's setting it for everything so it's not quite what i want so what i'm going to do is i'm going to take this i'm going to copy and paste it and if i come back to the chat bubble i have this property which is roll and if i navigate to that i can see that it's an enum with the sender and receiver so i'm going to use this property to create a selector just for just for the sender so we'll say roll equals zero and then we'll do roll equals one but now i can customize depending on whether or not it's the sender or the receiver so let's flip that puppy there we go and we'll adjust the margins to get it where we want there we go perfect so let me rerun the application and i've got a local instance of the web server running within my configuration i'm actually launching two projects at once so there's the asp.net core web api and then the avalonia front end it's in the message but let's also launch a second instance so we can see this actually working and i'm authenticating off screen but i'll quickly show you that to you that's just using active directory so it's getting the callback there we go so it's authenticated okay there we go so this is working as we expect it okay and we'll send that cool and this this works exactly the same on mac os and linux so i've built myself a cross-platform app that looks pretty reasonable uh with very very minimal amounts of customization and the ide has kind of guided me towards that successful result with the auto completion and the previewer so yeah that's the little sample you can grab a copy of the code from github um let's say there's a lot of different services that are powering this but i wanted to focus primarily just on the front end and the avalonia piece so yeah thank you very much dan i appreciate having the opportunity to spend five minutes showing uh this little demo okay so here we meet again uh you're about finished i suppose uh that makes us uh heading over to questions and um sorry matias i have a couple of things to show about um the future of avalonia [Music] okay sorry then let's remove mike at your stream again and remove myself okay so i will just quickly tell you guys uh what is coming up in the future for avalonia um so in the immediate future we are adding uh ime support um for allowing you to impart different types of languages right to left tech support is also coming and also accessibility and there's also a new composition based rendering system which will add lighting shadows effects depth kind of similar to windows.ui.com composition and then mobile back-ends for ios android and later on uh web assembly i will just quickly show you a little bit more about what i mean by this composition rendering system this is going to greatly increase the rendering capabilities of avalonia so it will add things like connected animations as you can see here this is probably a lot smoother on my screen because it's i'm showing you a video recording of it and one of the other things that it this composition system is things like uh blurring so you know blurring and acrylic between levels so this will seriously enhance the the rendering capabilities of avalonia indy in the near future so uh just a little bit about um about um the future of avalonia [Music] and i'll just put here all the the links that you can find for avalonia our website documentation github we also one of the best ways to get in touch with us or the community is through our gitter chat gita dot i am avalonia ui for slash avalonia you can just pop in there ask any question you like there's usually lots of people there wanting to to help and answer questions and there's also a avalonia community github which has lots of links to uh libraries that people have written applications that people have written and if you've got a library or an application um let us know we'll try and add it okay matthias over to you now i'm back okay sorry i was i was i was chatting i'm honest and i was distracted and thought oh my god it's finished uh i will bring mike uh to the stream too and now it's time for questions right yes okay let's see uh so one introductionary question maybe uh people kind of miss you informants like dot net conf so are you applying there as well or you never got got picked or i don't know uh so far well i didn't apply to any but i think in the the next this year or if uh yeah i'd be happy to to go along and do some more so so we so we had the honor actually the the initial honor to have both of you okay uh other more more tech question um regarding wpf there was one question regarding a compatibility analyzer so if you part something from wpf to avalonia and also kind of fits into the same direction if there if you know about any uh so say like guide um that talks a bit about um the migration process about pitfalls that you may stumble on uh anything regarding that yes if you go on to our github um page um i'll try and get i'll i'll find the page now so i can i can show you where it is just give me one second we have a screen again or just chilling i'll share it on my screen that'll be easy for me too okay then let's have your screen is visible already i'll just find this now uh we have a comparison of uh yeah frame framework comparison so you can you can get to this by you get to our uh the github page uh click on the wiki and then framework comparison and here's a table of avalonia wpf and uwp so that will that will show you some of the differences that you might uh expect um although this is uh changing all the all the time as uh more and more things become implemented and new features added um in the past we did have a kind of roslin analyzer that could um sort of automatically convert dependency properties uh although i think that may be unmaintained at the moment but we are planning uh some um um like tools and compatibility with wpf in the in the future so um to make it easier maybe maybe also a good thing for anyone who wants to contribute right because i i would think it's quite quite an isolated uh component uh mostly at least what i think about it but yeah um another question support for mobile platforms so what i got uh avalonia is mostly uh desktop first right right uh but how does it look around mobile platform support yeah sure so when uh when we first started working on avalonia there was a huge need for cross-platform desktop um you know and mobile was very saturated so uh we we focused on desktop first that's correctly you've identified that we are primarily desktop we do have working back-ends for ios and android um although there's a few features that are still needed to get them to what we would we would to get them to be at the level that we would consider production ready um although there are quite a few people testing it and submitting features and bug fixes so if if you're very familiar with android or ios and you and you do have some time to contribute to open source get in touch and and uh and we will uh we can work together on that yeah i actually have a fitting comment from dan older than it should be uh there's still a huge need for cross-platform desktop dev with net and i think i agree i mean i gotta say i'm kind of jealous because i for most part i'm living in my console application and it looks all so boring and you're doing fancy stuff like in in a couple of minutes um another question [Music] probably fits at that point comparison to maui so mike uh was already chatting while you were presenting i think that's something for you mike then yeah i think uh it's a really common question and obviously my my background working at xamarin uh back in the day when when it was xamarin forms although it still is technically um on the surface i think there's a lot of similarities um because obviously you're using c sharp and you're using xaml to create your applications um but that's kind of where the similarities end um they're approaching uh building cross-platform maps from two very different directions you've got desktop and mobile which are totally different paradigms and the the complexity of your views and your applications for desktop is going to be significantly greater than it would be for a mobile app so i don't see a huge amount of room to compare them to be honest because i think that they're very different you know look at the rendering technology xamarin or maui is using native controls so when you ask for a button on ios ultimately the ui stack gives you a ui button which comes from the apple world which can make you know customization and creating these complex styles a bit more challenging but it makes the app feel more at home on that device whereas with desktop often you want a really customized ui and that was always a big thing for me why i was drawn to wpf and abalone fits there really well so it's kind of horses for courses there's they solve very different problems so doing a straight comparison to me feels very strange okay yeah i i gotta say it's kind of difficult today because like like i said before the chat is is on fire uh to find all the questions afterwards uh but i think i i posted that in our private chat so i have them there for reference at least um we also also had the question around interoperability and display of native controls um yeah so uh avalonia does have some interrupt apis uh i've not used them myself um so uh if you um i know that they allow you to uh either embed another process um and we also have interoperability with different views and i think like to wpf and win forms um but i can't um say with 100 confidence exactly how they work or um but if you reach out on either github or twitter i can put you uh point you in the right direction i know the people that did that um did that work so i can point you in the right direction there nikita was already answering in chat so another uh nikita is the guy to to grab on that one yeah right and i think if i recall correctly he said uh most parts are working on mac and windows uh sometimes you just have well not to live but probably an ongoing issue uh but uh only nix for instance there are currently at least some some issues uh but yeah don't don't take my my word for granted here i was just uh paraphrasing what was in the chat um i have one one question left for from me the naive uh ui developer you showed those icons uh and then that you have to copy them and all that um is there anything that speaks against let's say copy all of them and put them like a library inside my code so that i have them accessible all at once and not just individually yeah i uh have tried before putting all of the icons in a like an icons file um currently it will end up passing all of them when your application loads so you can slow if you've got like 10 000 icons you might start slowing your application okay it's something that we're gonna change we're gonna change in the future so that it lazy loads them on request but uh until that happens uh i just tend to copy and paste only the ones i'm using okay that sounds cool and also reasonable so i know i get the idea um i think we are out of questions um at least was uh yeah we had some questions like will there be a discord for avalonia we do have a discord server someone set one up uh but i'll i'll have to find the link to it okay maybe you can also share afterwards in some way uh cool other than that i think like i said it's it's hard to track the questions if we missed anything uh please feel free to message mike and then on twitter or somewhere else and ask them and blame me for not uh pointing out your question um let's bring on my screen again at this point i would like to thank everyone for for attending if you like that the best way you can let us know is by hitting like and subscribe i want to thank then and mike for for being here was was a pleasure to have you uh and really really interesting and yeah if you if you want to see more like we have all the links here to our blog um and of course also to to these two uh great presenters on twitter and avalonia on github and with that said thanks again both to you to both of you i mean and for everyone watching and see you in the next webinar bye you

Channel: JetBrainsTV

Views: 8,871

Keywords: JetBrains, JetBrain Rider, Avalonia, UI, Skia, XAML, Cross platform, rider, webinar

Id: kZCIporjJ70

Length: 76min 14sec (4574 seconds)

Published: Tue Mar 30 2021