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:
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)); }
}
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
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?
Udvidelse (TextBox og Button til oprettelse af nye navne)
v)
Klassen ViewModel udvides med
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