Simple Binding

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 -

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

c) Lav en binding således at TB2 er bundet til TB1 og kør programmet - og test hvad der sker når du skriver i TB1

Hint: I XAML, sæt TB2's text-property til Text="{Binding Text, ElementName=TB1, Mode=OneWay}"

d) Test forskellen mellem "OneTime", "OneWay" og "TwoWay"

Undersøg om der sker en opdatering (og hvis, hvornår den sker) i TB2 når der skrives i TB1 og omvendt.
Prøv også at indsætte UpdateSourceTrigger=PropertyChanged og undersøg om det giver en forskel.

Hint: Test også UpdateSour Text="{Binding Text, ElementName=TB1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

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

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 i klassen:

public event PropertyChangedEventHandler PropertyChanged;

[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

Marker den autogenererede kode - højreklik - tryk på: "Snippet -> surround with" (Ctrl + K, Ctrl + S) - 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 lav set-metoden om til "To statement body" 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

Hint: I XAML tilføjes:

<Page.DataContext>

<local:Model/>

</Page.DataContext>

Bemærk: Hvis du får en Error, så tjek om du har husket en default konstruktør (parameterløs). Prøv evt. at Rebuilde projektet - og husk at sætte projektet: SimpleBindingVM til startup project.

m) Bind Text-propertien på TextBoxen til Name-propertien i Model - Test (Run): bliver default værdien vist i TextBox'en?

Hint: Text="{Binding Name}"
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 der ligeledes skal have en text-binding til Models Name property.

Kør programmet - sker der noget når du skriver i de 2 tekst-bokse?

o) Nej, der sker ikke noget, men prøv nu at tilføje Mode=TwoWay og UpdateSourceTrigger=PropertyChanged til TB1 og test igen.

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

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>"
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)

Hint:

<Page.DataContext>
<local:ViewModel></local:ViewModel>
</Page.DataContext>

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

Hint: <ListView ItemsSource="{Binding 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>

Hint: Åben Blend (højre-klik på MainPage -> Design in blend) første gang tager det lidt tid at klargøre. I Blend klik på Assets og derefter Behaviors - Installer tilhørende NuGet-pakke.
Herefter kan der "trækkes" en CallMethodAction behaviors ned på vores Button (i Objects and Timelines).

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å vores 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