Avalonia UI - 01 - Project Setup

[Music] thank you [Music] all right welcome everyone to this new video on Mamma Mia Dev this video will be the first of a series where we explore avalonia UI avalonia is a cross-platform framework built on top of.net and used to build user interfaces you can use it to easily build interfaces for desktop and mobile devices whether it's Windows Linux Android or iOS it also supports web assembly avalonia uses example or xaml which is an XML based language heavily used in Microsoft environments especially for WPF and xamarin applications it's supposed the most common controls such as buttons text Fields sliders and so on we'll see how to use all the controls in the next videos another important concept supported by avalonia is the model view view model pattern or mvvm and vvm is a common way to structure UI applications that separate view logic from application logic in a way that for instance it allows your applications to become more unit testable mvvm relies upon avalonia's binding capabilities to separate your application into a view layer as we said which displays standard avalonia windows and controls and a view model layer of which defines the functionality of the application independently of avalonia itself we'll see more of this during the Practical demo all right let's say that you want to develop an application using avalonia UI where do you start now the the starting point should always be the official website the one that you see on the screen you had to get started the website is full of information so I highly suggest you to navigate and browse it all over start from insulation see there are previous options the dotnet CLI Visual Studio the raw Visual Studio extensions my jet brains Rider there's an extension for jailbreak Rider as well all right so avalonia is built in at Ryder has built-in support for avalonia example oh it's already support we can't install the extensions we can do it later so basically what you can do is start your IDE whether it's Visual Studio Rider if it's Visual Studio you need to install an extension create a new dotnet project and start from scratch or easy way is to go on not Network Tab and install the avalonia templates which which you can do which is but by just copy pasting it's common line do your prompt paste it just wait a second for it to complete and here we go we installed avalonia templates version 11.0.2 we've got a couple of them there's the donut tab not imbvm cross platform a recently Chinese styles and some more what we are interested in for this first episode is the mbvm app now that we install the templates we can head back to Rider I will use Ryder during this where you can definitely use anything of having a complete ID is suggested it's easier and whether it's Visual Studio or Rider all the things that you see should be applicable in both cases so now let's create a new solution and on the left you should now see scroll down a new set of templates the one that we saw before I think as we can see them so the one we are interested in is the mbvm application and solution name we can just go with application project name let's leave it like that pick a directory use .net the latest version that you have of course you you need to have.net install Ed in case you don't have to install them leave your live install it and I think we can just start with it hit create button and wait for it to spin up the the template all right cool let's let's try this some time to restore packages and after that we will have a quick tour of the application cool now that the project is fully loaded let's head to the program.cs if there are any.net developers watching this video you would already have recognized this is the the entry point of the Avalon application and we'll dig into the details in another video for now just let's just have a look at this app builder dot configure app this app if we click connect we we get directed to this app that example example is an extension used by avalonia and if I'm not wrong it's just used to avoid conflicts with Visual Studio example files so that's it those are plain xaml files but with an a in front of it cool you can see that xaml files in Bologna have a Samo file as I said and a CS file which is called code behind so every every example has some code Associated if you go into the app XML you can see that it's simple smell you have tanks you have values this represents standard XML annotation here we specify the class Associated to this sample is app this is a using declaration theme some other stuff Styles is used to specify of course Styles here we are setting the fluent team we'll see we're going to the details in another video so every example has its caught behind and if you click on the app.cs you can see that it's in everything from the application there is device method and he's doing all the stick all these things and probably the most important thing that you see that you need to focus on here is this desktop that main window new main window with a direct context the data context is associated to data bindings but we'll see something more in another video so from here you can see that we are instantiating a main window main window is again a pressure class as before and you can find it into a view the main window is is the main window that is the main view that we are actually loading in our application and as before you can see that there is a main Windows Samo and a main window.cs and basically this every every example xamo file in avalonia most of the time produces an actual class and this class is called main window in this case and that's why you can see that it's declared the code behind class is declared as partial now uh there is not really a lot going on here the main window has just a Constructor with some initialization things going on which are inherited from the window because as we saw this is the main View and it's a window and just to have a clear view of what's going on let's try to build and run the application nice cool this is this is I want our loan application this application can run on different platforms with some adjustments but yeah that's it that's the Avalon implication and what you see here is actually the main window which is displaying a text box you can see it here there's a text box with some tags and values applied the result is this black background with the white text nice now that we've seen a preview of the application let's go and play around with these on file a bit let's customize the application and see how we can interact with the UI so let's close the application this is a text and is centered so we we can add controls UI controls using the xaml file the xaml notation or we can add it using the code behind let's start from the Zama notation and for instance all right first thing that you want to know this when you when you build an avalonia you want to is that if you add any other control like a button for instance okay you will see that you can see in that you would get an error because the content cannot set be set more than once it means that we can only have one control and that means that we need some sort of component that can contain other controls inside it it just kind of components are controls are usually called layout controls now there are many many type of layout controls so let's jump let's let's quickly jump on the avalonia documentation and see what's available to save the documentation you we just need to there we go to the official website go to get started click on documentation on the left side you see all the all the content that you can find here if we go on the basics user interface controls controls are basically UI components and had to built-in controls the first type of control stick we can see is actually the layout controls there are a lot of them but the canvas dock panel expand the grid some of them are most common some are not one of the most famous is the stack panel which allows multiple chai controls arranged in sequence horizontally or vertically and this is what we can use to start with if you go inside the stack panel page you can see a brief description properties you can use an example which is fundamental and an image to Showcase what we're going to do so basically here we can see a stack panel with with a with sorry of 200 I guess it's pixels not sure and you can see that this is one component only it starts here and ends here with four rectangles in it and you can see the image I read one a blue one a green one a yellow one so let's quickly take copy this example and paste it inside our application cool we we just have the text so uh the welcome to avalonia text let's drag it in replace the rectangles let's check our button put it inside the stack panel and as you can see it it's not giving a the red line has vanished that's because we have only one element as a Content just ignore the design element for now where we don't have to care about it so you can see the starting tag the ending tag and this is whatever it's inside it's the content and the content must be made by one component only if we run the application cool you can see you can start to see something layout is completely broken for now but you can see this little button here and welcome to avalonia text now let's just put something into the button like click me and we have a width we can add some margins like 16. if you remember there was also a property called spacing which creates an even spacing between the child controls and that's what we what we want to use let's go spacing and we'll see let's see let's make it at 10. so text button let's start again here we go you can see the text that but the clickable button which is left aligned we can fix it by using the horizontal alignment tag that you can see in the text block equals quotes and you can see that there's a drop down with suggestions we can use Center and rerun the application here we go we've got some margins we've got some spacing our text block and our button which is doing nothing for now cool now you notice that every time we make a small change to the UI we need to rerun the application and it takes a couple of seconds based on the complexity of the application and the device is running on it depends on your computer basically now there is an easier way to get a preview without running the actual application and in right there you can achieve that by installing a specific extension which it's not alright preview is not supported but you can't support it if you install an extension this extension I think can be found inside the installation guide under the jet brains Rider you can see that there is this Rider extension it's called avalonia Ryder you can see from the screenshot that it gives you a preview of your application so let's copy the name let's head to the rider application let's look for the plugins and extensions I think it's in settings plugins cool Marketplace look for avalonia right here we go and that's the applications always double check that you are installing what you want to install click to install third party plugin notice okay cool always be aware because always be aware of what you install because there may be malicious software as that can be spread through extensions now this is an official one so we should be safe cool it's installed we just need to restart our ID and it should be already available let's give it some time to load properly nice nice now we should be able to see a preview of our application if we just reset it and open the panel here we go there are a couple of options to customize this View change orientation I am happy with having the preview on the right can resize the screen and you can see that it has some Dimensions that we can change and let's do it now all right so you can manipulate the window dimensions in two-way one is the design way which affects only the preview for instance we can have a I don't know 400 with by 500 like this you will notice that if you run it the window is not actually 400 by 500 to change the outro width and height we need to apply fee with tank and let's use the 400 to reflect the design one and the high to 500. nice so if we run it down it should be 400 by 500. there we go cool our cool application the preview is working application is yeah yeah the button is clicking the nice feature of the preview that it you can click actually click your buttons so it really gives you the preview of what you're designing of course there are some limitations honestly I've never hit any hard limit on the preview it always worked but sometimes you can give some errors we can do some tests by I don't know duplicating the button like this you can see it automatically updates if it doesn't update just rebuild the application and it should solve most of the problems usually cool and before we proceed let's try to let's delete the button s like this and just just for this episode let me let me align the tanks just for this episode Let's ignore the fact that we are using this binding keyboard here because it's used to set the text of this text block or label probably WPF and win forms developers are more familiar with the term label so if you don't mind I'll call it label because it's easier and this is using a binding keyword which is a part of the data binding and we'll see what's what is data binding in another episode for now let's just set the value of this label manually with I don't know test or welcome to Mamma Mia Dev like this you can see that the UI is updating live and by setting the text fit the tax value you change the actual text text of your label the horizontal alignment center we know what it's doing we can played it and see what happens left it is slightly on the left it's probably more visible if which is one thing it's left you can see that it's on the left okay let's see Center and it's Center and you can guess if we put right it goes on right nice there are a lot of properties that you can play with if you're curious you can just control click on that on the tag itself it will yes it will decompile the avalonia library and you can see the source code you can see that this is the tax block Swiss code if you scroll down you can see a bunch of background property padding from family a lot of things text property and if you scroll down you can see the actual properties available padding background text there's a lot there is a lot and you can have fun otherwise you can always add to the documentation documentation uh what is it here we go and I think there must be a URL oh here we go you can serve the source code directly for instance of the stack panel and there it will bring you to the GitHub repository where you can have some fun cool the last thing that we can do in this episode is to make something happen when we click on the button to do it we can leverage at least two properties one is the command which we will use when we when we talk about The Binding capabilities but for now I think we can use something called it was action or event I think let's check the documentation button controls you see the button quick mode command oh it's click it's click I guess the simplest way is to use the click t and let's just give it a name for now let's call it um button on click will be red I think we can use Ryder actions menu to create an event handler for us cool all right in this case write the already knows what's the signature of this method here and you can see that it's accepting two input parameters one is the sender and one is the router event tags we are not going to use them in this situation and but they will be they will be useful in the future so to recap the easiest way to assign an action or a function or a method to the button is by setting the click property whenever you click something you remember that at the beginning we talked about the the xaml file and the code behind all right the xaml file we set contains the UI elements while the code behind contains the whole logic of the window now there are more efficient ways to structure your application one is leveraging the mbvm pattern in this case we'll just stick with the plain simple cut behind implementation which means that we are going to put all our logic inside main window pressure class like in this case so you see we created the private methods and in this private method we might want to I don't know just just to start with we can log message maybe like hello button hit so now that we attached the button on click method whenever we click this button we should see a console log let's see if it works okay we've got the application we've got the console here and if we can click you can see console log appearing properly cool now that we know that the button click is working and it's doing what we want let's try to change the text block text how do we do it so we we have this button on click so inside this method we need a way to say take the label take the text and set it to something so we need something like text block text this is a variable that is not that is it's not existing and we need to set it to something like clicked cool how do we get that from the cut behind how do we get the text of the label of the text block well the simplest way without using any pattern is to name the text block and you can do it by setting the name property to something like text block aim this cool when you set a name it's a textbook or in any other control if you go into the code behind of the same window you will you will find text block name yeah now there are some issues with the intelli sensors just comment this out and you can see that we've got a property called text block name if we look for this property you can see that we are as we said before the main window is a pressure class because DUI the xaml file of the main window is producing another file with the same name and whenever you navigate any property that is created there you can see the actual file so we've got the main window the initialize component that we were calling in the Constructor and you can you can see here a property called text block name so this property gives us access to the text block component in the UI and by doing that we can access its properties and one property is the text one and we can set it to clicked for instance so now whenever we click the button we should see a console log and the and the label text should change into clicked Let's test it out nice let's see cool button is here if we click it we can see the console log down here and we can also see that the label text changed let's just put it in the center let's align it to Center rerun it and there we go you can see that we can click it and you will see all the console logs and of course the label is not it's actually changing but with the same text and that's it there's a very basic interaction between a button and the label nice that's all for this episode in the next video we'll see what is data binding and how we can use it to create more complex interactions by leaving the UI components decoupled from the code behind see ya [Music] foreign

Channel: Mamma Mia Dev

Views: 5,145

Keywords: avalonia, avaloniaui, dotnet, mvvm, databinding, cross platform, wpf

Id: 1mzM6N4drCU

Length: 30min 36sec (1836 seconds)

Published: Sat Aug 19 2023