NoteMVVM

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

 

I Denne opgave skal der arbejdes med binding og MVVM-arkitektur til windows 8.1 App/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 8.1 App projekt (Blank App (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 implementere INotifyPropertyChanged og 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)
Add( ) og Remove( ) skal kalde OnPropertyChanged( )

 

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.

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 TextBoxe 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


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