更新 ObservableCollection 时停止 UWP ListView 滚动到顶部

问题描述

当我更新绑定到 ListView 的 ObservableCollection 时，它会自动滚动到顶部。

我获取数据的代码目前看起来像这样，记录是 ObsevableCollection：

        public async Task getData()
        {

            var client = new HttpClient();
            HttpResponseMessage response = await client.GetAsync(new Uri("https://api.nomics.com/v1/currencies/ticker?key=<api key>&limit=10"));
            var jsonString = await response.Content.ReadAsstringAsync();
            JsonArray root = JsonValue.Parse(jsonString).GetArray();
            records.Clear();
            for (uint i = 0; i < root.Count; i++)
            {
                string id = root.GetobjectAt(i).GetNamedString("id");
                string name = root.GetobjectAt(i).GetNamedString("name");
                decimal price = decimal.Parse(root.GetobjectAt(i).GetNamedString("price"));
                records.Add(new Coin {
                    id = id,name = name,price = Math.Round(price,4),logo = "https://cryptoicon-api.vercel.app/api/icon/" + id.ToLower()
                });
            };
           
        }

我的 XAML 布局：

 <ListView x:Name="CoinsLV" Grid.Row="1" IsItemClickEnabled="True" ItemClick="listView_ItemClick" ScrollViewer.VerticalScrollMode="Auto">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Padding="5">
                        <Image Width="50" Height="50">
                            <Image.source>
                                <BitmapImage UriSource="{Binding logo}" />
                            </Image.source>
                        </Image>
                        <StackPanel>
                        <TextBlock Text="{Binding name}" 
                           Margin="20,0"
                           FontSize="18" 
                           FontWeight="SemiBold"
                           Foreground="DarkGray" />
                        <TextBlock Text="{Binding price}" 
                           Margin="20,0"
                           FontSize="20"
                           Foreground="White" 
                           Opacity="1" />
                    </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsstackPanel ItemsUpdatingScrollMode="KeepItemsInView" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>

有什么办法可以禁用这种行为，因为它会导致非常糟糕的用户体验。 我试过单独更新每个项目，但无法使其正常工作。 谢谢。

解决方法

我可以重现您的问题。原因是你在添加item之前使用了Books.Clear()清除了datasource，导致ListView的ItemsSource为null，导致listView滚动到顶部。

要解决这个问题，您需要创建一个集合来记录以前的项目，然后您可以从总集合中删除这些以前的项目。

如下：

XML 代码：

<ListView IsItemClickEnabled="True" ScrollViewer.VerticalScrollMode="Auto" ItemsSource="{x:Bind Books}" Height="600">
…
</ListView> 

背后的代码：

public sealed partial class MainPage : Page
    {
        public ObservableCollection<Book> Books;
        public ObservableCollection<Book> OldBooks;
        public MainPage()
        {
            this.InitializeComponent();
            Books =new ObservableCollection<Book>()
            {
                    new Book(){logo=new Uri("ms-appx:///Assets/2.JPG"),name="Chinese",price=25},new Book(){logo=new Uri("ms-appx:///Assets/2.JPG"),name="English",price=26},……
           };
            OldBooks = new ObservableCollection<Book>();
            foreach (var book in Books)
            {
                OldBooks.Add(book);
            }
        }

        private void Button_Click(object sender,RoutedEventArgs e) //update button
        {
          
            Books.Add(new Book() { logo = new Uri("ms-appx:///Assets/1.JPG"),name = "Math",price = 20 });
             ……
            Books.Add(new Book() { logo = new Uri("ms-appx:///Assets/1.JPG"),name = "Chenstry",price = 30 });      

            foreach(var item in OldBooks)
            {
                Books.Remove(item);
            }
        }
    }
    public class Book
    {
        public Uri logo { get; set; }
        public string name { get; set; }
        public int price { get; set; }
    }