BindableLayout: Ersatz für die RepeaterView

Im vergangenen Jahr habe ich in mehreren Artikeln gezeigt, wie man sich eine RepeaterView schreiben kann. Das Ziel war es ein Control zu haben, welches eine ItemsSource entgegen nimmt und diese dann rendert. Dies ist zum Beispiel dann sinnvoll, wenn man auf die zusätzlichen Features einer ListView verzichten kann. Mit Xamarin.Forms 3.5 ist nun ein neues Feature verfügbar, welches auf den Namen BindableLayout hört. Damit wird die RepeaterView überflüssig, da man nun einen beliebigen Container, wie zum Beispiel dem StackLayout direkt eine ItemsSource und ein ItemTemplate übergeben kann. Wie das ganze im Einzelnen funktioniert, möchte ich euch in diesem Beitrag zeigen.

Als Basis dient wieder eine Personen-Klasse, welche über einen Namen, ein Alter und ein Geschlecht verfügt. Über das ViewModel wird eine „zufällige“ Liste von 100 Personen erstellt, welche wir nun über ein StackLayout zur Anzeige bringen wollen.

<ScrollView>
    <StackLayout BindableLayout.ItemsSource="{Binding Persons}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
						<RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <StackLayout Orientation="Horizontal"                                 
                                 Margin="16,6"
                                 Spacing="12"
                                 Grid.Row="0">

                        <Label>
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="Name: " />
                                    <Span Text="{Binding Name}"
                                          FontAttributes="Bold" />
                                    <Span Text="&#13;&#10;" />
                                    <Span Text="Age: " />
                                    <Span Text="{Binding Age}"
                                          FontAttributes="Italic" />
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                    </StackLayout>

                    <BoxView HeightRequest="1"
                             Color="Black"
                             Grid.Row="1" />
                </Grid>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ScrollView>

Wie man dem Beispiel entnehmen kann, können wir über die Property BindableLayout.ItemsSource nun direkt eine Liste von Elementen binden, welche dann mit dem Template spezifiziert in BindableLayout.ItemTemplate angezeigt werden.

Wie man dem Ergebnis entnehmen kann, funktioniert das BindableLayout genauso wie unsere RepeaterView, aber wir sparen uns nun das Anlegen der RepeaterView. Außerdem funktioniert dies natürlich nicht nur mit einem StackLayout, sondern mit jedem Container und ist dadurch flexibler als die RepeaterView.

Das obige Beispiel findet ihr auch auf GitHub und könnt damit ein wenig herum spielen.