{"id":62,"date":"2011-02-02T16:53:00","date_gmt":"2011-02-02T16:53:00","guid":{"rendered":"https:\/\/wdev-blog.azurewebsites.net\/index.php\/2011\/02\/02\/mvvm-basic-principals\/"},"modified":"2011-02-02T16:53:00","modified_gmt":"2011-02-02T16:53:00","slug":"mvvm-basic-principals","status":"publish","type":"post","link":"http:\/\/panahy.nl\/index.php\/2011\/02\/02\/mvvm-basic-principals\/","title":{"rendered":"MVVM Basic Principals"},"content":{"rendered":"
\n

The very basic principals so far I understand from M-V-VM practice is the following which<\/span> is understood from this article : http:\/\/msdn.microsoft.com\/en-us\/magazine\/dd419663.aspx#id0090025<\/a><\/p>\n

<\/p>\n

View is a Control or Window<\/h3>\n
public<\/span> <\/span>partial<\/span> <\/span>class<\/span> CustomerView : System.Windows.Controls.UserControl
{
<\/span>public<\/span> CustomerView()
{
InitializeComponent();
}
}<\/span><\/pre>\n
And this is as far as the view might be written in code. In the most cases we don’t want to write more code in the View. The reason is that the View is supposed to be made loosely coupled from the data and the logic, probably done by creative designers.<\/p>\n
The View gets DataContext<\/h3>\n
Some magic forces will get the data that is accessible through the ViewModel and set it to the DataContext property of the control:<\/p>\n
protected<\/span> <\/span>override<\/span> <\/span>void<\/span> OnStartup(StartupEventArgs e)
{
<\/span>base<\/span>.OnStartup(e);

var viewModel = <\/span>new<\/span> MainWindowViewModel(path);
MainWindow window = <\/span>new<\/span> MainWindow();
window.DataContext <\/b>= viewModel;

window.Show();
}
<\/span><\/pre>\n
In this example the magic<\/i> happens in the Startup method of the application. Using MEF<\/a> this magic is taken out to some sophisticated standard way.
Now the View and its elements are ready to consume the data.<\/p>\n
View binds to ViewModel<\/h3>\n
Both data and actions are binded to public accessors of ViewModel:<\/p>\n
 <TextBox
    x:Name=<\/span>\"firstNameTxt\"<\/span>
    Grid.Row=<\/span>\"2\"<\/span> Grid.Column=<\/span>\"2\"<\/span>
    Text=<\/span>\"{Binding Path=FirstName, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}\"<\/span>
    Validation.ErrorTemplate=<\/span>\"{x:Null}\"<\/span>
    \/><\/span>

<Button 
  Command=<\/span>\"{Binding Path=SaveCommand}\"<\/span>
  Content=<\/span>\"_Save\"<\/span>
  \/><\/span>
<\/pre>\n
ViewModel is unaware of View<\/h3>\n
Unlike the Presenter in MVP, a ViewModel does not need a reference to a view. This makes it possible to attach any View at any time to consume the public data provided by ViewModel.<\/p>\n
ViewModel exposes public properties to share data with any possible View:<\/p>\n
public<\/span> <\/span>class<\/span> CustomerViewModel : WorkspaceViewModel, IDataErrorInfo
{
    <\/span>public<\/span> <\/span>string<\/span> FirstName
    {
        <\/span>get<\/span> { <\/span>return<\/span> _customer.FirstName; }
        <\/span>set<\/span>
        {
            <\/span>if<\/span> (value == _customer.FirstName)
                <\/span>return<\/span>;

            _customer.FirstName = value;

            <\/span>base<\/span>.OnPropertyChanged(<\/span>\"FirstName\"<\/span>);
        }
    }
<\/span><\/pre>\n
ViewModel exposes public commands to share actions with any possible View:<\/p>\n
\/\/\/<\/span> <\/span><summary><\/span>
<\/span>\/\/\/<\/span> Returns a command that saves the customer.
<\/span>\/\/\/<\/span> <\/span><\/summary><\/span>
<\/span>public<\/span> ICommand SaveCommand
{
    <\/span>get<\/span>
    {
        <\/span>if<\/span> (_saveCommand == <\/span>null<\/span>)
        {
            _saveCommand = <\/span>new<\/span> RelayCommand(
                param => <\/span>this<\/span>.Save(),
                param => <\/span>this<\/span>.CanSave
                );
        }
        <\/span>return<\/span> _saveCommand;
    }
}<\/span><\/pre>\n
Some of these properties may be data coming from a model and some might be simply a state of the ViewModel to help out the View. <\/p>\n
Data Manipulation<\/h3>\n
The ViewModel, never the View, performs all modifications made to the model data.
As I already mentioned the ViewModel is unaware of View but it is certainly aware of Model and can manipulate it when needed. When user interacts with the View, the binding manager will take care of both ways of data modifications in each binding.<\/p>\n
The way a ViewModel is attached to a model, is an architectural decision and makes your application easier or hard to understand and maintain. But this is another important subject. For now, like MEF does the magic for coupling View and ViewModel, there needs to be some Factory or Controller mechanism to pull the data and assign it to the ViewModel.<\/div>\n","protected":false},"excerpt":{"rendered":"
The very basic principals so far I understand from M-V-VM practice is the following which is understood from this article : http:\/\/msdn.microsoft.com\/en-us\/magazine\/dd419663.aspx#id0090025 View is a Control or Window public partial class CustomerView : System.Windows.Controls.UserControl{public CustomerView(){InitializeComponent();}} And this is as far as the view might be written in code. In the most cases we don’t want … Continue reading “MVVM Basic Principals”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[58],"tags":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false},"uagb_author_info":{"display_name":"Pouya Panahy","author_link":"http:\/\/panahy.nl\/index.php\/author\/pouya\/"},"uagb_comment_info":0,"uagb_excerpt":"The very basic principals so far I understand from M-V-VM practice is the following which is understood from this article : http:\/\/msdn.microsoft.com\/en-us\/magazine\/dd419663.aspx#id0090025 View is a Control or Window public partial class CustomerView : System.Windows.Controls.UserControl{public CustomerView(){InitializeComponent();}} And this is as far as the view might be written in code. In the most cases we don’t want…","_links":{"self":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/62"}],"collection":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":0,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"wp:attachment":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}