Command binding in WPF | How to bind a command to button control in Wpf Xaml

welcome to magnificent in this video we are going to see how to use the WPF commands to bind to the button control so let's design a UI so design it to rows here so in this first row we are going to take one stack panel orientation add over horizontal and add a text block and text is let's say let's take a id id of this person resources for it static resources that is styles or each Xbox and picks block so apply the same styles to here where we have a design static resources and we have the text box style it's the same way if we'll add a person name as well so we can make use this style stack panel of the same name and which everything is the remaining part is the same so now let's take two text boxes person ID and person name will add a model for it add a class that is used as a model so this is going to be a model this will be here add two properties for it so this is this is our model simply we added two Fields here two properties ID and name and to bind these properties this UI model so we are going to add one view model here see this ID and name we are going to bind with the UI create object of the model so which is available in the local and this is our view model create a key for this one create object view model and change the data context for this grid okay resources and data context is our view model and then here you can bind this with the path of ID and the second text box which we are going to bind for the person name so this text box which we are going to bind is the property of this text box equals to binding and path is nothing but a name here I will add one more button here so button and the content add okay this is the button which we are going to add and add the styles for this button as well here button adding the information so alignment will align this button horizontal alignment towards left and for this information which we are going to add this information into a data grid so add one a data grid here so move this data grid into Row first row data grid we are going to bind item sources so before that I have binder item Source create item Source create a bit observable collection for this one information for this data grid and there is going to be a model people correction which we are going to bind it so this collection we have to initialize people collection of the collection click public so it became feasible path equals to equal so this way bind has a data source for data grid so now you can see ID and name is visible here so now we are looking for this button control and here we want to put a command command we need to find it to command so before binding it we should create a command so now actual command binding logic started from here so that's for this one add one class if you have the delegate command some good name here for this class add a delicate command as a class this class inherit a I command interface in which we'll be having a inbuilt execute and can execute method as well as a event okay so implement this interface as of now we are going to look a very simple example so we'll just add a Constructor here to pass which method we want to execute and declare one method as action delegate here inbuilt action delete so give the name here as an action method which method we want to execute and pass this as of now just looking for the single example and which method we want to execute let's pass through this action method and the parameter if we have any parameters so once our method will come here and this will be execute from this execute a method of this I command interface now this delegate commands ready now we have to create object of this I command using this Constructor for delegate command Okay so build this one let's click it command so here you declare this command 5 command and just give the name as a command okay and make this public place this command with a method which we want to execute first of all create a method save data it's private provide save data or add data and data this method which we want to execute and here these people add new model ID name and name so this is going to be we are going to save this data into our view model so this is going to whatever the data which we are going to add we are going to add into the observed fraction and this object collection already we bite to the point to the data grid of our view and here we can put simple message data added restart information okay so this information we have to add this method and this method which we are going to pass for this command so command initialize this command with the new delegate command and pass this method of add data and this add data should be with the object some object let's say pass this object OBG because this execute method which we have created with the argument offer output so pass this one and now we can bind this command with the UI so binding and path and this is the command which we are going to point it here so he in this uh in this commanding we are not writing any logic to the code behind we are not writing any click event nothing is there everything is inside of your model so now let's run this application and we can see how it is run okay so you can run this application just to give this idea of person and this is the person one person one and click on the ad so you can see data added you will add it to the grid so let's make this 222.2 this is a person to add data added to the grid you can see here this way you can work with this commanding into the WPF

Channel: Magnificent

Views: 277

Keywords: c#, wpf, c sharp, windows presentation foundation, wpf application, desktop development, c sharp coding, windows applications, .net, dot net, c# wpf tutorial, xaml, xml, what is XAML, Extensible Application Markup Language, wpf developer, learn c# wpf developmet, dot net core, .net core, .net standard, .net framework, c# tutorial, xaml tutorial for beginners, wpf tutorial, command binding, bind a command, commands in wpf, command binding in wpf xaml

Id: eaWInBFxNX8

Length: 8min 0sec (480 seconds)

Published: Sun Aug 20 2023