Changing application using MVVM

  • (2 Pages)
  • +
  • 1
  • 2

23 Replies - 10338 Views - Last Post: 06 November 2013 - 12:25 PM Rate Topic: -----

#1 synlight  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 582
  • Joined: 14-September 11

Changing application using MVVM

Posted 04 November 2013 - 06:32 AM

I have a piece of software written in C# using WPF. It's a mess, with a lot of code behind and many windows (instead of a Main Window).

I want to spend the week rewriting the software to use a MVVM pattern. I read and watched tutorials to get ready, but I'm still confused I guess.

What would be your first step?

I know I need to have a main window, and use that to display different GUI elements as needed.

So, each window I have currently would be a View, right?

And I have some classes that represent devices and users. Those would be models? I have several other classes, including a database helper and a custom broswer. Would those be models too?

Is This A Good Question/Topic? 0
  • +

Replies To: Changing application using MVVM

#2 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Changing application using MVVM

Posted 04 November 2013 - 06:59 AM

An easy way to approach starting change like this is to change each Window into a UserControl, then you can place them in some kind of ContentPresenter (which we've discussed before). In the XAML for each window, instead of each <Window x:Class..... declaration, change it to <UserControl x:Class....
Was This Post Helpful? 1
  • +
  • -

#3 synlight  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 582
  • Joined: 14-September 11

Re: Changing application using MVVM

Posted 04 November 2013 - 07:01 AM

If I recall correctly, you recommended a storyboard for the content presenter, is that right?
Was This Post Helpful? 0
  • +
  • -

#4 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Changing application using MVVM

Posted 04 November 2013 - 07:08 AM

Yeah, if you want to animate changes between views nicely. Better that than a sudden change. But it takes some work.
Was This Post Helpful? 1
  • +
  • -

#5 synlight  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 582
  • Joined: 14-September 11

Re: Changing application using MVVM

Posted 04 November 2013 - 07:14 AM

I would like it to look nice, of course. I have all week to get this done. Do you think that is a realistic time frame for someone learning all of this?
Was This Post Helpful? 0
  • +
  • -

#6 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Changing application using MVVM

Posted 04 November 2013 - 08:36 AM

Depends on the person, and the size of your project. My opinion is that you're a quick learner, so if your project complexity isn't too high, you should be able to manage it. As an aside, what kind of version control are you using? It's worth knowing you can go back if you mess it up...
Was This Post Helpful? 1
  • +
  • -

#7 synlight  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 582
  • Joined: 14-September 11

Re: Changing application using MVVM

Posted 04 November 2013 - 08:43 AM

I'm using git, I backup every afternoon. Although for this, I just started a new project and I'm just copy/pasting stuff where applicable. Yeah, that's probably a stupid way to do things. I just thought it would be a good learning opportunity all around. Last time I used drag and drop, this time I'm trying to code everything in XAML. I'm still working on my first User Control, 1 hour later, but I'm trying to put everything in panels and set margins properly, etc. We all have to learn somehow, though!

I have a bunch of small questions,, I'm trying to figure them out as I go. Like.. in MVVM, where to I put Click handlers? In the ViewModel? Will each user control (window) have its' own ViewModel?
Was This Post Helpful? 0
  • +
  • -

#8 Ryano121  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1461
  • View blog
  • Posts: 3,289
  • Joined: 30-January 11

Re: Changing application using MVVM

Posted 04 November 2013 - 08:54 AM

The idea is that there really shouldn't be a Click handler in the code behind at all. You want to make the code behind as small as possible. This is not always possible, and sometimes you do need to put stuff in there, but definitely not for things like click events.

The click event would be handled by a Command (read up on this). Which would be provided by the ViewModel. You bind the command with the button in the xaml so again no need for code behind.

The beauty of WPF with MVVM is the databinding. You want to expose your bindable properties in your ViewModel and bind your controls' to them in your XAML. This = clean code and clear separation of responsibilities (plus again no need for any code behind your view at this point).

My recommendation would be to leave the Views till last. If I were you I would start making some clear cut Models first. Get to a point where you have very well defined Model classes that don't include any program logic (in the UI) and are not bound to any one kind of View i.e you could easily use the models in a command line app or in a GUI etc.

Then I would move on to the ViewModels. Start making your program logic here. Use your models from before and expose properties that your views can bind to. This is the point where you also create your custom Commands which will handle button click events in a very clean manner.

When you have that up and running with all properties/commands made up that you foresee using, I would then start coding up the XAML and using your ViewModels with it. Again you shouldn't be hard coding any event handlers here. Your ViewModel should be taking care of everything like that through some binded property or command.

Once you get your design fleshed out, and your views up and running with all the logic working, it becomes quite a pleasant task making it look nice. I wouldn't spend a load of time at this point worrying about margins etc. There are more important things to be doing - that comes towards the end.
Was This Post Helpful? 2
  • +
  • -

#9 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Changing application using MVVM

Posted 04 November 2013 - 09:17 AM

To back up Ryano121, you have a class that implements ICommand, and the Execute() method performs the operation. Then, in your view you create an instance of it:
<UserControl.Resources>
   <commands:MyCommand x:Key="BoundCommand"/>
</UserControl.Resources>

<Button Command="{StaticResource BoundCommand}"/>



That button will now execute your implementation of ICommand when clicked.

Further, say you want to pass a parameter from your ViewModel (which has an int property named SomeNumber) that's bound:
<Button Command="{StaticResource BoundCommand}" CommandParameters="{Binding Path=SomeNumber}"/>



Then in your Execute method of your ICommand:

public void Execute(object parameter)
{
   var someNumber = (int)parameter;
}



Ta dah! You have passed a ViewModel property to an ICommand through a View's binding. Total separation.
Was This Post Helpful? 2
  • +
  • -

#10 synlight  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 582
  • Joined: 14-September 11

Re: Changing application using MVVM

Posted 04 November 2013 - 09:18 AM

Okay. So.. take for instance, a car class.

All of the car attributes (color, make model etc) will be in the Model.

So, I need a ViewModel for each View, but I also need a ViewModel for each Model?

Say I have a View where a user can enter all of the information about a car. The ViewModel will instantiate a new car instance, then have the Command to add a new car to the database when the user click the "Add" button. Is that right? Does the View access the Car ViewModel when it creates the new Car instance?

I'm just confused I guess. How would these work together?

Window for Data Entry (Add New Car View)
New instance of car (Car Model)
Populating car attributes (Car ViewModel)
Add car data to database (?? Data Manager Model??)

Ah that was helpful MrShoes, we were posting at the same time. I know I'm coming off as dense here, LOL. But once I understand how the communication works, I can apply it all the way through my software.

This post has been edited by synlight: 04 November 2013 - 09:19 AM

Was This Post Helpful? 0
  • +
  • -

#11 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Changing application using MVVM

Posted 04 November 2013 - 09:20 AM

The ViewModel should hold only Presentation logic: so, if your Car model class exposes something the CarViewModel needs, then it accesses that. The CarView accesses the property through binding to the ViewModel. The CarView should never access the Car model object directly.

Quote

So, I need a ViewModel for each View, but I also need a ViewModel for each Model?


Nope, you need a ViewModel to act as a conduit between a View and the Model. View -> ViewModel -> Model.

Quote

Populating car attributes (Car ViewModel)


The ViewModel should not be populating the attributes, it should be getting its attributes from the Model. If the user changes the attributes through the View, then from the ViewModel these changes are passed down.

This post has been edited by MrShoes: 04 November 2013 - 09:21 AM

Was This Post Helpful? 1
  • +
  • -

#12 synlight  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 582
  • Joined: 14-September 11

Re: Changing application using MVVM

Posted 04 November 2013 - 09:27 AM

Ahhhh okay I get it now. Well, I get it MORE at any rate.

What about my helper classes? Like Data Manager, that handles database manipulation? I have a class that encrypts passwords, one that sends emails, one that puts together HTTP requests.

Those would be models, right? In my current software, there are times when a button click needs to use several of these classes.

"Add Car" button passes car data to the database. So..

Add Car View >> Car ViewModel >> Car Model >> Data Manager Model?

At what point would I send the data to the Data Manager model, since it doesn't have its' own ViewModel?

Also: is validation done inside the ViewModel?

This post has been edited by synlight: 04 November 2013 - 09:29 AM

Was This Post Helpful? 0
  • +
  • -

#13 MrShoes  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 331
  • View blog
  • Posts: 512
  • Joined: 13-June 12

Re: Changing application using MVVM

Posted 04 November 2013 - 09:57 AM

Yeah, they all sound like functions of the Model layer to me.

Your INPUT validation should be done inside the ViewModel, yes. Some of that's automatic; if your user tries to enter a decimal number into a box that's bound to an int property, the box's border will go red.
Was This Post Helpful? 1
  • +
  • -

#14 Ryano121  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1461
  • View blog
  • Posts: 3,289
  • Joined: 30-January 11

Re: Changing application using MVVM

Posted 04 November 2013 - 10:30 AM

You can also do validation in Commands as well. For example a button to add a Car will be disabled until all the input fields have been filled in - upon which it will enable itself and allow the user to actually add the new Car.

Although of course more validation will need to be done later on in the ViewModel as MrShoes said, but at least this way you can already assume that you have all the required input before you do the more complicated validation.

This post has been edited by Ryano121: 04 November 2013 - 10:33 AM

Was This Post Helpful? 2
  • +
  • -

#15 synlight  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 90
  • View blog
  • Posts: 582
  • Joined: 14-September 11

Re: Changing application using MVVM

Posted 04 November 2013 - 12:10 PM

Hmmm.. I'm a little perplexed.

I have an Alert window, that I use as a customized message box/error message to use colors and logos that match my software. Since it's window, it should be a View, right? It's not a User Control because the only thing the user can do is click "OK" to make it disappear.

And I want it to pop up on top of my MainWindow, not inside the Content Container. So... would I have my ViewModels call it, as necessary (for validation or confirmation as needed)
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2