CarouselViewのXamarinフォームタグ

Question

私は、アプリケーション内で新しいCarouselViewコントロールを使用して、テキスト/記事のコレクションを表示しています。コレクションの各記事には、タグと呼ばれる文字列の文字列も含まれています。データバインディングを可能にするコントロールを使用して、カルーセルビュー内にこれらのタグを水平に表示したいと思います。予想される外観は、本文のすぐ下にあるこのようなものでなければなりません。 Expected look of tags

私はこれをどのように達成することができますか？

Answer 1

まず、良い/悪いニュース：ListViewは、バインド可能なタグセットを提示できますが、残念ながら現時点ではHorizontalの方向はサポートされていません。

次善の策はScrollView内に含まれる水平StackLayout次のようになります。

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

とViewModelにバインドコンテキストまたはそのプロパティの変更からのデータとそのStackLayoutを取り込みます。次の例では、StackLayoutにLabelのビューを取り込み、 "TagStyleName"という名前のスタイルを使用してスタイリングします。

// 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" })); 
    } 
}