Xamarin CollectionView - 以编程方式滚动答案

【问题标题】：Xamarin CollectionView - Scroll ProgramaticallyXamarin CollectionView - 以编程方式滚动
【发布时间】：2020-12-17 05:06:51
【问题描述】：

我有收藏视图。见下面代码

 <CollectionView ItemsSource="{Binding photos}" HeightRequest="300"
                                    ItemSizingStrategy="MeasureAllItems" Margin="10,0,10,0"
                                    x:Name="photosView"
                                    ItemsUpdatingScrollMode="KeepScrollOffset">
                        <CollectionView.ItemsLayout>
                            <GridItemsLayout Orientation="Vertical" Span="3" />
                        </CollectionView.ItemsLayout>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <StackLayout Padding="2">
                                <Frame BackgroundColor="Red" HeightRequest="79" WidthRequest="53" Padding="0" Margin="0"
                                       IsClippedToBounds="True" HasShadow="False" CornerRadius="10">
                                    <Image Aspect="AspectFill"  Source="{Binding imageUrl}"/>
                                </Frame>
                                    </StackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>

我正在显示 3 行 3 列的图像。如果我有超过 9 张图片，那么我会显示 Button，上面写着 Scroll for more photos。现在点击图片我有下面的代码

void OnScrollMore(System.Object sender, System.EventArgs e)
    {
        //photosView.SendScrolled(new ItemsViewScrolledEventArgs() { FirstVisibleItemIndex = 0 });
        photosView.ScrollTo(photosView.Y + 10, position: ScrollToPosition.MakeVisible, animate: true);
        
    }

但是什么都没有发生。它没有滚动到下一行。

有什么建议吗？

【问题讨论】：

你的“照片”是不是一开始有9项，点击按钮后，显示其余按钮？
先检查photosView.Y的值是否正确。您可以选择scroll to an item。

标签： xamarin.forms

【解决方案1】：

您的 ScrollTo 方法不起作用的原因是 photosView 在您的 photosView 项目源中找不到项目“photosView.Y + 10”。您正在调用的方法是尝试在 ItemsSource 中查找项目。它不像您尝试那样滚动到 y 位置。你可以在去定义的时候在方法的描述中看到。它正在等待一个“对象项”。

public void ScrollTo(object item, object group = null, ScrollToPosition position = ScrollToPosition.MakeVisible, bool animate = true);

如果您要滚动到集合视图的最后一个添加项，请尝试这种工作方法并从那里构建它。每次按下按钮时，都会添加一个项目（字符串）。此项设置为按钮单击处理程序末尾的 ScrollTo 对象。

MainPage.xaml

<StackLayout Orientation="Vertical">
        <CollectionView ItemsSource="{Binding photos}" HeightRequest="300"
                                    ItemSizingStrategy="MeasureAllItems" Margin="10,0,10,0"
                                    x:Name="photosView"
                                    ItemsUpdatingScrollMode="KeepLastItemInView">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="3" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="2">
                        <Frame BackgroundColor="Red" HeightRequest="79" WidthRequest="53" Padding="0" Margin="0"
                                       IsClippedToBounds="True" HasShadow="False" CornerRadius="10">
                            <Label Text="{Binding}" TextColor="White"
                                   HorizontalOptions="Center" VerticalOptions="Center"
                                   HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <Button Text="scroll more" HorizontalOptions="Center" VerticalOptions="End" Clicked="OnScrollMore"/>
    </StackLayout>

MainPage.xaml.cs

public partial class MainPage : ContentPage
    {
        ObservableCollection<string> ObservableItems { get; set; }

        public MainPage()
        {
            InitializeComponent();

            ObservableItems = new ObservableCollection<string>(new List<string>() { "een", "twee", "drie" });
            photosView.ItemsSource = ObservableItems;
        }

        void OnScrollMore(System.Object sender, System.EventArgs e)
        {
            var item = (ObservableItems.Count + 1).ToString();

            ObservableItems.Add(item);

            photosView.ScrollTo(item, position: ScrollToPosition.MakeVisible, animate: true);
        }
    }

导致：

【讨论】：