NoteMVVM

Idea: At afprøve MVVM-arkitekturen.
Background: MVVM og Binding

 

I Denne opgave skal der arbejdes med binding og MVVM-arkitektur til windows 10 App.
Der skal udvikles en lille Note app der benytter MVVM (Model-View-ViewModel). Der benyttes ObservableCollection og INotifyPropertyChange til at realisere bindingen.

Step 1: NoteModel

a) Opret et nyt Windows Universal projekt (Blank App (Universal Windows)): NoteMVVM

b) Lav klassen NoteModel. Klassen skal indeholde de 4 properties: Nr, Tekst, Emne og Dato (No, Text, Subject, Date).

Bemærk:
Dato kan med fordel være af datatypen DateTime, Nr af typen int og de to sidste er af typen String.
Der skal være en konstruktør til at initialisere Nr, Tekst, Emne og Dato - (Bemærk - DateTime.Now giver et timestamp fra OS).
Overvej at lave et privat static int count klassefelt, der holder styr på antal oprettede "noter" (optælles i konstruktøren og benyttes til at initialisere Nr)
Der skal være en ToString( ) metode.


Step 2: NoteViewModel

c) Lav klassen NoteViewModel. Klassen skal indeholde en property Notes af typen ObservableCollection<NoteModel>. Der skal være Add( ) og Remove( ) metoder så der kan tilføjes og slettes "noter" fra Notes.
Der skal være properties til Tekst, Emne og Nr der kan benyttes ved oprettelse og sletning af noter.

Bemærk:
Der skal være en default konstruktør der initialisere Notes med et nyt objekt og evt addere et par "noter" til Notes (til testformål)

 

Step 3: MainPage (View)

d) Design en side til visning, oprettelse og sletning af "noter". Til visningen af "noter" benyttes en ListView, til oprettelse og sletning benyttes 2 Button's (Add Note og Remove Note), der benyttes TextBox til Tekst og Emne ved oprettelse af en ny note og TextBox til Nr ved sletning. Benyt TextBlock til diverse overskrifter mm (labels)

Bemærk:
Husk at property'en DataContext på page skal bindes til NoteViewModel og property'en ItemSource på ListView skal bindes til Notes. Propertyen Text i TextBox'ene skal bindes til de passende properties i NoteViewModel (Tekst, Emne og Nr).


Ekstra (svært)
I stedet for at angive Nr på den note der skal slettes, kan man klikke på (select) den note der skal slettes. Undersøg om man kan få index på den valgte note og om det evt kan benyttes i forbindelse med et kald af en Remove( ) metode.


Ekstra *2 (middel-meget svært)
Find ud af hvordan man kan formatere data i ListView så den ikke bare benytter ToString( ) metoden fra Note.

Hint:
Der skal defineres et DataTemplate (Page.Resource) og ListView - Property ItemTemplate skal sættes til denne via en static resource.
Benyt Blend - Højreklik på ListView -> Edit Additional Template -> Edit Generated Items -> Create Empty - navngiv Name: NoteDataTemplate
Under ItemTemplate - Grid indsættes en StackPanel med TextBlocks til Nr, Text, Emne og Dato, De bindes til de respektive properties og styles passende


Ekstra *3 (meget svært)
Find ud af hvordan du kan binde en Command til et metodekald via RelayCommand og RelayArgCommand i stedet for at binde en Event til et metodekald via en EventTriggerBehavior/CallMethodAction på en Button.

Hint:
1) Download og extends RelayCommand klassen.
2) Højreklik på project og klik Add->Existing Item browse og vælg klassen (Bemærk namespace bør efterfølgende ændres fra Eventmaker.Common til NoteMVVM)
3) Opret en Property i NoteViewModel af typen ICommand med navnet AddCommand: public ICommand AddCommand { get; set; }
4) I konstruktøren initialiseres AddCommand til et nyt RelayCommand objekt hvor Add-metoden gives somparameter: AddCommand = new RelayCommand(Add);
5) Opret en property RemoveCommand: public ICommand RemoveCommand { get; set; } der initialiseres i konstruktøren med: RemoveCommand = new RelayCommand(Remove);


Ekstra *4 (svært *2)
Lav en ToDo-App, hvor det er muligt oprette og vise ToDo's samt at flytte en ToDo fra ToDo-listen til Done-listen


God fornøjelse /Henrik