绑定 CarouselPage 内容页面到视图模型

Question

我正在尝试在 Xamarin Forms 中使用 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

正如我所说，您应该使用 ContentView 而不是 ContentPage。下面是工作示例

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>

Answer 2

您的 CarouselPage 接线正确

只需要稍微改变你的视图模型。

我假设您的 Title 和 Description 属性在您的 PhotoDetailViewModel?

中

如果是这样，您在 CarouselPage 中创建的绑定不起作用，因为它绑定到 ContentPage 的列表，该列表不具有属性 "Title" 和 "Description"

在您的 CarouselPage 中，您已经设置了一个 ItemsSource 绑定，它会自动设置 CarouselPage 中子页面的 BindingContext。所以你不需要手动做。

因此，改为在您的 ViewModel 中创建一个 ObservableCollection of PhotoDetailViewModel，并将 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));

确保将 Pages 的属性类型更改为 ObservableCollection<PhotoDetailViewModel>

这就是您需要更改的全部内容

绑定 CarouselPage 内容页面到视图模型

Binding CarouselPage content pages to view model

prism

xamarin

xamarin.forms