Build a Task Manager with C# WPF & MVVM - Part 2: Intro | Setting Up & Structuring Our Project

hi devs welcome back to another part of this task manager tutorial series that we're doing first of all I just wanted to show you the end result of what we want to achieve I've just put this together in figma as you can see we've got four columns we've got a left hand side R menu got a column for our list we've got column which will represent our task View and we've got a column that's basically for the status I call this the status column so we've got a menu list View and a status column just looking at our menu we've got three options well we've got four options actually we've got a settings as well but for the most part we've got our main list that shows all of our tasks we've got a completed task list and a anything that's in progress if we look at our task list we've got an ad button so we this is where we'll add our tasks we've got a search bar where we can search for our tasks and we've got our tasks in the form of a task list item which contains the title of our task a category description and a due date when we click on one of these items this is where the view will pop up all the details so we've got how important the task is the task title the description the due date and our list items that we're going to be adding to it so say we're building a computer this is where we can put tasks within so add RAM add CPU you know like going more into detail with our task uh they're optional obviously but they're there if we need them at the bottom we've got some buttons delete edit and complete and if we look over at our status column we've got a timer so if we're doing any maybe the person that is using it say they're a freelancer you can time how long it takes you to do a task and we've got a status badge and a category badge and a share button if you want to show it in an email or something when we click this button over here to add a task this is what will pop up this is our add new task window so we've got a title we've got how important our task is a task description this is going to add to our task this is what the these are and then when we click add it'll add them down here and then due date due time whether we want to include this or not and a task whether we want to add it to our calendar so cancel obviously we'll cancel the form and it might pop a message box just asking if we've already like put a title or something in it it'll ask us whether we want to or we show we want to cancel it and then our add task which will just add the task to our list that's just a brief overview of what we're going to be creating um so first of all what we need to do is go and download our visual studio just in case anyone's watching that doesn't have it and I'll see you there so head over to visual studio. microsoft.com scroll down a little bit go down to download and then just download Community 2022 when you're installing just make sure that you've got this one selected I've already installed mine so I don't need to do it but net development make sure that this one's selected cuz this is the one that we're going to be using once we've got it downloaded and got it installed and everything then we just want to start a new project so to start a new project once you've opened up visual studio just click create a new project we want to make sure that we're choosing the right template so we need to type in WPF and then NET Framework so it'll be this one at the top Windows presentation Foundation client application just select that and then click next I'm going to call mine task Turner random I know and the name space uh so task Turner and then click create okay so before we actually do any design work or anything like that there's a few things I want to do over in the solution so if you've never used Visual Studio before there's a few parts to visual studio that's very important this is probably the most important because this is our visual feedback this is our main window and if you look in our solution Explorer this is our solution this contains all our uh project files um this is our project task Turner or whatever you've named yours and then we've got properties uh references then we've got an app config this gives us information about our app we've got an app. zaml and we've got a main window we open up app. zaml we're going to be changing this in a minute because we're going to be moving our main window but first of all we need to actually create a few folders so to create a folder right click on our project go to add folder remember this is mvvm so we're going to need to add a few folders so we've got model view view model that's what mvvm stands for so we've got model view view model we're going to add a few more folders as well so we need assets we're going to need uh Services we're going to need dictionary dictionaries not data service service so we've got all the folders that we need the assets we're just going to add a few more we going to have images data and files in fact we can put data inside files and just one more in files and just put txt just in Cas we need any text files okay so now what we want to do is we want to come back down to our view and we want to just drag this main window into this view because we want to keep all of our views in our view folder in fact I'm actually going to change the name of this just to make it blur Ral same with model and then view model but if we go down to our app. zaml this is what I mentioned earlier here we need to change that to fuse slash so it knows where to start up just give the application a run just to make sure everything's working all right did you see how the window actually started up here I want to change that and type in window startup location and just put Center screen if we go back to our figma design we can see that we've got a left hand column task column a status column this column is the the column that hasn't got um a dedicated size this is just going to change this the window so if we make the window a simpler way so if we actually close if we do this the only bit of this that's going to change is this bit this is going to go smaller or bigger depending on the size so we actually need to set the size with dedicated sizes so let's start with this left hand side this is 80 pixels WI we're going to add some grid columns so if we do our grid. column definition there and then we just put the our columns inside that so we'll say CD tab tab and that's created one column so we've got our four columns which is what we need this first one is going to be 80 pixels so type in 80 let's go back this one is going to be 435 435 um this end one is going to be 140 this one's going to be 140 now the size of this window is way too small for what we need it so let's just grab the actual size so the width is going to be one 128 and the height is going to be 832 like that to zoom in and out of your view just hold down the control and then your middle Mouse button and to move it around you can just press space and then move it around like that and then we're just going to save that so now we've got our columns in the right order um next what we want to do is we want to add some dictionaries so we want to add some resource dictionaries so go over to our solution Explorer right click on dictionaries add new we don't want that folder sorry go over to our dictionaries right click add new item then go to WPF and then resource dictionary and then we're going to create one called color no we're not we're going to call it colors right click again add new item this one is going to be called icons and one more this one is going to be called Styles but at the moment they're just they're just in the application they aren't doing anything so we actually need to coup it up to our app so if we go down to our app. zaml open this up and then do resource dictionary resource dictionary. merge direct dictionaries so first of all we need colors so in between the resource dictionary. merge dictionaries open up resource dictionary Source colors gotl then we're going to add the icons ions do ZL and then Source dictionary Source styles there we go and I'm just going to come up to build and I'm going to rebuild solution just in case so now we've got a place where we can put our colors the data for our SVG images and our Styles so now I want to come over to models and we're going to add a task model which is going to contain all the information for our tasks so let's go add class this is just going to be task and change that into internal to public so let's add some properties so first of all we're going to have an ID so public in ID get and set then we're going to add a public string title public string scription uh public dat Time new date and then public date time start date then we need a billion is complete I'm spam and this is going to be timer and actually we need to add a few e numerals so you can think of an an enome as a combo box where you click on it and then you've got a list of different items that's what this kind of is you can think of it that way that's how I kind of always think of it so task State and in inside here we will add yeah so these are what and and the reason why I've added deleted is because I'm I'm thinking about adding um an option so if you deleted it you have like 15 to 30 days or whatever until it actually deletes completely cuz sometimes you might be like oh I deleted that by accident and I didn't want to so I'm going to add that option in we're going to add another enum um this one's going to be called public enome and I'm actually going to paste these in I actually wrote These out in Visual Studio code earlier so I'll just slowly go down there for you so you can see so that's the category and and there's just one more importance and when you hover over it'll give you the information that's in the summary so if you creating a method or anything and you want to add that when you hover it that's how you do it you add sumary there okay so now we can actually add this to our task objects so we're going to go public task state public task importance task [Music] importance public task category category and now we want to come back over to our models and right click add a new class task check test and this is just going to control con in two properties public string description and public Bo is complete now let's go to our view model and we're just going to add a new class called main window U model this is going to contain all our code for our main window I notify property changed control and period Implement interface protected virtual void bring property name and then inside here we'll do property changed and then we'll do a question mark invoke this new and then in Brackets property name that's just going to update if so when we're using um observable Collections and we call this it'll update the the list for us when we've bound it to an element in our zaml but for now that's all we needed to add to our main window view model we'll be binding commands and stuff to this later I'm just going to add another view model item that we need and that's called a relay command uh and the relay command is what if we click a button need to interact with cord that isn't in the chord behind when you'd normally click a button youd just add the chord to the on click event in the cord behind but we're not using that now we're using view model we need to add a class that extends I command I'll just go through this with you so let's right click on this add and I'll explain it as we go along so this is going to be called relay command let's change that to public so first of all we're going to add private read only action underscore execute private read only bunk it's going to be a b and then it be can execute public relay command this is our Constructor action B can execute equals n then execute equals execute question mark new exception name of execute execute equals um execute so that's just setting up our properties public event event hand I can execute change add command manager requery suggested equals value and remove and manager. requery suggested okay next another method public ball um execute object parameter and return can execute equals n or can execute another method public wi execute uh object param execute that's the the relay command I'm going to create another one underneath do exactly the same T and actually up here we need to add I command I actually did that wrong we're going to do pretty much we'll copy all of this so I've just added it all and saves me wasting time going through it so yeah I've uh fixed that for you just put just copy and paste it in the this you don't really need to worry about it it's just what we pass an action through which is a button click in this in most cases and it determines whether we can execute it or not the Constructor here takes an action okay I think that's I think that's going to be it for this part um all we're going to do in the next part is add some colors we're going to pick a color theme I'm probably just going to stick with the one that I've got here but I'll show you a good website where you can actually come up with your own color themes yeah I think that's pretty much it for this part hopefully you've learned something and you're enjoying it and if you are please give it a thumbs up that really means a lot to me it helps with the algorithm and the more people that watch it the better the content will become in the next part we'll do some design stuff we'll get everything in place ready for adding actual tasks So yeah thank you again uh please stick around cuz it's going to get really good really interesting this was boring bit out the way I tried to get straight in there as soon as possible so in the next part it's going to be a lot more designing so thank you and I'll see you in the next video

Channel: Were Coding Dot NET

Views: 754

Keywords: Visual Studio Setup, WPF Project Tutorial, C# Development, MVVM Structure, .NET Framework Tutorial, Task Manager App Development, Coding for Beginners, Software Design Patterns, Visual Studio WPF, MVVM for Beginners, C# Programming Guide, Learn WPF MVVM, Application Development Tutorial, Windows App Development, C# and XAML Tutorial, Code Structure Best Practices, Visual Studio 2022, C# Software Architecture, Desktop Application Tutorial, WPF MVVM Example

Id: q9oxZI7g-qc

Length: 21min 39sec (1299 seconds)

Published: Wed Dec 13 2023