モデルを表示するためのCarouselPageコンテンツページのバインド

Question

XamarinフォームでCarouselPageを使用しようとしています。ビューモデルで

<?xml version="1.0" encoding="utf-8" ?> 
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" 
      xmlns:views="clr-namespace:TestForms.Views;assembly=TestForms" 
      prism:ViewModelLocator.AutowireViewModel="True" 
      x:Class="TestForms.Views.Photos" ItemsSource="{Binding Pages}"> 
    <CarouselPage.ItemTemplate> 
     <DataTemplate> 
      <ContentPage > 
      <StackLayout VerticalOptions="StartAndExpand" Padding="50"> 
      <Label Text="ContentPage"></Label> 
      <Label Text="{Binding Title}"></Label> 
      <Label Text="{Binding Description}"></Label> 
      </StackLayout> 
      </ContentPage> 
     </DataTemplate> 
    </CarouselPage.ItemTemplate> 
</CarouselPage> 

私は

List<ContentPage> ContentPages = new List<ContentPage>(); 
foreach (var photo in Photos) 
{ 
    var page = new ContentPage(); 
    page.BindingContext = new PhotoDetailViewModel(photo); 
    ContentPages.Add(page); 
} 
Pages = new ObservableCollection<ContentPage>(ContentPages); 

私はこれをレンダリングしているとき、私はすべての写真のページのリストを取得します。個々のページにタイトルや説明をバインドすることはできません。 私はここで何が欠けていますか？

Answer 1

あなたのCarouselPageが正しく

を有線わずかにあなたのビューモデルを変更する必要がありました。

私はあなたのTitleとDescriptionと仮定しています。プロパティはPhotoDetailViewModelにありますか？

もしそうなら、あなたはそれがあなたの性質CarouselPageあなたの持っているでは「タイトル」と「説明」

を持っていないでしょうContentPageのリストにバインドされているため機能していない、あなたのCarouselPageに作成している結合既にに子ページのBindingContextを自動的に設定するItemsSourceバインディングを設定しました。だからあなたは手動で行う必要はありません。

だからではなく、あなたのViewModelにPhotoDetailViewModelのObservableCollectionを作成し、それにあなたのCarouselPageのItemsSourceをバインドします。

ので、削除します。

List<ContentPage> ContentPages = new List<ContentPage>(); 
foreach (var photo in Photos) 
{ 
    var page = new ContentPage(); 
    page.BindingContext = new PhotoDetailViewModel(photo); 
    ContentPages.Add(page); 
} 
Pages = new ObservableCollection<ContentPage>(ContentPages); 

をさらに追加します。

Pages = new ObservableCollection<PhotoDetailViewModel>(Photos.Select(p => new PhotoDetailViewModel(p)); 

ObservableCollection<PhotoDetailViewModel>

にPagesの施設のタイプを変更してください、それはあなたが

を変更する必要があるすべてでなければなりません

Answer 2

私が言ったように、ContentPageではなくContentViewを使用する必要があります。以下は

public partial class AnotherCarouselPage : ContentPage 
{ 
    public class Zoo 
    { 
     public string ImageUrl { get; set; } 
     public string Name { get; set; } 
    } 

    public ObservableCollection<Zoo> Zoos { get; set; } 

    public AnotherCarouselPage() 
    { 
     Zoos = new ObservableCollection<Zoo> 
    { 
     new Zoo 
     { 
      ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/23c1dd13-333a-459e-9e23-c3784e7cb434/2016-06-02_1049.png", 
      Name = "Woodland Park Zoo" 
     }, 
     new Zoo 
     { 
      ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/6b60d27e-c1ec-4fe6-bebe-7386d545bb62/2016-06-02_1051.png", 
      Name = "Cleveland Zoo" 
      }, 
     new Zoo 
     { 
      ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/e8179889-8189-4acb-bac5-812611199a03/2016-06-02_1053.png", 
      Name = "Phoenix Zoo" 
     } 
    }; 

     InitializeComponent(); 

     carousel.ItemsSource = Zoos; 
     carousel.PositionSelected += Carousel_PositionSelected; 
     carousel.ItemSelected += Carousel_ItemSelected; 
    } 

    private void Carousel_ItemSelected(object sender, SelectedItemChangedEventArgs e) 
    { 

    } 

    private void Carousel_PositionSelected(object sender, SelectedPositionChangedEventArgs e) 
    { 

    } 
} 

例を働いているページのXML

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:control="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView" 
      x:Class="ButtonRendererDemo.AnotherCarouselPage" 
      x:Name="devicePage" 
    BackgroundColor="Gray"> 
    <ContentPage.Content> 
    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> 
     <control:CarouselView x:Name="carousel" > 
     <control:CarouselView.ItemTemplate> 
      <DataTemplate> 
      <StackLayout> 
       <Label Text="{Binding Name}"/> 
       <Image Source="{Binding ImageUrl}"/> 
      </StackLayout> 
      </DataTemplate> 
     </control:CarouselView.ItemTemplate> 
     </control:CarouselView> 
    </StackLayout> 

    </ContentPage.Content> 
</ContentPage>