Xamarin Forms-Tags in CarouselView

Question

Ich verwende das neue Steuerelement CarouselView in meiner App, um eine Sammlung von Text/Artikeln anzuzeigen. Jeder Artikel in der Sammlung enthält auch ein String-Array mit Text, den ich als Tags bezeichne. Ich möchte diese Tags horizontal in der Karussellansicht mit einem Steuerelement anzeigen, das Databinding ermöglicht. Das erwartete Aussehen sollte etwa so aussehen: direkt unter dem Haupttext: Expected look of tags

Irgendwelche Ideen, wie ich das erreichen könnte?

Answer 1

Nun, zuerst die guten/schlechten Nachrichten: die ListView würde Ihnen erlauben, eine bindbare Gruppe von Tags zu präsentieren, aber leider unterstützt es derzeit keine Horizontal Ausrichtung, so dass es Ihre Bedürfnisse nicht erfüllen würde.

Das nächste wäre am besten, was ein horizontales StackLayout innerhalb eineine ScrollView enthalten sein:

<ScrollView Orientation="Horizontal"> 
    <StackLayout x:Key="tags" Orientation="Horizontal"> 
    </StackLayout> 
</ScrollView> 

Und bevölkert, dass StackLayout mit Daten aus dem Ansichtsmodell, wenn der Bindungskontext oder dass Eigenschaftsänderungen. Im folgenden Beispiel wird das StackLayout mit Label Ansichten gefüllt, die mit einem Stil namens "TagStyleName" formatiert sind.

// Note: If this code doesn't work, someone else wrote it. 
protected override OnBindingContextChanged() { 
    var vm = this.BindingContext as MyViewModelClass; 
    if (vm == null) return; 
    vm.PropertyChanged += (o, e) => { 
    if (e.PropertyName == "Tags") { 
     WatchTagsForChanges(); 
     RefreshTags(); 
    } 
    }; 
} 

private void WatchTagsForChanges() { 
    var vm = this.BindingContext as MyViewModelClass; 
    if (vm == null) return; 

    vm.Tags.CollectionChanged += (o, e) => RefreshTags(); 
} 

private void RefreshTags() { 
    var vm = this.BindingContext as MyViewModelClass; 
    if (vm == null) return; 

    this.tags.Children.Clear() 
    foreach (var tag in vm.Tags) { 
    this.tags.Children.Add(new Label{ Text = tag, Style = "TagStyleName" })); 
    } 
}