Gui med MVVM struktur

Idé : At lave en simpel MVVM applikation i Visual Studio (VS)
Baggrund:

• Overview: https://msdn.microsoft.com/en-us/library/windows/apps/dn894631.aspx
• guidelines: https://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx
• guidelines for controls etc: https://msdn.microsoft.com/en-us/library/windows/apps/dn611856.aspx

Opgave 1 : Lave et projekt

Du skal lave et nyt UWP projekt (blank App uwp).

I solution explorer skal du lave tre mapper (folders)

• model
• viewmodel
• common

Opgave 2 : Model klasse

Du skal lave en model klasse Bil, med property'erne

• RegistreringsNummer (string)
• Farve (string)
• Model (string)
• NySynet(bool)

Husk

• Konstruktør
• ToString - metode

Opgave 3 : Viewmodel

Du skal lave en klasse i viewmodel fx. 'MainViewModel'

Klassen skal understøtte 'INotifyPropertyChanged' interfacet.

Desuden skal klassen indeholde disse Property'er

• Collection af Biler (ObservableCollection), hvor du tilføjer nogle Biler - find selv på nogle.
• ValgteBil (Bil)

Oversæt programmet (dvs. kør build)

Opgave 4 : View

Du skal nu tilpasse 'MainPage.xaml', så den kan vise

• Listen af biler
• ved valg af en bil - bilens egenskaber

Du skal huske at sætte 'Page.DataContext' til din 'MainViewModel'

View'et kan se således ud:

Kør din applikation

Opgave 5 : Opret Ny Bil

Du skal udvide din applikation så den kan tilføje nye biler.

Model klassen Bil er uændret.

I Common lav en ny klasse 'RelayCommand' a la:

class RelayCommand:ICommand
{
   private Action _action;

   public RelayCommand(Action action)
   {
      _action = action;
   }

   public bool CanExecute(object parameter)
   {
      return true;
   }

   public void Execute(object parameter)
   {
      _action();
   }

   public event EventHandler CanExecuteChanged;
}

I ViewModel klassen 'MainViewModel' lav følgende tilføjelser:

1. lav en property nyBil (Bil), som sættes til default værdier i konstruktøren.
    
2. lav en metode til at oprette bilen, dvs tilføje den til collection af biler:
      public void OpretBil(){
          ....
      }
    
3. Lav en property TilføjBilCommand (RelayCommand) kun med 'get' -- der sker ikke noget hvis der er en set, men benyttes aldrig   
    i konstruktøren lav :
         _tilføjBilCommand = new RelayCommand( OpretBil );
    

i View du skal ændre dit view til også at have 4 felter (reg.nummer, farve, model, nysynet) til at lave en ny bil
lav en knap og bind den til din 'TilføjBilCommand'

Prøv om det virker

Ekstra opgaverne kan laves i vilkårlig rækkefølge

Ekstra A : Ændre Farver til en enum-type

model klassen skal ændres

view skal ændres, fx. ved 'ny bil' benyt en ComboBox af mulige enum typer.

Ekstra B : Ændre Nysynet

view skal ændrestil at benytte RadioButton eller checkBox.

Ekstra C : Indsæt Billed i stedet for Logo

view skal ændres til at benytte et Billed til Logo.

Ekstra D : Tilføj at en Valgt Bil kan Slettes

viewmodel skal tilføjes ny metode SletBilMetode + SletBilCommand

view skal tilpasses med ny knap.

Ekstra E : Tilføj et billed til Model Klassen

model klassen tilføjes billed af bilen

view skal tilpasses til at vise billedet.

(svært oprette nu bil med billed)