绑定CarouselPage内容页面以查看模型-Java 学习之路

我想在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);

当我渲染这个时，我会得到所有照片的页面列表 . 但我似乎无法绑定单个页面中的 Headers 或描述 . 我在这里错过了什么？

2 回答

0
您已正确连接 CarouselPage

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

我假设你的 Title 和 Description 属性在你的 PhotoDetailViewModel ？

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

在您的 CarouselPage 中，您已经设置了 ItemsSource 绑定，该绑定应自动在您的 CarouselPage 中设置子页面的 BindingContext . 所以你不需要手动完成 .

因此，在ViewModel中创建 ObservableCollection PhotoDetailViewModel 并将 CarouselPage 的 ItemsSource 绑定到该 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);
```
并添加：
```
Pages = new ObservableCollection<PhotoDetailViewModel>(Photos.Select(p => new PhotoDetailViewModel(p));
```
确保将 Pages 的属性类型更改为 ObservableCollection<PhotoDetailViewModel>

这应该是你需要改变的全部内容
回复于 2024-05-05T20:13:21+08:00

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

回复于 2024-05-05T20:13:21+08:00

绑定CarouselPage内容页面以查看模型

2 回答

相关问题