如何从后面的代码设置CarouselView的项目？

I have a CarouselView which is bound to an ItemsSource of images. But I want to change the current Image shown by changing the index of the CarouselView.

我有一个CarouselView绑定到ItemsSource的图像。但我想通过更改CarouselView的索引来更改当前显示的图像。

I have tried using CarouselView.Position to the index of the element that has to be selected. But unfortunately this does not work.

我已经尝试将CarouselView.Position用于必须选择的元素的索引。但不幸的是，这不起作用。

How can I achieve this? Thanks

我怎样才能做到这一点？谢谢

1 个解决方案

#1

I have tried using CarouselView.Position to the index of the element that has to be selected. But unfortunately this does not work.

我已经尝试将CarouselView.Position用于必须选择的元素的索引。但不幸的是，这不起作用。

Since you're using data binding for ItemsSource of CarouselView, you can implement the INotifyPropertyChanged interface for your image model.

由于您正在为CarouselView的ItemsSource使用数据绑定，因此您可以为您的图像模型实现INotifyPropertyChanged接口。

For example:

例如：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
             x:Class="FormsIssue2.Page1">
    <Grid>
        <cv:CarouselView ItemsSource="{Binding Zoos, Mode=OneWay}" 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, Mode=OneWay}" />
                        <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
                            <Label TextColor="White" Text="{Binding Name, Mode=OneWay}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
                        </StackLayout>
                    </Grid>
                </DataTemplate>
            </cv:CarouselView.ItemTemplate>
        </cv:CarouselView>
    </Grid>
</ContentPage>

Code behind:

代码背后：

public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();

        Zoos = new ObservableCollection<Zoo>
      {
        new Zoo
        {
            ImageUrl = "http://wallpaper-gallery.net/images/image/image-13.jpg",
            Name = "Woodland Park Zoo"
        },
            new Zoo
        {
            ImageUrl =  "https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg",
            Name = "Cleveland Zoo"
            },
        new Zoo
        {
            ImageUrl = "http://i.stack.imgur.com/WCveg.jpg",
            Name = "Phoenix Zoo"
        }
    };

        //CarouselZoos.ItemsSource = Zoos;
        this.BindingContext = this;
        CarouselZoos.ItemSelected += CarouselZoos_ItemSelected;
    }

    private void CarouselZoos_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as Zoo;
        if (item == null)
            return;
        item.ImageUrl = "https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png";
    }

    public ObservableCollection<Zoo> Zoos { get; set; }
}

public class Zoo : INotifyPropertyChanged
{
    private string _ImageUrl;

    public string ImageUrl
    {
        get { return _ImageUrl; }
        set
        {
            if (value != _ImageUrl)
            {
                _ImageUrl = value;
                OnPropertyChanged("ImageUrl");
            }
        }
    }

    private string _Name;

    public string Name
    {
        get { return _Name; }
        set
        {
            if (value != _Name)
            {
                _Name = value;
                OnPropertyChanged("Name");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

Once an item is selected, you can find this item's instance in SelectedItemChangedEventArgs, then you can change the image source of this item.

选择项目后，您可以在SelectedItemChangedEventArgs中找到此项目的实例，然后您可以更改此项目的图像源。

Update:

更新：

Based on our discussion, I think the item sources for your CarouselView for thumbnails and the CarouselView for your larger images are in the same sequential order, then when you select the item in your thumbnails, you can get the position of thumbnails and scroll the CarouselView for larger images like this:

根据我们的讨论，我认为您的CarouselView用于缩略图的项目源和用于较大图像的CarouselView按照相同的顺序排列，然后当您在缩略图中选择项目时，您可以获得缩略图的位置并滚动CarouselView对于像这样的大图：

var postion = CarouselThunbnails.Position;
CarouselImages.Position = postion;