Was gehört ins Userinterface und was in die Daten? Am folgenden Beispiel an einer reifenden Banane soll das diskutiert werden. Der Reifegrad ist eine Eigenschaft des ViewModel, das wiederum auf das Model zurück greift.
Der Entwickler definiert so einen Integer für Reifegrad und implementiert das Interface INotifypropertyChanged um das UI über Änderungen informieren zu können.
1: Public Class bananenVM
2: Property banane As banane
3: Public Sub New()
4: Me.banane = New banane
5: End Sub
6: End Class
7:
8: Public Class banane
9: Implements INotifyPropertyChanged
10:
11: Private _reifegrad As Integer
12: Public Property reifegrad() As Integer
13: Get
14: Return _reifegrad
15: End Get
16: Set(ByVal value As Integer)
17: If _reifegrad <> value Then
18: _reifegrad = value
19: RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("reifegrad")) 20: End If
21: End Set
22: End Property
23: Public Event PropertyChanged(sender As Object, e As PropertyChangedEventArgs)
Implements INotifyPropertyChanged.PropertyChanged
24: End Class
Hinweis: ab .net 4 wird man in den Beispielen eine Hilfsmethode onPropertyChanged finden, die das CompilerAttribut CallerMemberName nutzt. Oft findet man diese Funktion in einer Basisklasse gebündelt BindableBase. Um das Beispiel so einfach wie möglich zu halten, wird darauf verzichtet.
Nun sollen abhängig vom Reifewert unterschiedliche Bananen angezeigt werden. Gesteuert wird das für Demozwecke über einen Slider.
Wie stellt man diese Bananen nun dar? Man könnte ein Image nehmen und dessen Source Eigenschaft an den Value des Sliders binden. Um aus Integer ImageSource zu machen, wird ein Konverter benötigt. Dann bestimmt aber der Entwickler wesentliche Bestandteile der Visualisierung (Typ und Bild). Dies gehört aber in die Hände des Designers (ich weis das bist Du auch und Marketing und Vertrieb und und).
In WIndows 8.1 wird für die WinRT API nun ein Behaviors SDK mitgeliefert. Damit lassen sich im XAML deklarativ Verhalten und Aktionen festlegen. Am einfachsten geht das mit Expression Blend. Um das gewünschte Verhalten zu erreichen, wird ein Data Trigger angelegt, der bei einem bestimmten Schwellwert eine Aktion auslöst oder einen anderen Wert verändert.
Man kann also bei erreichen des Schwellwertes das Bild austauschen. Der XAML Code dafür ist selbsterklärend. Das Viewmodel wird an den Datacontext der Page gebunden. Für jeden Schritt wird ein neuer DataTriggerBehavior benötigt.
1: <Slider HorizontalAlignment="Left" Margin="349,57,0,0" VerticalAlignment="Top" Width="100"
2: Value="{Binding banane.reifegrad, Mode=TwoWay}"> 3: <Interactivity:Interaction.Behaviors>
4: <Core:DataTriggerBehavior Binding="{Binding banane.reifegrad}" 5: ComparisonCondition="GreaterThan" Value="7">
6: <Core:ChangePropertyAction TargetObject="{Binding ElementName=image1}" 7: PropertyName="Source" >
8: <Core:ChangePropertyAction.Value>
9: <ImageSource>images/ba2.png</ImageSource>
10: </Core:ChangePropertyAction.Value>
11: </Core:ChangePropertyAction>
12: </Core:DataTriggerBehavior>
13:
14: <Core:DataTriggerBehavior Binding="{Binding banane.reifegrad}" 15: ComparisonCondition="GreaterThan" Value="14">
16: <Core:ChangePropertyAction TargetObject="{Binding ElementName=image1}" 17: PropertyName="Source" >
18: <Core:ChangePropertyAction.Value>
19: <ImageSource>images/ba3.png</ImageSource>
20: </Core:ChangePropertyAction.Value>
21: </Core:ChangePropertyAction>
22: </Core:DataTriggerBehavior>
Für jeden Schwellwert muss ein Trigger angelegt werden, hier also 16. Besonders elegant erscheint mir das nicht. Für Anregungen einfach mail an hannesp AT ppedv.de.