Greetings. I read a lot of articles on the Model-View-ViewModel pattern, but I haven’t figured it out yet. Please tell me how to properly use it on a specific example below.

I have my WCF notes service, which has standard functions: create a note, edit, delete, get notes. Now I am writing a client for it on WPF and I want to apply the MVVM pattern. Please tell us exactly what each component should do (Model, View, ViewModel). I want to Datagrid notes in Datagrid .

  • 2
    For God's sake, not in DataGrid. Why does a program have to look like an enterprise ugly? - VladD
  • 2
    @VladD, this is the first implementation, the easiest and fastest. As far as I understand, if the architecture is built correctly, then replacing the DataGrid with a beautiful user control with hand-drawn sheets of paper and animations will be very quick and painless. - LNK
  • one
    Wow? Then good luck to you and good luck! (Typically, such a question is answered in the style of "and in video courses they said that to display anything, a DataGrid is needed, in which Item'y are created in OnClick." Pleasantly surprised.) - VladD

1 answer 1

The model is a domain object - in short, what you get from WCF. The model represents the actual data and / or information we are dealing with.

View is a data view. MVVM contains behavior, events, and data bindings, which ultimately require knowledge of the base model and the view model. In short, this is your XAML UserControl.

Viewmodel is the concept of keeping the view nuances separate from the model. On the one hand, it handles all event bindings, and on the other, it knows how to build a model and call a WCF service.

View:

 <UserControl x:Class="MVVMExample.DetailView"> <DataGrid ItemsSource="{Binding Path=LineItems}" /> <Button Command="{Binding Path=SubmitCommand}" CommandParameter="SubmitPost"/> </UserControl>

ViewModel:

 public class OrderViewModel : BindableBase { public OrderViewModel( IWcfPostService postService ) { this.LineItems = new ObservableCollection<PostItem>( postService.GetPostsList() ); this.SubmitCommand = new DelegateCommand<object>( this.OnSubmit, this.CanSubmit ); } public ObservableCollection<PostItem> LineItems { get; private set; } public ICommand SubmitCommand { get; private set; } private void OnSubmit(object arg) {...} private bool CanSubmit(object arg) { return true; } }

Model:

 public class PostModel : INotifyPropertyChanged { private string _author; private string _text; public string Author { get { return _author; } set { _author = value; RaisePropertyChanged("Author"); } } public string Text { get { return _text; } set { _text = value; RaisePropertyChanged("Text"); } } protected void RaisePropertyChanged(string propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); } } public event PropertyChangedEventHandler PropertyChanged; }
  • Thanks for the answer. That's what I read in the articles :) Could you give the names of the methods that are needed in each component of the pattern to implement, for example, adding notes. Just to visually understand what happens when the user clicks Add. - LNK
  • 2
    I updated the answer when the user clicks "Add" - you will need to check the text and the author, and then send a new message to WCF - user270576
  • Thank. I would be grateful if you answer a few questions about your code: Where does the service actually go? Who and how should process PropertyChanged ? And where do we generally use PostModel , if PostItem 's are used everywhere in the code above? - LNK
  • one
    @LNK The easiest example is markwithall.com/programming/2013/03/01/… - and the code is github.com/MarkWithall/worlds-simplest-csharp-wpf-mvvm-example - user270576