КарусельПросмотреть в XamarinForms - PullRequest
Новая
       11

КарусельПросмотреть в XamarinForms

0 голосов
/ 19 ноября 2018

Я пытаюсь использовать CarouselView в проекте Xamarin.Но я не могу этого сделать.Вот установленные пакеты: enter image description here enter image description here Вот код 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>

А вот код# код: 

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: Time = 19.11.2018 14:54:54 +03: 00, Уровень = Ошибка, Заголовок = Ошибка визуализации, Сообщение = Указанный ключ отсутствует всловарь.(KeyNotFoundException)]

Как это исправить?Спасибо.

Обновление 1: Я заменил код на основе вашего совета.Я использовал твой совет.Я пытался запустить приложение на:

  1. Версия Android: 7.1
  2. Эмулятор: Genymotion Galaxy S7 7.1.0 API 25

И получил эту ошибку: enter image description here

Что это?(

Ответы [ 4 ]

0 голосов
/ 20 ноября 2018

Проблема в длинном пути. Простое решение - переместить все проектное решение по более короткому пути, например C: \

Вот объяснение от Microsoft: Путь слишком длинный, исключение

0 голосов
/ 19 ноября 2018

В вашем XAML есть следующая строка: 

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

Это означает, что код пытается связать свойство с именем Zoos со свойством ItemsSource объектаCarouselView.Вам нужно будет создать свойство типа List<View> и реализовать структуру INotifyPropertyChanged для обновления представления.Вам также нужно будет присвоить BindingContext страницы содержимого для себя (BindingContext = this;).

Вы также можете обнаружить, что не можете просто привязать URL-адрес к источнику изображения и ожидать появления изображения.

0 голосов
/ 19 ноября 2018

Попробуйте это
Сначала добавьте этот класс для привязки свойств и реализуйте структуру 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();
    }
}
0 голосов
/ 19 ноября 2018

Добавьте BindingContext = this;после InitializeComponent ();или добавьте CarouselZoos.ItemsSource = Zoos;в методе OnAppearing ()

...