Avalonia Tutorial: User Controls in Avalonia UI | User Control | Visual studio | C#

hello everyone my name is ronuk and you watching Vector art so in today's video we'll talk about user controls and custom controls in avalonia so user controls in avalonia are reusable UI components that encapsulate a particular piece of functionality or a set of related UI elements they are designed to simplify UI development by promoting modularity and reusability some of the major uh characteristics of a user control would be encapsulation reusability customizability and separation of concern so uh let's start first by uh creating an avalonia project uh so let me click on create new project and let's click on the I'll select avalonia net app or um and uh you can either search it from your templates here if you do not see this templates uh in your Visual Studio you please check out my previous video I'll leave a link in the description where I've explained how to install avalonia in visual studio so moving ahead uh let uh let me I have selected this from on my reset project so let me click on next and let's say okay and click on next while the project is loading for those who haven't subscribed to my channel uh please do subscribe to my channel it means a lot uh it motivates me to create more such videos and um yes um if you have not seen my previous videos on avalonia I will leave a link in the description where I have covered several topics on I so now the project is loaded uh so let's start by defining our zaml markup so this zaml markup will be uh to define the layout and structure of the user control including any necessary UI elements and bindings so let me see what we have here so let's uh wait for the project to load uh you can see this uh designer on the uh right hand side so that will only be available uh let me build it first so that uh you can see the designer uh by default avalonia uh does not support a designer it does not show you a designer but by installing this template uh not a template uh an extension here in the manage extensions if you see uh I have this uh avalonia extension for visual studio 2022 installed and due to this uh you will be having this or you will get this preview of the design that you create so uh that is the and now uh if you do not know how to do it then you can check out my video on that as well so now uh let's start by creating a user control so let's select our project here and right click add uh new item let's say user control okay avalonia user control and let's name it as Let's uh leave it as is uh and let's click on ADD so now we have our user controls uh sample here on the screen so let's start by adding some uh code here so let me remove this and then let's start by adding a grid and inside this grid uh let's add a text block and uh let's add some properties to the grid uh let's say a background of uh light gray and uh this text block let's add some properties to the text block as well so let's set the text to A binding and let's bind it to a property called message and let's close and then let's set the other properties like horizontal alignment to Center and also the vertical alignment to center now that is all that I will do on the designer's end uh I will also set the width and height of this uh user control to say 200 and 100 let me save this and let's go to the code behind and in the code behind uh let's do some changes so here um so let's create a property public static read only style property of type string message property and that equals to avalonia property do register user control one comma string and let's pass the message this property is not yet created so I'm getting this auto complete but uh let's close this okay so now let's create this property okay let's add the getter and Setter property I need to do the same here as well and finally the user control and inside this user control I need to say the data context equal to this so uh now we have uh completed designing our uh user control and uh the code behind so let's bu this and see what errors do we have okay so it says uh that we cannot pass a compiled binding without an explicit X data type directory so here it is not allowing me to uh bind this um directly uh so if you go to the avalonia um article on compiled bindings you will see this page where it talks about uh the compiled bindings and uh how to define them in zaml so there are uh two ways uh two or three ways uh to tackle this error so one is uh for the first one would be to enable and disable the compiled bindings and uh globally so to Define this or to enable or disable this globally you can copy this code or uh better yet uh you can simply go to your project and go to solution Explorer and open the uh solution file or the Cs project file and uh okay so here is a c project file and here you will see that avalonia use compile binding by default is set to true so I don't want uh this uh to be true I want it to be false and uh let me change this and if I save it now you will see that uh the error that I have here if I rebuild now it goes away so uh in this way you can use uh compiled bindings uh or we can enable them or disable them the second option would be the article describes is that that you can either use a compiled binding markup meaning that you add compiled binding instead of The Binding uh attribute and uh you also provide the x uh compiled binding equal to true so uh you you will have to explicitly specify this in each of the element or you can uh Define them globally which I did or you have other options as well where you can do use reflection binding markup and um then you have typ casting where you typ cast every binding here in the command section like this so um so the first solution that is to set it globally has worked for us so here you can see our uh user control is loaded now let's see how we can include it in our project or the main window so here you will have to first Define the name space let me change this width and height to say 400 and 300 and here I will include the name space XML name space space um local let's say equal to name space and our common name space value here and here inside this let me add a stack panel and inside this Tex panel let's add our user control so let's say local and here you have our user control so and we'll have to pass the message that our user control expects so here you can see our property that we created message property and let me type hello and welcome to avalonia and let me set a margin of say 10 points and let me close this and here you can see uh we have created a simple user control and added it to our main window so now that we know the basics of uh user control let's design a small button um and uh implement it in our main window so here uh we are going to make some modifications to our user control uh so let's start uh first by removing this grid that we have here and in and also change this uh height to 50 and uh let's start with a border let's set the corner radius to say five and inside this border uh let's add a stack panel and let's set the stack panels orientation to horizontal and inside the stack panel let's add a button let's set the width to 50 points and height also to 50 and inside this button um let's add a path icon but before that uh we will have to uh create the path icon and this path icon would be to display an icon uh inside the button uh so let's do that uh later I'll add one more button here let's set the width to 150 and height to 50 and set up padding of 15 and let's call it my Croft store okay so this is a layout and here I want to add an image so to do that let's go to the solution Explorer right click and add a new item and here we'll have to select avalonia Styles and let's name it as icons and click on ADD uh and then you add your Styles here so you'll have to create a style element and inside this style element uh create a resource element and inside this resource element we'll have to add a stream geometry and this geometry would be to uh um Define the um icons so here if you go to this link on avalonia you will have fluent icons for avalonia you can they have the geometry for pretty much every icon you can search here search for micro soft store yeah so you can get this uh stream geometry for this icon so similarly you can get icons for every um uh everything so let me copy this and go under this resources paste it so I have my stream geometry or the icon ready so let me go to the app. sample and uh include it like this so here you'll have to use a style include and give the source as the control or the name space name and then the icon file that you created or the style file that you created so AV re s colon for forward slashes after that you need to provide your um name space and then the style name and that will help you to include the style that you just created and now all you have to do is go back to the user control and here under this you will have to create the path icon element and inside the path icon you can create a data and then you can give the static resource and that would be the store let me see what is the name of the static resource so this is the name so let me go back and paste it over here close the tag and then just close the path icon and here you can see we have our icon uh ready you instead of using a static resource you can also directly create a path geometry tag and inside that path geometry you'll have to paste the geometry that you have uh got from the website so this is our user control now so I will save this and now we can use the same code uh that is used here to include the user control in our main window only thing is that we are not using this message the property and let me run this and show you it in action so here is a user control that we have added and um that is all I have on user controls uh for avalonia hope you all like watching this video If you do give this video a thumbs up like share and subscribe to my channel till then bye-bye

Channel: VectoArt

Views: 628

Keywords: visual studio, UI Design, UX Design, User interface, Application Design, how to, visual studio blend, c#, wpf, windows presentation foundation, ui design tutorial for beginners, ui design tutorial, ux design, UI Framework, VectoArt, Avalonia, Avalonia UI framework, Avalonia UI for Visual Studio, usercontro, User Control in Avalonia, Avalonia User Control, Custom Control, Compiled Binding, Binding

Id: _bPZcA5YKM4

Length: 16min 23sec (983 seconds)

Published: Mon Mar 04 2024