C# WPF Tutorial - Multiple Views

what's going on guys this is Tosca what we are going to do is we are going to go to file new we're going to start a new WPF application for our project and in this case we're just going to name it view changer so that's what we're going to be covering today is changing views in WPF without opening a new window so essentially we have our main window here and instead of opening up a new window for a different view we're just gonna change the content within the window and since we're gonna be using WPF we we want a a Model View model and view design so we want three folders one will be called models another we were going to call new models and then our third folder is going to be our views now we are not going to be using our models folder we're just going to be using view models and views after that we're going to quick make a little layout because we don't want the entire thing to change especially if we want to navigate between views we want at least some consistency as far as like a menu bar goes so in our grid going to break it up a bit so we can work with it a little better and we're going to create some column definitions whoops to create some road definitions and gonna want let's see how many cows will say five columns five columns five boroughs then we want our menu bar and right now we're just working on design we're not jumping into anything too technical right now so like I said if you don't know zamel then you might want to do a tutorial on that first and so we're gonna create our we're gonna make a doc panel for our menu bar so we're gonna sign that to row 0 0 probably give it a roast and give it a row span of 5 so all along here I'll make it an ugly background color just so we can all see so we got gray and ugly gray and this is gonna be our menu bar we want some buttons in there so we're gonna do a stack panel make a first button give it the content of read view so what we're gonna do is we're going to end up clicking these buttons and then the content over here in this white area is gonna change but in order to do that we actually first need to create a Content control control our content is going to be we're just gonna bind it to whatever our data context is so when we change the data context of our video or of our video yeah when we change the data context of our view or of our window it's going to change that entire white space but also need to assign this 104 rowspan of five so this entire area right here is where our view is going to be displayed but first we need to actually make our views and our view models before we can start working on that so we're going to go to views and do a new our new item and we want a user control and we're gonna call this our red view so here we have our entire user control and this is what's going to be displayed in the white area from our main window and we're not really gonna be doing much so we're just going to give it a background of red we're going to go to a new item and we're gonna create another user control we're going to call this one blue view okay and you might have guessed this background is going to be blue so now we have our two views and this is all that's going to be displayed just red and blue but they each need their own view model as well if we're going to change the view based on the data context you don't set the data context to the view itself set it to its view model so we're going to create new class or get create a couple new classes in the view models when you do a red view model public I'm not sure if that actually matters but out of habit I'll do that and then I'll create a blue do you model well so we're gonna set our data context to this and then based on what our context is based on which of you model it is it's going to assign the appropriate view in order to do that I'm going to first have to create some access to our namespaces since we have them in separate folders so we're going to essentially if you if you haven't done this before you can even just take note at what's being done up here for the format in creating a namespace and we're going to have our view models we're going to assign this to you change your namespace but to our view models whoops few models folder we're gonna do the same thing we're gonna have a namespace for views you change your juice so whenever we call view models and our markup it's going to go to our namespace here and then whenever we call views in our markup it's going to go to our views folder in our namespace then next what we want or we want some windows resources window dot resources this is where we're going to store our data templates which is going to tell our content control down here what view to access based on the data context that is bound to so we're gonna go back up to windows resources and we're going to create a data template okay and we're gonna give it a name to access it I don't think we will be accessing it in this video but normally you want to give it a name we'll call it our read view view template okay and then we're going to say data type and set it to the type of whatever we want our whatever the data context of our view model is so let's go to our view models from our access point we made up there and we're gonna say when it is the read and view model so whenever the data type is of the read view model we're going to set the view which is again what we made up there above in the set what we said these we set our views to our read view I'm gonna make sure you send we also send our view our data context that we're also bound to so here we have let's see okay so I often get this and it's fairly annoying whenever you encounter this problem usually if you go up to build and you rebuild everything works out okay and then we're going to copy paste and change this to our blue view template and then when our data type is of our blue view model going to set the template to our believe you and again pass the view our data context okay so I think I got all this fairly okay and now all we have to do in order to change the view here is when we click these buttons we wanted to change the data context of our window so we're going to go over here to our event handler and we're gonna go to click and we're gonna say read view swim in that event I'm gonna jump right back real quick but a blue view it's now when we click these video or when we click these buttons okay it's this is where we're going to change the data context of our window so we're going to set our data context to a new and we're gonna probably have to enter in using here but for now we're just gonna say a blue and now this is the red right there red view model and it's not gonna find it if you hit control dot entering the using statement up here for the view models then again we're going to do data context equals a new blue view model so now that we have that sir I believe actually unless I'm mistaken should be kind of set and I'll go over it one more time right now we have nothing set but if we click our red button it should change our data context to the red view model thus displaying the red view we click blue it's going to set it to the data context to the blue view model and make our view blue and you can alternate between the two we wanted to create another one we would just create let's say say we wanted to do another view we could do orange your model okay and we'll have to create another view all this on you whoops but we don't want that to be a class again we want to add a new we want it to be a user control all this orange view okay and again so we can see the difference that go back to here and now we're gonna have to create another button but also we're gonna have to make another data template as well we'll do orange view set the events okay so now when we click our orange View button it's going to set our data context to the orange view model it's now when we run it get our red blue red blue orange but if you see our orange view model they don't work and in fact it just shows the string value of our data context but it's not actually displaying our view and that's because we did not create a new data template which is what our content control is going to so we can just copy paste data template great orange view template and we're going to set it to when it's the data type of the orange view model in our view models and then out of our views the content will be of our orange view also set the data context screwed up there we'll also set our data context to the context of the orange of data context of our window so now we go into debug step red blue and orange you can also if you want to mess around you can go into the views and you could uh you know to put a button in there or text box and labels and so on if you want to make it look a little prettier but now that's just uh how we change views WPF and I hope Soria what's in a little awkward I'll try and get a little better again I literally never done anything like this before I'm usually the the anti-social recluse so I'm not even good at talking to people who probably aren't watching this video and yeah so whatever I'll probably get better at it if other than my eyes and arms which I already understand is probably a problem feel free to leave criticisms and if I move too fast if I over explain some things or if I move too slow a lot of the times I hate it when I go to watch a YouTube tutorial and I understand the background on some things yeah I have to wait on them to explain smaller things in order to explain the thing I want to know often people will cater to the lowest denominator and I was just trying to quickly go through this with as little and brief explanation of things as possible if you're somebody who would rather have more explanations I'd be willing to do so it's just I try not to annoy people by over explaining things because I personally understand that it can be frustrating sometimes when you go to learn a tutorial and somebody's explaining syntax to you and you're trying to learn something that's well beyond the level of learning syntax so I hope I did okay at least even if I did it poorly I hope at least you learned how to do this and maybe I will make another one depending on how much of a terrible one this one is but alright hope you guys enjoyed and let me know if you want anything else something more specific maybe next time we can go into actually doing things and our view models and affecting our new views and our contact control until then thank you

Channel: ToskersCorner

Views: 137,058

Keywords: C#, .Net, Programming, tutorial, wpf, views, multiple views, wpf usercontrol, wpf views, wpf multiple views, wpf change views, change views, changing views, learn how, beginner tutorial, xaml, content control, data template, wpf navigation, navigation, voice tutorial, visual studio, mvvm, C# project, Microsoft Visual Studio‬, ‪Microsoft‬, ‪macOS, Tosker, mvvm multiple, c# changing views wpf

Id: xUwk2-_tRzo

Length: 19min 9sec (1149 seconds)

Published: Thu Nov 03 2016