Listen und Compiled Bindings mit UWP

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:  PublicClass testVM

   2:  Implements INotifyPropertyChanged

   3:   

   4:  Private _liste As ObservableCollection(Of String)

   5:  PublicProperty liste() As ObservableCollection(Of String)

   6:  Get

   7:  Return _liste

   8:  EndGet

   9:  Set(ByVal value As ObservableCollection(Of String))

  10:              _liste = value

  11:  EndSet

  12:  EndProperty

  13:   

  14:  PublicSub 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:  PublicNotInheritableClass 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:  PublicSubNew()

   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:  <ListViewItemsSource="{x:Bind VM.liste}"Grid.ColumnSpan="2">

   2:  <ListView.ItemTemplate>

   3:  <DataTemplatex:DataType="x:String">

   4:  <TextBlockText="{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.