WPF Introduction: Grids, MVVM basics

okay so let's continue after a short repetition which we did just now from um two weeks ago we will continue with some selected chapters of WPF before we can write our very first working WPF meaningful sample we need a little bit of more background information just for your um as a reminder remember last time we created this very very simple sample I hope you still have it on your computers you can open it if you want uh would make sense um and what we did last time I pointed out oh we didn't we don't need that one that was just a question from before um we created this main window here and inside of the main window we set the data context and then we did some binding on single properties like person name and we did a binding on a collection for instance the observe able collection and then I showed you how you can do data binding for a single field as you can see it here and I showed you how you can do data binding to a collection with a data grid and item Source uh and here we have an observable collection uh last but not least we had a text block as you can see it here and this text block was bound to the selected teacher where we used the capability of the data grade to select a single item fine so far I hope it is okay very good now all of these things were uh put into a stack panel a stack panel is as the name suggests a panel um whose primary task is to arrange child elements it's children and the stack panel can either be orientation vertical as we see it here so it stacks the element one above the other or we can also change the orientation I think I showed you that last time by moving it to orientation horizontal and then it Stacks the element from the left to the right okay good now let's take a look at a more interesting panel so let's go on and remove the stack panel we are now going to take a look at a panel which you will use a lot also in your exam and also during the final exam which you will have in a few months and this is the grid the grid is as the name suggests a grid similar to let's say an HTML table if you want to U put it like that and inside of the grid we can also arrange different elements for instance let's put a button here in it and let's call it uh this is button one for instance so if I scroll down a little bit you will see that the grid does something special it um it it it resizes the button so the button fills the entirety of the grid okay so the button is autoscaled to the size of the grid the child is asking its parent the grid how much space can you give me and the grid says I give you all that I have it doesn't create a scroll bar so it makes it it doesn't make it larger than the available screen Escape but it aut scales the the button okay what happens if we create a second button here let's duplicate this line and put here a button two now if you take a close look let me zoom in a little bit to 100% then you will see that suddenly the button two is stacked on top of and I mean z AIS on top of the other button the button one is no longer visible so if if you don't specify anything in a grid it will simply stack the elements one on top of the other meaning z-axis German T ax okay good fine nice this is obviously not very useful well sometimes it is if you have something that is semi-transparent it would maybe make sense to put it on top of something else you could do something like this then it is okay to Simply use a grid to do a cais stacking but most cases we don't want that so the grid needs something else now let's take a look what the grid can do we can say we want to create a column definition not a column definition I was I was not precise here um column definitions plural we can create columns we can simply say okay let's create um a column definition and then we can define a width as you can see it here and now let's simply say the width is star for instance let's simply say the width is star and then let's create a second column definition also with the width star and maybe you can already guess what's happening behind the scenes do you see what we have here we suddenly have two columns because this is exactly one star meaning one fraction of the available screen estate what happens if we say two star well you can guess it now we have um a divider of three and the First Column is 1/3 and the second column is 2/3 of the available screen Street I think I do not need to show you what happens if you say three star I think you get the idea right what happens if we simply say um in the First Column aut to what happens then now let's take a look let's scroll down you will see that now the size of the element the size of the grid column is determined by the size of the children very very useful isn't that much more much simpler than CSS grids well yes it is but it's not as powerful as CSS grid yeah so it is simpler as DSS grids but yeah CSS grids understand more the problem is still that we have both buttons in the First Column now how can we make the second button go into the second column let me show you how we can do that we can simply say grid. column equals 1 let's see what's happened oh works the columns are zero based by default elements get into the first meaning index zero column or row respectively we can of course create rows we will do that in a second and now we have two buttons Side by by side in a grid useful isn't it small trick if you create a grid and you are just about to um to to to implement the the layout you are you haven't already filled the the entire window if you run this here you do not see where the columns are see that you simply say a white you simply see a white space you don't know where the columns are there is a really useful property which you can use in such cases you can here say show grid lines set that one to true and if you then run the application again WPF will show you where the columns and rows are by adding these Dash lines of course you don't want to have the dash lines in a final application please remove them before handing Your solution in but if you are looking for mistakes in your grid definitions you you can obviously do exactly that so I will keep the show grid lines true it's useful when designing the WPF grid for now good now let's enter the buttons again and now we will add row definitions grid row definitions and getup co-pilot will probably suggest something for me probably maybe get that co-pilot please do your magic okay it doesn't work don't matter doesn't matter um this is now the height let's specify the star and let's duplicate this Ro definition and I guess you will probably immediately understand what's going on do I need to describe anything else I think I don't right now we have a grid with two columns and two rows easy cheesy no problem good I think you by now you you can understand from your existing experience as developers that you can that this feature will come in very handy when you for instance Implement an input form where you want to have your your labels NE neatly aligned one below each other and in the second column you maybe want to have the input fields and they want they should be also neatly be aligned and things like that that works pretty nicely however this system is way more complicated when you want to build responsive layouts so if you have a small device then the label should be on top of the input field when you have a larger device the label should be to the left of the input field something like this is in HTML and CSS a piece of cake it's really not difficult you have media queries and things like that in a WPF that's much harder so WPF was never designed for responsive layouts that scale from small device like this to a huge wide monitor on the desktop of I don't know a commodity Trader for instance it was always designed for desktop apps where you have a monitor of a decent size okay so The Sweet Spot of WPF is not responsive design but as I said for desktop applications you often don't need responsive design so for that it's easy okay let's please add a third row here and that then let's add another button this time we are going to put it in the row two button three this will give us something like this but now I want to have the button three to span over both columns that is something that you often have right good and you will see it's really really simple you simply say grid. colum span equals two and if you run it again you have exactly what you expect voila two buttons on the top then we have a row in the middle which is empty and then we have the button on the on the bot make sense yep perfect now obviously we can do a little bit of design here we can for instance say hey I have a margin and I would like to have a margin of 10 let's see what's going on I do not even need to recompile everything you see that we now have a margin here on the right hand side if we just say 10 it gives us an an equally sized margin top top left right bottom if I say 10 and five you will see that we now have on the left and on the right side the 10 margin and on the top of the and the bottom we have a five margin um what else can we do we can say 50 uh 40 30 20 and then you will see that the first element is the uh the the the left margin the second is the top margin the third is the right margin and the fourth is the bottom margin got it nice same is true for other things uh for instance if you say hey uh is there what else can we what else can we do ah it it's fine it's fine I think we don't need to overdo it now for for study any questions so far great clear we will use it a lot well obviously we can Nest grids let me show you what I mean now we are going to add a grid inside the grid grid grid do column equals 1 grid do row equals one and now we can again say let's make a great column definitions and let's add two columns okay uh column definition with width star and let's make two of them let's again say show grid lines true and then we are going to take a look what happened so do you see it up here now we have a large grid and inside of the second row and second column zero based this is why I have to specify one here we have a grid which separates the Single Cell into two columns understood yeah does it make sense wonderful now you can take this grid and do whatever you want to it it simply works this concept of combining intelligently combining panels is a core property of WPF okay it's really important that you understand that and of course I can now use a stack panel inside of a grid inside of a grid so what I can do is it I can simply say hey give me a stack panel please put it in the grid column one and here I'm going to add another button here it is button uh and do something like this and now we get the buttons stacked inside a grid which is inside a grid so very similar to what you know from HTML zaml isn't very different but the whole layouting internally Works entirely different it is optimized for desktop applications now again just to make an obvious point you can change the horizontal alignment oh sorry the um the the the um orientation this is what I meant sorry um to horizontal and then the buttons will be stacked from the left to the right so when you design forms in WPF you always have to keep in mind which panels do I want do I need a grid do I need a stack panel do I need a a dock panel do I need something else you can definitely do that got it make sense okay last but not least and then we go into a short break follow me I will now blow your mind hope hopefully we'll see we are going to create a button around the grid What a button around the grid so the button opens before the top level Grid and it closes after the top level Grid and suddenly we get the entire layout inside of a button see and it's still a working button I can still click it if I want and the whole layout is now inside of the button as you can see you see your grid you see your stack panel everything well it's not scaled to the total size of the button because this is how the button performs it doesn't give its children the entirety of the button it only gives the children as much space as the children really really really need but this is exactly what what you get and this is pretty awesome imagine that you need a button where you need to display an icon with some text information below it you can simply use the grid with an image and a text block inside of a button and yes you can put the button in a button in a button in a button in a button and it still works you can put a button in a list box you can put a button in a combo box in a combo box item so that the user has a button he can click uh when he wants to do something with a with a certain icon do you get how powerful this abstraction is this is something that HTML is not capable of doing try to put a complex layout inside of an HTML button it's simply not possible so here we really see a difference from WF to other um other platforms like like HTML for instance good so what I wanted to show you now is the the the working with the with the GD and I hope you understood that now we have a short break okay so let's get right into it again before the break um we discussed that in WPF we can put we can do something crazy like putting a grid into a button this is true because the button is a so-called cont um content control if we take a look at system Windows controls button let me show you what that means um if I go to system Windows controls and button then we will see as soon as the website loads that the button is a so-called content control that means that it has an content inside of the XML uh element it's not like a text where you have a text property but you have content inside the button tag what I mean with that is you have the button then you have a Content inside and down there you have the closing tag all the EX all the zaml elements which work like that are content controls and you can put in them whatever you want for whatever reason this website now doesn't load but you have to trust me that this is the case good nice now I would like to show you one final thing and then we are are good and we are doing some exercises concrete one exercise that I'm going to show you and it will help you overcome any problems but before I would like to demonstrate one final thing please get rid of the button that we added before the before this uh the break because it's it's really not meaningful I it just serves the purpose to demonstrate the principle but that should now be okay oops now let's take a look at the SHP code and let's discuss the C code again currently we have the logic like person name and teachers collection and the selected teacher and the property changed all these things are directly inside of the main window some people call this spaghetti code because you have the main window which implements The View and you have the entire logic okay this is a this is a problem to a certain degree so so therefore what you typically do is you extract the logic of the UI into separate classes those classes are called The View model The View model are classes which are not directly related to the visual appearance of a form it doesn't matter if the button is green or blue or if it's a a combo box or a list box it really doesn't matter it's the pure logic if you think of let's say um a digital clock the logic would be the current time and the fact that the clock increments every single second that would be the view model the display of the clock if it's a digital clock a seven segments display clock an analog clock that will be the view okay if we write code in WPF we typically follow the mvvm architecture meaning you have a model which are the pure data classes just like Entity framework hell then we have the view model which implement the view logic and then we have the view MV model view VM view model mvvm pattern you will hear that a lot in the upcoming weeks now how can we make this thing follow the mvvm pattern it's really not complicated what we do is we add an additional class to this project let's add a class and let's call this class main window view model once we have this class we go into the main window and we simply move all the things which are not directly related to The View into the view model if we would have some complicated Logic for view specific drag and drop operations that would be part of the view but here we really do only have things which are in the view model person name it is view model the teachers collection it is view model mod the selected teacher logic it is view model obviously the property changed it's view model the button click now this is something that is related to The View because this is a button click we could do something different we could use some AI to recognize the speech and call this functionality later on it's a button click so let's let's leave the button where it is but this thing we are going to cut it out and put it here into the main window view model so I simply add it here and of course I will get an error or I will not get an error but it's not completed because I forgot something I need to also implement the I notify come on notify property change okay so now we have this main window view model here and if I can remember correctly here we also have a class teacher and this is also not related to The View so let's also move the class teacher into the main window view model let's move it here oops of course inside the namespace good now we have a separate class implementing the entire logic there is no direct relationship to any WPF we could use this main window view model for a completely different user interface technology we could use it for Wind forms for instance we could use it in wi UI we can use it in other language and other platforms that display a UI it's not directly related to The View that's the point but now we have a problem because as you can remember that data binding refers to our properties like person name like teachers but now we do no longer have these properties on our main window we also do not have now the I notify property change can you guess what we need to do in order to connect our main window with the view model I want to have a line number where do I need to change something to make my code run again can anybody guess it I give you a tip what about line 24 any idea it's the data context right currently we say hey the main window is our data context but this is no longer the case you know what you can do we can simply say new main window view model see and that's it now all our data bindings are no longer referring to the main window but they are referring to the main window view model and there we have all the properties there we have the collection there we have the I notify property changed so that's the important thing in real world application it's everything is a little bit more complex because you typically would use dependency injection and things like that we will cover that later but for now this is fine well this button click here also refers to various things inside the main window view model let's keep it simple let's simply cut this out go into the main window view model and add a helper method public um I think it was white and what did this thing do this is just a demo click or something I I think it wasn't it wasn't meaning was it no it just demonstrated various aspects so um you see we now have a method in the main window view model demo click or whatever you call it and then we can go here in the button click and simply call the demo click we say data context we cast it to the main window view model we can easily do that because we absolutely know that the data context is a main window view model and simply call the demo click this is fine this is now linking the view the button to the method whose implementation is in The View mode good let's give it a try okay let's run it oh yeah it works I can click on it it still works everything is fine it compiles the layout is correctly perfect is correct not correctly do you get the idea this will be a core element of the upcoming exams and also your final exam you must understand the main window view model uh sorry the the mvvm the model view view model architectural pattern you must be able to separate the logic in WPF from the view in WPF got it so this is the template you have to remember this one you design the user interface in zaml the code behind file is very small typically it only consists of setting up the data context and maybe some simple button handlers and everything else has to go on in the main window view model the main window view model does not know about the UI the UI knows about the view model layout architecture I'm pretty sure this was covered in other courses that you had during your five years here in the school beautiful layered architecture that makes also unit testing much simpler because we can create unit tests for the view model it doesn't have a relationship to the UI we do not need to remote control the UI in order to test our application we can fully cover the logic of the UI by writing unit tests for the view model view testing is also important but it's very difficult unit testing a view model it's much simpler got it perfect questions I see many nodding uh heads hopefully not to my question about the questions good nice let's give it a try I will now sketch um an example and I ask you to try to implement that example I'm I'm curious to see whether you will be successful

Channel: Rainer Stropek

Views: 649

Keywords:

Id: fbZG1xin-PA

Length: 30min 37sec (1837 seconds)

Published: Thu Feb 15 2024