Question

我正在尝试在Xamarin项目中使用CarouselView。但是我做不到。以下是已安装的软件包：这是xaml代码：

<?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:local="clr-namespace:FlowersStore"
         xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
         x:Class="FlowersStore.MainPage">

<StackLayout>

    <Grid RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height=".3*"/>
            <RowDefinition Height=".7*"/>
        </Grid.RowDefinitions>
        <cv:CarouselView ItemsSource="{Binding Zoos}" x:Name="CarouselZoos">
            <cv:CarouselView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
                        <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
                            <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
                        </StackLayout>
                    </Grid>
                </DataTemplate>
            </cv:CarouselView.ItemTemplate>
        </cv:CarouselView>
    </Grid>

</StackLayout>

这是c＃代码：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using Xamarin.Forms;

namespace FlowersStore
{
    public class Zoo
    {
        public string ImageUrl { get; set; }
        public string Name { get; set; }
    }

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            LoadDataCatouselView();            
        }

        public void LoadDataCatouselView()
        {
            ObservableCollection<Zoo> 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"
            }
        };
            CarouselZoos.ItemsSource = Zoos;
        }

    }
}

我使用Xamarin Live Player进行调试。手机上的日志显示以下消息： [LogEntry：时间= 19.1.11.2018 14:54:54 +03：00，级别=错误，标题=可视化错误，消息=字典中不存在给定键。（KeyNotFoundException）]

如何解决？谢谢。

更新1： 我根据您的建议替换了代码。我听了你的建议我尝试在以下位置运行该应用程序：

Androind版本：7.1
仿真器：Genymotion Galaxy S7 7.1.0 API 25

并收到此错误：

那是什么？：（

Answer 1

问题出在长途跋涉上。一个简单的解决方案是将整个项目解决方案移到较短的路径，例如C：\

这是Microsoft的一种解释： Path Too Long Exception

Answer 2

在XAML中，您有以下一行：

<cv:CarouselView ItemsSource="{Binding Zoos}" x:Name="CarouselZoos">

这意味着代码正在寻求将名为Zoos的属性绑定到ItemsSource的{{1}}属性。您将需要创建类型为CarouselView的属性，并实现List<View>结构以更新视图。您还需要将内容页面的BindingContext分配给它自己（INotifyPropertyChanged）。

您可能还会发现您不能简单地将URL绑定到图像源，并期望图像出现。

Answer 3

添加BindingContext = this;在InitializeComponent（）之后；否则添加CarouselZoos.ItemsSource = Zoos;在OnAppearing（）方法中

Answer 4

试试这个
首先添加此类以进行属性绑定，并实现INotifyPropertyChanged结构以更新视图。

public class ViewModelBase : INotifyPropertyChanged
{

    string title = string.Empty;

    /// <summary>
    /// Gets or sets the title.
    /// </summary>
    /// <value>The title.</value>
    public string Title
    {
        get { return title; }
        set { SetProperty(ref title, value); }
    }

    string icon = string.Empty;

    /// <summary>
    /// Gets or sets the icon.
    /// </summary>
    /// <value>The icon.</value>
    public string Icon
    {
        get { return icon; }
        set { SetProperty(ref icon, value); }
    }

    bool isBusy;

    /// <summary>
    /// Gets or sets a value indicating whether this instance is busy.
    /// </summary>
    /// <value><c>true</c> if this instance is busy; otherwise, <c>false</c>.</value>
    public bool IsBusy
    {
        get { return isBusy; }
        set
        {
            SetProperty(ref isBusy, value);
        }
    }


    /// <summary>
    /// Sets the property.
    /// </summary>
    /// <returns><c>true</c>, if property was set, <c>false</c> otherwise.</returns>
    /// <param name="backingStore">Backing store.</param>
    /// <param name="value">Value.</param>
    /// <param name="propertyName">Property name.</param>
    /// <param name="onChanged">On changed.</param>
    /// <typeparam name="T">The 1st type parameter.</typeparam>
    protected bool SetProperty<T>(
        ref T backingStore, T value,
        [CallerMemberName]string propertyName = "",
        Action onChanged = null)
    {
        if (EqualityComparer<T>.Default.Equals(backingStore, value))
            return false;

        backingStore = value;
        onChanged?.Invoke();
        OnPropertyChanged(propertyName);
        return true;
    }

    /// <summary>
    /// Occurs when property changed.
    /// </summary>
    public event PropertyChangedEventHandler PropertyChanged;
    /// <summary>
    /// Raises the property changed event.
    /// </summary>
    /// <param name="propertyName">Property name.</param>
    protected void OnPropertyChanged([CallerMemberName]string propertyName = "") => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

现在，当您获得绑定属性的基类时，可以添加用于绑定属性的视图模型类，并遵循MVVM模式。我认为这是处理数据的最实用的方法。

public class Zoo
{
    public string ImageUrl { get; set; }
    public string Name { get; set; }
}

public class CarouselViewModel : ViewModelBase
{
    private ObservableCollection<Zoo> zoos;
    public ObservableCollection<Zoo> Zoos
    {
        get => zoos; set => SetProperty(ref zoos, value);
    }

    public CarouselViewModel()
    {
        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"
            }
        };
    }
}
public partial class MainPage : ContentPage
{
    public CarouselViewModel viewModel;
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = viewModel = new CarouselViewModel();
    }
}

XamarinForms中的CarouselView

4 个答案: