SimpleMVVMBinding

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

I Denne opgave skal der arbejdes med simpel binding og MVVM-arkitektur til windows 10 App.
Der skal testes binding og MVVM (Model-View-ViewModel), der skal benyttes ObservableCollection og INotifyPropertyChange til at realisere bindingen i en simpel MVVM-arkitektur. I denne opgave benyttes simpel CallMethodAction (i senere opgaver arbejdes med ICommand og RelayCommand i stedet)

Simpel binding mellem 2 GUI-Controls (TextBox)

a) Opret et nyt Windows Universal projekt (Blank App (Universal Windows)): SimpleBindingVV -
Bemærk: Target version skal være: "Windows 10 Creators Update (10.0; Build 15063)" og ikke default: Windows 10 Fall Creators Update (10.0; Build 16299)

b) Opret to TextBox Controls og navngiv dem TB1 og TB2

c) Lav en binding således at TB2 er bundet til TB1 (Properties - Common -Text)

d) Test forskellen mellem "OneTime", "OneWay" og "TwoWay" (se More Settings - under binding)

Simpel binding mellem GUI-Control og Model (mellem en TextBox i MainPage og en Property i en Model-klasse)

e) Under samme solution - opret et nyt Windows App projekt (Blank App (windows)): SimpleBindingVM (Husk Target version: Build 15063)

f) Opret en ny klasse: Model.

g) Implementer INotifyPropertyChanged:

• Klassen skal implementere interfacet INotifyPropertyChanged (gøres ved at skrive ": INotifyPropertyChanged" efter klassens navn)
• Klik på pæren og implementer INotifyPropertyChanged
  Hvis auto-implement ikke virker skrives følgende:
  

  public event PropertyChangedEventHandler PropertyChanged;

  // Create the OnPropertyChanged method to raise the event
  protected void OnPropertyChanged(string name)
  {
  PropertyChangedEventHandler handler = PropertyChanged;
  if (handler != null)
  { handler(this, new PropertyChangedEventArgs(name)); }
  }

• Marker den autogenererede kode - højreklik - tryk på: "surround with" - vælg "#region" - navngiv regionen: "PropertyChangeSupport"

h) Opret en property: string Name (prop ->)

i) Opret en default konstruktør (ctor) og initialiser Name til en default værdi - fx "Default"

j) Lav propertien Name om til en "property with backing field" og tilføj et kald af OnPropertyChanged( ) sidst i set-metoden

k) I MainPage oprettes en TextBox Controls TB1(som under forige opgave)

l) Sæt DataContext på page til Model (Page - Properties - DataContext - New - create databinding - select: Model)
Bemærk: Hvis du ikke ser Model, så prøv at Rebuilde projektet - husk at sætte projektet: SimpleBindingVM til startup project. Virker det ikke er det fordi class Model ikke har en default konstruktør (parameterløs)

m) Bind Text-propertien på TextBoxen til Name-propertien i Model - Test (Run): bliver default værdien vist i TextBox'en?
Har du husket at sætte det nye projekt som StartUp project? - ellers er det ikke det nye projekt "SimpleBindingVM" der køres, men det tidligere projekt: "SimpleindingVV".

n) I MainPage oprettes endnu en TextBox Controls TB2

o) Bind TB2 til Name (som under m), men nu sættes UpdateSourceTrigger til: PropertyChanged under More settings

p) Test: hvad er forskellen på om UpdateSourceTrigger er sat for både TB1 og TB2, kun for TB2 og hverken TB1 eller TB2?

Simpel binding mellem GUI-contol (View) og en ObservableCollection (ViewModel) af Models (Model) - MVVM

q) Under samme solution - opret et nyt Windows App projekt (Blank App (windows)): SimpleBindingMVVM (Husk Target version: Build 15063)

r) Opret en ny klasse: Model med en property Name og konstruktører (ctorp og ctor)

r) Opret en ny klasse: ViewModel med

• en property "Models" af typen: "ObservableCollection<Model>" (ændre til "property with backing fields")
• en konstruktør der initialisere _models med en ny instans af ObservableCollection og addere 3 nye Model-objekter til _models
  
  

s) I MainPage sættes DataContext til ViewModel (husk evt at Builde projektet først)

t) Indsæt en GUI-Control: ListView og sæt dennes ItemSource-property til "Models"

u) Test - ser det pænt ud?

• Nej vel! - ListView viser kun namespace.classname på de 3 Model-objekter - hvad mangler?
• Jep - tilføj ToString( ) metoden til klassen Model og test igen :)

Udvidelse (TextBox og Button til oprettelse af nye navne)
v) Klassen ViewModel udvides med

• en statisk property: public static string Name{..}
• en Add( ) metode "public void Add( ){_models.Add(new Model(Name));}"

w) Tilføj en TextBox og bind Text til Name i ViewModel (husk UpdateSourceTrigger = PropertyChanged under More Settings)

x) Tilføj en Button til MainPage og opdater XAML-koden med:

<Button Content="Add Name" HorizontalAlignment="Left" Margin="857,361,0,0" VerticalAlignment="Top">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Core:CallMethodAction TargetObject="{Binding Mode=OneWay}" MethodName="Add"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>

Kan gøres i Blend se: https://channel9.msdn.com/Series/design-xaml-ui-with-blend/03 (specielt fra 32:30 ->)

Koden binder Add( ) metoden i ViewModel til click-event på vore Button, så den kaldes når der trykkes på knappen

y) Test :)

z) Gør GUI lidt pænere at se på !!

God fornøjelse /Henrik