Views - WPF MVVM TUTORIAL #2

we've completed the m of our mvvm application the models now we're going to move on to the v of mvvm the views so i'm skipping over the view models for now because i want to have the models done and the views done and then show how the view models combine those together so we are going to be focusing on the views here and the views that we create are going to support the use cases that i showed off last time so just a simple use case diagram we have here our user is going to be able to make a reservation and view their reservations in our resume application so that being said we're going to have a view to make a reservation and a view to view reservations in our project let's create a new folder for views and our first view is going to be a user control so that's how we define views in wpf mvvm applications and this is going to be a make reservation view and then the other view we're going to have is another user control and this is going to be the reservation listing view so this view is going to display all the users reservations let's create that and then we don't have any navigation set up in our application so for now we're just going to display one of these at a time on our main window as we develop the application so the first view we're going to work on is the make reservation view so we will define that here in our main window and we're gonna have to import our views namespace so we can do a control dot import the namespace and we'll just leave this for now so our make reservation view will be displayed on the main window and just to test this for now we'll just throw a text block in our view and just throw a little hello world on our make reservation view so let's see this and we should see this text block and there we go off to a good start so now we just need to actually build the ui so before we start cowboy coding this user interface i did prepare a wireframe and i don't do my wireframes in visio that would be a little bit difficult i actually use figma which is a great free to use tool so we got this simple very simple wireframe so to make a reservation the user will enter their name enter the floor number and room number for the room that they want to reserve and then enter the start date and end date for their reservation and then they can submit that reservation to actually create it or cancel and go back to the view reservation page so to begin this grid we're going to have some row definitions in here we're going to have a row for our title the make reservation title this can just be auto height we're going to have another row for the name field another row for the floor number and room number fields another row for the start date and end date and another route for the submit and cancel buttons so for the make reservation title that'll go in row one we use our existing text block and make that say make reservation i'll make the font size bigger we'll go with 24 and this is grid row zero so these rows are zero index can't forget that now for the name field this is going to go in its own grid and this is going to be grid row one so the second row and we're gonna have two rows in here as well one for the name label and another row for the name text box so these can both be auto again and in the first row we want a text block for the name label that'll go in grid row zero i know zero is the default but i like to define all my grid rows and then underneath the text block we're gonna have a text box so that'll be grid row one and the text that we enter into this text box is gonna have to bind to a property on our view model which we'll eventually create so for now i'm just going to leave it blank and we'll get into this when we get into creating view models and then maybe we should put some margin on the top of our text box so that's not up against this text block too much so we'll do five at the top the way margin works as it goes left top right and then bottom so we're doing five to the top might be too much we'll play with it later now we're also kind of another row underneath our name so i'm just going to copy all of this and paste it into row two and this is gonna be for the floor number and room number fields so we do have two fields in here and those are side by side so we are gonna have some column definitions in here as well so these can just be auto with so our first field will go in grid column zero that's for the text block and for the text box and this is for the floor number again we want some top margin on this text box and then we're going to have another field in the second column so we're going to copy this and this is going to be for the room number except this is gonna go in column one which is gonna be our second column actually and then i'm gonna want some margin to the left of this second field so we can add that to both of our text blocks just margin to the left so that's this first value let's do five for both of these and then honestly my start date and end date row is pretty similar so i'm going to copy this entire row and paste that down here except this is row three now and instead of text box for the entry we're gonna have a date picker and i believe eventually we're going to have to set up a binding to selected date so this the value that's going to get sent up to the view model we'll get that set up later and we want that for the end date as well this is grid column 1 and our fields are start date and end date so lastly we have our submit and cancel buttons and so far we've just been using grids as our panels and we've been defining rows and columns inside the grid but i feel like for the buttons we can just go ahead and simplify this with just a stack panel and set the orientation to horizontal so everything we put inside the stack panel will just get placed side by side and this is grid row 4 i believe so we're going to have a button to submit the reservation and since we are in a stack panel we know to define grid rows or grid columns it's just gonna put them side by side and then we're gonna have another button to cancel we'll throw some margin on here so five to the left sounds good to me and these will also eventually bind to commands on our viewmodel and i'm just now realizing we haven't added margin to any of our actual grids so all of our rows are going to be really close to each other let's go ahead and fix that real quick so the spacing between the make reservation title and the name field gonna want some top margin on that probably a lot maybe like 50. that might be a lot we'll play with it when we get into live debugging so we are going to eventually start this and debug we could do that now in fact let's do it let's see how bad it looks so all right so 50 is definitely way too much let's stick to 25 and then for all of the other fields we'll do maybe just about 10. so apply that for all of these rows and then for the buttons i think we'll go back up to 25 to get some good spacing in there i think that's better i also need margin on this date picker right here so we'll do five to the left on that get a little space right there we might even want more let's do 10 to the left for all of these so same goes for our buttons down here spread things out a little bit more and then for the room numbers as well and the floor number increase that the 10 i think that'll look good to step in the right direction i also want my floor number field and my start date field to be the same width and same for the room number field and the end date field so to do that we can use something called shared size scoping so on our root level grid we can set grid shared size scope to true and then for the floor number column the room number column and then the start date column and end date column we can set something called a shared size group and we can give this a name so we'll call this the i guess just first column and then second column for the other one so copy this down change that to second column and then let's just copy both of these shared size groups and apply those to our columns on the start date and end date grid to paste those in and now as you can see everything lines up because this column so this the column for the start date has the same shared size group name as our column for the floor number so these are going to have the same width no matter what so even if the start date column got gigantic so let's make the width like a thousand for this start date date all right maybe that was too much so let's try 500 so as you can see the floor number also grows to match that width as well so shared size group a great tool to make sure all your columns are in line if you want them to be lined up we do in this case and then the last glaring issue is that our content is pressed all the way up against the side of the screen and also the top as well so what we can do is add some margin to this make reservation view except i actually think i want this to be applied to all of our pages so i'm going to put the margin right on the main window grid so we'll define a margin we'll do 20 left and right and then 10 on the top and bottom and there we go that looks better already and then our content doesn't really need to take up the entire size of the screen like what if we went full screen it would take up everything so what we can do is set a max width so we don't have much content on our screen and we're also not going to have much for the reservation listing view so we're just going to set the max width to about 600 there we go and then it gets centered and then our content doesn't grow to astronomical widths let's also put some padding on these buttons that's kind of nasty so let's go into the make reservation view and apply some padding here except i actually want this padding to be applied by default to all of our buttons so what i'm going to do is head into the app.xaml and we have these application resources so we can open this up and define a default style for our button so we'll set that as the target type and since we don't give this style a key that means the style is automatically going to be applied to all of our buttons so we want all of our buttons to have some padding so i have a setter for the padding property and i think i want 10 left and right and maybe 5 top and bottom that might be too much too little let's see that that looks pretty good actually pretty satisfied with that i feel like these text boxes could also use some padding so we can define a default style for that just copy this existing style but this is for the text box and this is going to take much less padding we just do two whoops and this should be text box not text block and there we go that looks better just enough and the last change i want to make is i think i want my default font size to be 14 so just a little bit bigger and that looks better so that should be everything for the make reservation view let's switch over to the reservation listing view so we're going to set that as our view in the main window change this to reservation listing view and the reason we're just hard coding it here is because we haven't set up navigation infrastructure yet so i also went ahead and created a wireframe for the view reservations page and originally based on our use case diagram and based on the methods that we've created i was expecting for the view reservation page to display reservations for a user hence why we have this get reservations for user but i think what i actually want is this to just display all reservations so we're just going to make this get all reservations and get rid of the username parameter and get rid of the where filter update my documentation and then do the same thing for our hotel this is now going to be get all reservations and no more parameter and the reason i decided to do this is because we don't really have any kind of authentication setup where we can determine what the current user of the application is so it'll be simpler this way and we can focus on building the mvvm application so anyways back to our ui i have this wireframe for the view reservations and from this page we're also going to be able to make a reservation but anyways the main content of the page is just going to be a list of all the reservations so let's go ahead and create this on our reservation listing view we're going to have a row for our header which is also going to contain the make reservation button and then after that all we're going to have is one more row for our reservation list view so our header this is going to be a grid in row 0 which is the default and it's going to have two columns because we're going to have a column for the view reservations header and also for the make reservation button and for the width of my view reservations header i actually want this to be star so i want this to fill the entire remaining width which is going to result in our make reservation button being pushed all the way to the right and this header is going to be a text block and column 0 and the text is just going to say view reservations and the font size is going to be 24 same thing as the make reservation view so in fact while we're here we could move this into some kind of style the header style of course our header isn't very complex but we do want it to be consistent between our pages so in our app.xml.cs we can have another style and the target type is going to be a text block and this one is going to have a key and the reason we want a key is because we don't want this text block to be applied to all of our text blocks in the application we only want it to be applied to our headers so we're going to give it a key of heather and all this header is going to do is set the font size to 24. and now we can use the style in our reservation listing views to remove the font size and define a style instead pointing to our style which we can reference with static resource and the key of that is header so we're gonna do the same thing in the reservation view remove the font size and use the style instead for ultimate consistency and then to the right of our view reservations header we're gonna have a button and the content for this will be make reservation so that's the text that'll be displayed in the button and this is grid column one so to the right and we'll throw some margin on here to the left just so that we can guarantee that it'll never touch this text block so that should be good for the header now we just need our list view and for this we are indeed going to use a list view control so this is going to go in grid row one let's throw some margins at the top i think we're going to roll with 25 and there's multiple approaches to display data in list views for example we could define a list view item template and then all the items in our list view which would use this data template that we define as the item template and then inside here we just have a grid and then we just throw in whatever we wanted so we could just have text blocks for our room id username start date and end date but you may notice that in the wireframe everything is aligned in kind of a grid formation so item template we could make it work we could have some kind of grid format with strict rows and columns but there's a much easier way to do this and that is using a grid view so we can set the list view view to a grid view and then we just have grid view columns for all of our data so our first column is going to be for the room id so we'll set that in the header room id and then this grid view column can bind to some kind of data on our list view items and that is set with the display member binding property but we can't really get into that yet because we do not have our v model set up so for now we can actually just hard code some data by setting the grid view column cell template to a data template and inside here we're going to have a text block and the text for this will just be some kind of hard-coded room id we'll do something like 12 and then we're gonna have three more columns so we can just copy all of these we're gonna have a username column so we'll hard code some data in there then we'll have a start date hard code some more data and then a column for the end date with some more hard-coded data so let's actually run this and we shouldn't actually see anything in our list view because currently our list view has no data to display inside the grid view but let's see how everything looks so we at least do get the columns so that's nice and actually to get our data to appear we can just throw in some list view items inside of our list view and they don't actually have to have anything on them but these list view items will be displayed in the grid view where we've hard coded all this data so it doesn't really matter what the listview items are we're going to see data in our grid view and let's see this and there we go there's our data so i actually want the vmid field to be centered so what we can do is horizontal align center on the text block and that actually doesn't work so the reason that doesn't work is beyond me but we can set the list view item container style and this is going to be a style targeting a list view item because those are the items inside the list view and if we set the horizontal content alignment to stretch then our horizontal alignment on this text block will actually work and then we have to restart let's try that there we go there's the horizontal alignment and stays in place as we resize the column and lastly i want some padding at the end of each of these columns because they're all kind of pressed up together so easy way to do that is set some padding on these text blocks so we can just do maybe 20 to the right and we'll go ahead and do that for all of our text blocks so the start date and the end date and it's really not perfect with the wireframe the wireframe looks a lot better with the fluid background and the border and the bold headers but maybe we'll go through at the end of the series and have some bonus content where we go through the entire ui and do some advanced styling for example these buttons could be better but for now it's good enough it'll eventually display the data that we want to show to the user so we got both of our views let's see the make reservation view one more time there we go that looks nice and actually i think i called it username on the reservation listing view so i should probably call this username as well for consistency let's change that but we got our views we had our models now we need our view models to bring it all together and we will do that next time but hopefully you can apply these ui concepts to build your own views in your mvvm applications if you have any questions criticisms or concerns be sure to leave them below in the comments section if you are enjoying the channel or enjoyed the video consider becoming a member other than that leave a like or subscribe for more thank you

Channel: SingletonSean

Views: 58,654

Keywords: wpf, programming, visual, studio, xaml, custom, control, generic, system, line, display, timer, template, binding, c#, how, to, series, tutorial, easy, time, maintain, package, design, part, event, code, framework, register, static, state, default, view, style, wrap, panel, stack, scroll, viewer, first, width, action, void, model, layout, user, box, mvvm, data, error, icon, class, relay, clean, simple, sub, log, file, host, grid, scope, align, margin, deploy, github, actions, release, download, essential, validation, rule, logic, animation, key, frame, storyboard, story

Id: UQOi48H_84s

Length: 17min 42sec (1062 seconds)

Published: Sat Sep 11 2021