如何從后面的代碼為CarouselView設置項目？

Question

我有一個CarouselView，它綁定到圖像的ItemsSource。 但是我想通過更改CarouselView的索引來更改當前顯示的圖像。

我嘗試使用CarouselView.Position來選擇元素的索引。 但不幸的是，這行不通。

我該如何實現？ 謝謝

Answer 1

我嘗試使用CarouselView.Position來選擇元素的索引。 但不幸的是，這行不通。

由於您正在為CarouselView ItemsSource使用數據綁定，因此可以為圖像模型實現INotifyPropertyChanged接口。

例如：

<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>

后面的代碼：

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

選擇一個項目后，您可以在SelectedItemChangedEventArgs找到該項目的實例，然后可以更改該項目的圖像源。

更新：

根據我們的討論，我認為該項目源的CarouselView的縮略圖和CarouselView為您較大的圖像是在同一順序，那么當你選擇在縮略圖的項目，就可以得到縮略圖的位置和滾動CarouselView對於像這樣的大圖像：

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