Question

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

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

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

Answer 1

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

由于您正在使用ItemsSource CarouselView的数据绑定，因此可以为图像模型实现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;

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

1 个答案: