WPF Tutorial - Introduction In 30 Minutes (Binding, XAML & Data Context)

what's going on guys this is Tosca and in this video we will be talking about what is WPF and how to get started understanding its basic features and usage we will alternate between reading overviews and slides and poking around in Visual Studio WP f stands for Windows presentation foundation WPF allows you to develop applications using both markup and code behind allowing you to create a loosely coupled application using mvvm mvvm stands for model view viewmodel mvvm allows you to separate your graphical interface from your applications back-end or business logic this allows our application to have a loosing clean design when developing now separating your graphical interface from your logic allows a level of abstraction that enables you as a developer to change your implement new code without affecting existing implementations this also enables the ability for a team of developers to work on different parts of the application at the same time without the requirement of each other's implementations XAML stands for extensible application markup language XAML is a XML based markup language designed by Microsoft this represents the visual presentation of a WPF application very similar to how HTML does so for web pages so now we are going to open up our visual studio and take a look at creating a WPF application okay so here we have a new WPF application I started named it WPF tutorial and first thing I want you to notice is we down below here under the designer we have a area to create our zamel now I'm going to talk more about this later but as for now I just wanted to mention it we also traditionally have our tool box now as much as you are able to use this toolbar no different than you were able to in WinForms I still highly advise against using it so in here you can get your traditional controls such as let's do such as your a button and you can drag and drop it drop it however you see down here in our zamel it's gonna automatically generate everything for us and you're gonna see it's gonna already give it a name its content meaning it's in this case the text inside the button it's gonna horizontally align it and give it a margin vertical alignment top and with seven like these are all this is not how it should look this is it's a very terrible and ugly way to be designing things and if you ever want to start doing binding and organizing your sam'l it's gonna look completely and utterly disgusting and there are much cleaner ways to do this which is why I advise and I'm gonna erase that is why I advise against the toolbox one thing I do like the toolbox for though is if you're not familiar with every control WPF has to offer it is nice to just go into here and take a look at what you can play around with another thing we have that similar is if we click our window here you can select it in the designer or in your zamel and if we go over here to our properties page we have similar again to those who have been in WinForms before we can change things like its background color and notice - this is also going to affect in this amel changing properties in the properties panel is usually okay in my opinion so we could change the background colors we can change the foreground we can change the window stay the startup location the center you know anything that has to do with this window we can change in our properties and another thing we have is our events which is the little lightning bolt right next to properties if we click this we'll see all the events that we can subscribed with our window or our selected control we could do the same if I select grid I'll get the grid events I select window I get the window events we also have our code behind but I'll show you the code behind by actually implementing let's say here at our loaded event will say window loaded so that's what we're going to name this and I hit enter and it'll bring us to our windows are our WPF application windows code behind and here we see it'll automatically generate and the event from you when the window is loaded so if I want anything to happen just type the code here and it would happen and then I'll go to our solution Explorer here real quick we also have this is our code behind and which is if you select our exam if we go back to our designer we break the tree down a bit a bit then we have our code behind here we also have our app dot XAML and this is a declarative starting point for your application it's primarily we're gonna see us using it for when we want to create global styles as like a static resource throughout our application so if we have multiple buttons that are all going to be of the same design instead of giving every single button a black background a blue border a blue text we can simply create that style in here and just assign the style to our controls in our application so I'm gonna jump back to the window and now we're actually going to take a little bit of a better look at our zamel and at the top you're going to see these things automatically generated call xmlns now these are our XML namespaces which are very crucial what we do inside of our zamel and even interacting with things outside of our zamel in our solution or our project so we're going to jump back to the slides real quick have a brief overview and then we're gonna come back and actually poke around with the XML namespaces xmlns stands for xml namespace you can think of your XML namespaces like when you have the using namespaces in your code behind these allow you to define an alias that directs to a URI namespace we declare XML namespaces using the following format so in the yellow is an example of the entire format of declaring an XML namespace and we have this xmlns which declares we are importing a new namespace similar to using so this says ok we're going to make a new namespace and then we declare a prefix so where it says prefix is where you would put any name in which you would like to use to refer to this namespace and then the URI which is the location URI of the namespace so these could be links to XML documentation or they could be in spaces to points in your applications such as folders or even another solution so after going back to the slides we're actually going to go back to visual studio and take a better look at using XML namespaces in our sam'l okay so here we are back to our project in Visual Studio and first thing I'm going to point out is our XML and s with no prefix and this is the namespace that gives us our presentation controls so let's say I for example erase this now notice it's not corrupt because necessarily there's nothing provided in here but it's corrupt because it no longer can find grid can no longer find when or even if we had we wanted to do a button we don't have that and even when we open up our carrot here what we see we don't we don't even have any controls listed in the intellisense and this is because all of our controls we go control-z a bit here if we go back all of our controls are retrieved from this namespace here and next we have X so xmlns with the prefix of X and X is used for mapping this zamel namespace in templates for projects so we have multiple features we can use one of them being x class and this specifies a CLR namespace and a class name for the class that provides code behind for our zamel page so notice this as the class WPF tutorial main window if we look here it is declaring to our main window our WPF namespace main window so it's saying hey this is the code behind for our window we also have within our X something called name X name and we can actually name our controls throughout our application so I could name this main grid panel and by naming our controls this allows us to reference it in our code behind so if I go to our main window code behind again and we say hey window loaded no different than actually if I said I a yeah I'll say a string here and we'll say it's in me I could set it equal to a little world okay so now no different then I can access the name variable now by naming it I can access our main grid panel because I named it in our zamel and i could actually say on window loaded i want the background to equal whoops say brushes purple okay so here we go and because I named this we actually ran our application we would see once the window loaded it would turn from red to purple so back to namespaces we also have our XML and s with the prefix of D now D is for design-time attributes to tell the zamel parser not to interpret these attributes at runtime so let's say I I didn't want to define a original height and width maybe the content will adjust depending on how the windows loaded and I could remove this but now I have a giant window and I'll actually go to a hundred for our view here we're zoomed in a bit but now we have a big window and I don't I don't want to be designing in this giant window but I also don't want the window to be defined when I run the application so we can actually use D our team names are our D prefix and it won't be listening intellisense well we could say design let's say design height okay so I could set the design height to let's say 200 I could say D design with I could set that to 200 so now if I wanted to design an area that was 200 by 200 I could do so now because it's going to display it with that size and our designer but when I run the application it's not going to be that so it's a way of just helping you in the designer doesn't really affect your application itself which brings us to our next case MC well MC here I don't know why I pointed down there I'm about to describe why that's there so we have our xmlns M C an MC is a mapping it's it's a mapping for the sam'l compatibility namespace so for example we use MC dot ignore ball D down here and this ignores our D prefix so it ignores our D prefix which means it won't raise any errors when processed by the sam'l parser if we didn't have this for example let's say I'm not even sure what I could so I'll just say we remover for now so if I removed it notice we're not gonna have any errors right away but if I try to run the application nope now all of a sudden we're gonna get in there it's going to say the property design height does not exist in the xml namespace so it's trying to literally use these attributes when our application is RAM which is not what it's intended for it's not intended to be used when the application is running at runtime it's simply used for design time which is what is updating here in our designer so we'll actually bring that back so essentially we can use it to ignore things that we only want to be applicable during design time we also have local xmlns local this is the root of your application normally used for declaring resources controls and converters but I want to make an example out of local by also pointing out that we can similarly like how local is used we can create our own XML namespaces to access locations through the applications such as when we make a new folder so I could go over here to our project I could say add new folder I could say say I want to create a models folder and in this models folder let's say I want to create an object called my model object so now we have a models folder with a class named my model object so now if I want to access this or even just the folder I would create a xmlns declares I am making a namespace I will name it models because that's the name of our folder it doesn't have to be it could be models X Y B and so it doesn't matter you can name it whatever you want but I'm going to name it models we're going to say it goes to our CLR name space WPF WPF toriel dot models so it's going to go to our WPF tutorial namespace and it's going to our models namespace which is our folder and now we have a XML namespace in our zamel to refer to this folder but I actually have an error there CLR not CL IR okay so now that we have a reference point I can create let's say window resources I could create if I wanted a data template based on this model object class I could say data template and I'll get more into data templates I'm just trying to show how the namespaces use so what I'm doing right now you don't necessarily have to understand just understand that I'm using the namespace to access a certain object so I could say creating a data template and we'll give it a data type and if I wanted to declare an X type notice now also we're using our X namespace to be able to declare a tie I can call the models folder and I can say my model object and then we could set the view if I wanted it to be a doctrinal with a background of yellow let's just say that's what I wanted whoops I don't know why that's bothering me what yeah so if I wanted a dock panel with the background of yellow and here it's going to say model my model object does not exist and it's saying that because nothing has been updated yet so if we do a rebuild on the application everything should run smoothly and now that all that has been mentioned we are going to jump back to the slides one more time I believe this will be the last time and we are going to discuss data context in WPF data context is a concept that allows elements to inherit information data context is your application grids buttons labels and other controls are simply friendly tools that allow users to interact with the data behind them the data behind them is what I mean when I refer to the data context in WPF the data context is primarily used to implement binding in your application which is something we will cover in more detail at another time so again let's go to our visual studio and see exactly what I mean so now that we're back to visual studio I'm gonna try and do my best to rather than explain I mean I will explain but more still then explain I kind of want to show you what the data context is because at least for me it was a it was a difficult thing to grasp and really understand so let's say we have in our grid let's create a step panel and within this stack panel we have two buttons name it button one give it the text of button one button use our X namespace to name it button to button two and again if you're not really understanding stack panel and me using buttons you can just try and follow along these aren't crucial because again I'm just using these to try and portray the idea of the data context to you but actually instead of naming it button 1 and button - I changed my mind going to access its content property and just for filling it going to put the text we want and its content property first so now that we have our buttons we can actually assign a data context to the button or even our window but in this case we'll be signing the data context to our buttons and what this means is anything we define in our zamel or even in our code behind but more so for our zamel will be that information of its data context so I could set its data context to the my model object we created and we'll say public string will give it a string of the name and in order to bind it has to be a property it cannot be a field it has to be a property so we'll say Maya model object name and we'll go to our code behind and on our main window and on its initialization we're going to access our button or rather we're going to first create my model object going to have to add in a using namespace of WPF tutorial dot models or control dot and enter should link if you named the control correctly so we're going to create one and we'll call it button one data context equals and we'll just say a new model object and we'll give it a name of button one okay and syntax error whoops that's supposed to be there and we're supposed to say that and equals and we're not supposed to have that they're supposed to have that they're like I thought in the beginning okay so we have that and we're going to copy-paste going to call it my button to data context and then this name is going to be my name button too and then we're also going to access our button one and here we will access its data context property and we will set it equal to button one data context and a button to data context will set to button to data context so now our button one is going to have the data context of the first object we created and our button two data context will equal the second object we created and both of these objects the data in them okay is going to have the properties we set so we hop back over here to our main window and replace the content and this is where we're gonna kind of get a first glimpse at binding and we say binding name for both of us I want binding name so what this is going to do is it's going to bind to ever property in its data context that is called name if it doesn't exist it just won't display so we could say binding name and we'll say finding bad name okay so now if we ran our application whoops I always hate this little designer tool here but as you can see it says I'm button one but rather than doing that I'm gonna give this a height of 50 just get that out of my way okay so a button one will have a height of 50 but this time button one will have the bad property in button two will have the good one okay so here we have it display the name property of its data context then this one is blank because we gave it a bad property this property bad name does not exist in our data context we could make it exist we could say public bad name and again we have to make it a property in order to bind now we can go over here to our code behind and we could say it was button one that we messed up so we could say button one bad name equals I'm button 12 and if we go back here notice it's not going to show in our designer as well but now if we start and run our application it'll say I'm button 12 because it's binding to the property bad name of its data context we I also would like to show you that we could change in state of context but in order for that to update in the designer we have to start talking about notifying on property changes too let's something know that it needs to update and yeah so we'll talk more about that later but I hope you understand at least somewhat of the idea that I'm trying to give here which is the data context is nothing more nothing more than the information behind it so you can give the data context to the window to a text block to a stackpanel a doc panel to any control you can give a data context to it and whenever you refer to binding to properties in these amyl it'll bind to that property if it exists in the data context so just think of the the graphical interface as it's nothing more than a skin and full of buttons and when you push the buttons behind it is where the actual logic takes place take your if you look down on your keyboard for example on your keyboard you have your key caps and your key caps are over buttons and when you push the key cap it'll push a specific button now I could replace the left arrow key on my keyboard with the top arrow key I can take the key caps off and I can put them in each other's positions and despite the left arrow key saying left if I place it on the top where the top arrow key is supposed to be and I push that it's going to push the button that reacts to the top button being clicked so just because I changed the key cap it's it's front-end display and what it what it looks like to me isn't changing what it's actually doing when I push that button in that spot so I hope I didn't just make that any more confusing because I kind of feel like I did I think I didn't do too bad if you have any questions or if I did make anything more confusing feel free to leave leave a comment and I will gladly do my best to respond and not be more confusing about things

Channel: ToskersCorner

Views: 85,111

Keywords: C#, .Net, Programming, tutorial, beginner, how to, C# programming, wpf mvvm, wpf binding, llearn to program, wpf xaml, wpf tutorial, learn C#, wpf xml namespaces, wpf xmlns, wpf for beginners, wpf introduction, c#, .C#.net, wpf, windows presentation foundation, youtube tutorial, wpf data context, programming for noobs, winforms vs wpf, is wpf better than winform, mvvm, microsoft visual studio, microsoft, introduction to wpf

Id: WYBoTT2ce8c

Length: 28min 0sec (1680 seconds)

Published: Wed Dec 21 2016