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

Posted 2023-03-12

【中文标题】如何从后面的代码中为 CarouselView 设置项目？

【英文标题】：How to set the item for a CarouselView from code behind?

【发布时间】：2017-02-03 08:03:55

【问题描述】：

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

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

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

【参考方案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));
    

选中一个item后，你可以在SelectedItemChangedEventArgs找到这个item的实例，然后你可以更改这个item的图片来源。

更新：

根据我们的讨论，我认为您的缩略图的 CarouselView 和大图的 CarouselView 的项目来源顺序相同，然后当您在缩略图中选择项目时，您可以获得缩略图的位置并滚动 CarouselView 以获得更大的图像，如下所示：

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

【讨论】：

感谢您的帮助。但我面临的问题是我有几个缩略图，所有这些缩略图也绑定到翻转视图。当用户点击缩略图时，我让 FlipView 在图像以较大格式显示的位置可见。但我无法在 FlipView 中为点击的项目设置项目。通常我可以使 FlipView 可见并滑动以四处移动并查看其他图像。只是我无法在两者之间打开一个项目。如果这有意义的话。

@AbsoluteSith，听起来你想在选择缩略图时在特定位置插入一个项目？您有两个CarouselView，一个用于缩略图，另一个用于更大格式的图像？我的演示展示了如何在选择CarouselView 的项目时更改图像。

但是由于我使用的是 ItemSource 绑定，因此在选择 CarouselView 时不需要设置图像。但是这些 CarouselView 只是按顺序向我显示图像。它只是我想在那个序列中选择一个特定的位置。

@AbsoluteSith，所以，你的意思是当你在缩略图中选择一个项目时，你想让CarouselView 自动滚动到特定项目？

正确。就像任何照片应用一样。