Mit Windows 10 kommen parallel zur Context bezogenen Datenbindung, die kompilierte Bindings (am x:Bind zu erkennen) hinzu. x:Bind unterscheidet sich erheblich von der Verwendung der Binding Syntax.
IM folgenden wird gezeigt wie eine Liste mit kompilierter und damit streng typisierter Datenbindung korrekt verwendet wird. Das Viewmodel sieht dabei ident aus in beiden Varianten. Im VB.NET MVVM Beispiel wird eine simple Liste als Property angelegt.
1: Public Class testVM
2: Implements INotifyPropertyChanged
3:
4: Private _liste As ObservableCollection(Of String)
5: Public Property liste() As ObservableCollection(Of String)
6: Get
7: Return _liste
8: End Get
9: Set(ByVal value As ObservableCollection(Of String))
10: _liste = value
11: End Set
12: End Property
13:
14: Public Sub button1()
15: liste.Remove(liste.First)
16: End Sub
Die Methode Button kann dann nachfolgend ohne das ICommand Interface direkt an einen Button Click gebunden werden.
Zur Bindung in der XAML Page wird das Viewmodell als Eigenschaft der Page Klasse eingefügt werden.
1: Public NotInheritable Class BlankPage1
2: Inherits Page
3: Property VM As testVM
Im klassischen XAML ist das die Datacontext Eigenschaft eines beliebigen UI Elements. Das funktioniert, wie schon erwähnt, aber nach wie vor in Windows 10 Anniversary.
Kleine Randnotiz: in UWP 10.2 Page VB.NET Page Klassen, fehlt der Konstruktor und damit das Initializecomponent. Wenn man aber sub new tippt, fügt Visual Studio den Code ein.
Mit folgenden Code wird die Liste mit Vespa Modellen gefüllt.
1: Public Sub New()
2: ' Dieser Aufruf ist für den Designer erforderlich.
3: InitializeComponent()
4: ' Fügen Sie Initialisierungen nach dem InitializeComponent()-Aufruf hinzu.
5: VM = New testVM
6: VM.liste = New ObservableCollection(Of String)
7: VM.liste.Add("Vespa 400")
8: VM.liste.Add("Vespa 150 VNB")
9: VM.liste.Add("Vespa 125 PX")
10: VM.liste.Add("Vespa 200 Millenium")
11: VM.liste.Add("Vespa P200E")
12: VM.liste.Add("Vespa 150 Sprint")
13: End Sub
Als nächstes wird ein User Interface erstellt. Eine Liste von Vespas und ein verkaufen Button, der jeweils die erste Vespa aus der Garage entfernt. Da die Eigenschaft VM die Referenz auf das Viewmodel enthält, kann an die Methode button1 direkt gebunden werden.
1: <Button Click="{x:Bind VM.button1}"
2: Grid.Column="1" Height="30" VerticalAlignment="Top"
HorizontalAlignment="Right">verkaufen</Button>
3:
Analog werden die Listendaten an das Listen Element gebunden. Für das Datatemplate wird allerdings noch der Datentyp benötigt. Da die Liste nur aus String Element besteht, per String mit dem X Namesraumpräfix. In der Regel wird eine ObservableCollection allerdings aus komplexen Objekten bestehen, das dann in Datatype als Wert angeben werden muss.
1: <ListView ItemsSource="{x:Bind VM.liste}" Grid.ColumnSpan="2">
2: <ListView.ItemTemplate>
3: <DataTemplate x:DataType="x:String">
4: <TextBlock Text="{x:Bind}"></TextBlock>
5: </DataTemplate>
6: </ListView.ItemTemplate>
7: </ListView>
Im nächsten Blog werde ich mich mit den Animationen beschäftigen, die UWP durchführt wenn ein Element aus dem Listview Control entfernt wird.