Xamarin 将转盘页面内容页绑定到视图模型_Xamarin_Xamarin.forms_Prism

Xamarin 将转盘页面内容页绑定到视图模型

xamarin xamarin.forms

Xamarin 将转盘页面内容页绑定到视图模型,xamarin,xamarin.forms,prism,Xamarin,Xamarin.forms,Prism,我正在尝试使用Xamarin形式的旋转木马 <?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;

我正在尝试使用Xamarin形式的旋转木马

<?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);

List ContentPages=new List（）；
foreach（照片中的var照片）
{
var page=new ContentPage（）；
page.BindingContext=新的PhotoDetailViewModel（照片）；
ContentPages.Add（第页）；
}
Pages=新的ObservableCollection（ContentPages）；

渲染时，我会得到所有照片的页面列表。但我似乎无法将标题或描述绑定到单独的页面中。

我在这里遗漏了什么？

正如我所说，您应该使用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)
    {

    }
}

public分部类另一个carouselpage:ContentPage
{
公立动物园
{
公共字符串ImageUrl{get；set；}
公共字符串名称{get；set；}
}
公共可观测集合动物园{get；set；}
公共另一个转盘页（）
{
Zoos=新的可观察集合
{
新动物园
{
ImageUrl=”http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/23c1dd13-333a-459e-9e23-c3784e7cb434/2016-06-02_1049.png",
Name=“林地公园动物园”
},
新动物园
{
ImageUrl=”http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/6b60d27e-c1ec-4fe6-bebe-7386d545bb62/2016-06-02_1051.png",
Name=“克利夫兰动物园”
},
新动物园
{
ImageUrl=”http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/e8179889-8189-4acb-bac5-812611199a03/2016-06-02_1053.png",
Name=“凤凰动物园”
}
};
初始化组件（）；
carousel.ItemsSource=动物园；
carousel.PositionSelected+=carousel_PositionSelected；
carousel.ItemSelected+=carousel_ItemSelected；
}
已选择专用void Carousel_项（对象发送方，SelectedItemChangedEventArgs e）
{
}
已选择专用空传送带位置（对象发送方，已选择位置更改传送带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>

正如我所说，您应该使用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)
    {

    }
}

public分部类另一个carouselpage:ContentPage
{
公立动物园
{
公共字符串ImageUrl{get；set；}
公共字符串名称{get；set；}
}
公共可观测集合动物园{get；set；}
公共另一个转盘页（）
{
Zoos=新的可观察集合
{
新动物园
{
ImageUrl=”http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/23c1dd13-333a-459e-9e23-c3784e7cb434/2016-06-02_1049.png",
Name=“林地公园动物园”
},
新动物园
{
ImageUrl=”http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/6b60d27e-c1ec-4fe6-bebe-7386d545bb62/2016-06-02_1051.png",
Name=“克利夫兰动物园”
},
新动物园
{
ImageUrl=”http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/e8179889-8189-4acb-bac5-812611199a03/2016-06-02_1053.png",
Name=“凤凰动物园”
}
};
初始化组件（）；
carousel.ItemsSource=动物园；
carousel.PositionSelected+=carousel_PositionSelected；
carousel.ItemSelected+=carousel_ItemSelected；
}
已选择专用void Carousel_项（对象发送方，SelectedItemChangedEventArgs e）
{
}
已选择专用空传送带位置（对象发送方，已选择位置更改传送带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>

您的

转盘页面已正确连接
只需稍微更改视图模型
我假设您的标题
和说明
属性在您的PhotoDetailViewModel中

如果是这样，您在转盘页面中创建的绑定将不起作用，因为它绑定到ContentPage
列表，而该列表没有“Title”和“Description”属性
在CarouselPage
中，您已经设置了ItemsSource
绑定，该绑定应自动设置CarouselPage中子页面的BindingContext
。所以你不需要手动操作
因此，在ViewModel中创建一个PhotoDetailViewModel
的ObservableCollection
，并将CarousePage
的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);   

List ContentPages=new List（）；
foreach（照片中的var照片）
{
var page=new ContentPage（）；
page.BindingContext=新的PhotoDetailViewModel（照片）；
ContentPages.Add（第页）；
}
Pages=新的ObservableCollection（ContentPages）；

并加上：
Pages = new ObservableCollection<PhotoDetailViewModel>(Photos.Select(p => new PhotoDetailViewModel(p)); 

Pages=newobserveCollection（Photos.Select（p=>newphotodetailviewmodel（p））；

确保将页面
的属性类型更改为可观察集合

这就是您需要更改的全部内容
您的转盘页面已正确连接
只需稍微更改视图模型
我假设您的标题
和说明
属性在您的PhotoDetailViewModel中

如果是这样，您在转盘页面中创建的绑定将不起作用，因为它绑定到ContentPage
列表，而该列表没有“Title”和“Description”属性
在您的CarouselPage
中，您的