如何在carouselView中反映CarouselView.ItemsSource中所做的更改？ （Xamarin形式）

Question

我正在使用Xamarin.Forms应用程序，试图使滚动视图中的项目在滚动时更改其TransitionX属性，问题在于，一旦显示了滚动视图，其中的项目就不会像源代码一样更改，除非您重新分配carouselview.ItemSource，但是我不能这样做，因为它效率极低，而且滚动也很糟糕。那么有什么方法可以动态地在carouselView中反映源中所做的更改？

这里是我的代码，我写了一些评论以使其尽可能清晰：CarouselView：

<MasterDetailPage.Detail>
        <ContentPage Title="title">
            <StackLayout
                x:Name="page">

                <CarouselView
                    x:Name="carousel" 

                    VerticalOptions="StartAndExpand"
                    HorizontalOptions="StartAndExpand"

                    BackgroundColor="Transparent"

                    Scrolled="carousel_Scrolled">

                    <CarouselView.Behaviors>
                        <behaviors:CarouselViewParallaxBehavior ParallaxOffset="100"/>
                    </CarouselView.Behaviors>

                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid>
//Here goes more content which is irrelevant for this matter
                                </Grid>

                                <Image
                                    Source="{Binding ImageSrc}"
                                    BackgroundColor="Transparent"
                                    HeightRequest="500"

//This is the property I am trying to change when scrolling
                                    TranslationX="{Binding Position}"

                                    VerticalOptions="Center"
                                    HorizontalOptions="Center"
                                    Margin="0,-160,0,0"></Image>

                            </Grid>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Detail>

我的xaml.cs代码：

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class HomePage : MasterDetailPage
    {
        private List<Color> _backgroundColorscount = new List<Color>();
        private List<Color> _backgroundColors = new List<Color>();
        private List<Product> Items;
        private static double position = 0;

        public HomePage()
        {
            InitializeComponent();

//These are the items of my carouselView
            Items = new List<Product>()
            {
                // Just create some dummy data here for now.
                new Product{Title = "Classic burguer", Price = "124$", ImageSrc = "Burguer.png", StartColor = Color.FromHex("#DF8000"), EndColor = Color.FromHex("#DCD800")},
                new Product{Title = "Classic burguer", Price = "124$", ImageSrc = "Burguer.png", StartColor = Color.FromHex("#15DE00"), EndColor = Color.FromHex("#BADE00")},
                new Product{Title = "Classic burguer", Price = "124$", ImageSrc = "Burguer.png", StartColor = Color.FromHex("#00DEAD"), EndColor = Color.FromHex("#DCD800")}
            };

            carousel.ItemsSource = Items;
        }


        private void carousel_Scrolled(object sender, ItemsViewScrolledEventArgs e)
        {
//Here is what I am trying to do (I wrote it right now to show the problem)
            Items[0].Position = position - 10;
// the position property in Items[0] is changed, but the change is not reflected in the carouselView
        }
    }

我的模型班级：

    class Product
    {
        #region Bindings
        //Item views 
        public string Title { get; set; }
        public string Price { get; set; }
        public string ImageSrc { get; set; }
        public string Description { get; set; }

        // Gradient colors
        private Color startColor;
        public Color StartColor 
        {
            get
            {
                return startColor;
            }

            set
            {
                startColor = value;
            }
        }

        private Color endColor;
        public Color EndColor 
        {
            get
            {
                return endColor;
            }

            set
            {
                endColor = value;
            } 
        }

        private Color backgroundColor;
        public Color BackgroundColor
        {
            get 
            {
                if (startColor != null && endColor != null)
                    backgroundColor = GetBackGroundColor();

                return backgroundColor;
            }
        }

        //Item Properties 
        private double _position;
        public double Position
        {
            get
            { 
                return _position; 
            }
            set
            { 
                _position = value; 
                OnPropertyChanged(); 
            }
        }

        private double _scale;
        public double Scale
        {
            get { return _scale; }
            set
            {
                _scale = value;
                OnPropertyChanged();
            }
        }
        #endregion

        public Product()
        {
            Scale = 1;
        }


        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

仅此，如果您需要更多代码或信息，我们将在收到您的请求后立即将其提供给您。谢谢大家的时间，祝您有美好的一天。

Answer 1

使用绑定使我们的生活更轻松：

在您的XAML中：

<ListView ItemsSource="{Binding Items}" ...../>

在您的C＃端，项将是可观察的集合

public ObservableCollection<Product> Items { get; set; }

而且您也不需要

carousel.ItemsSource = Items;

Rest会在您对集合进行任何更改后立即保持不变，因此轮播也会更改。

注意：Product类的所有属性都需要在属性更改时进行通知。