在 App 的開發過程中，ListView 控制元件是比較常用的控制元件之一。掌握它的用法，能幫助我們在一定程度上提高開發效率。本文將會介紹 ListView 的一種用法——獲取並設定 ListView 的滾動位置，以及獲取滾動位置處的專案。這裡多說一句，由於這個描述有點，所以本文的標題實在不好起。

舉個例子，如果你正在開發的應用有這樣一個需求，當用戶從一個列表頁（包括 ListView 控制元件）返回到前一頁面時，你需要得到使用者在瀏覽 ListView 中的內容到哪個位置以及哪一項了，以便告訴使用者最近瀏覽項，並且可以讓使用者再次開啟列表時，直接從上次瀏覽的位置處繼續瀏覽。如下圖：

本文介紹了實現上述需求的方法。具體來說，這個需求可細分為兩個小需求，即：

1. 獲取、設定 ListView 的滾動位置；
2. 獲取 ListView 滾動位置處的專案。

以下我會通過上面配圖中的 Demo 應用逐一說明（本文末尾有原始碼下載連結），這個 Demo 包括兩個頁面，一個主頁 (MainPage)，一個列表頁 (ItemsPage)。主頁中包括：

• 按鈕：可以導航到 ItemsPage；
• 最近瀏覽資訊區域：可以檢視上次瀏覽的專案，並提供一個按鈕可以導航到列表頁中上次瀏覽的專案處；

而列表頁，則包括一個 ListView 控制元件，展示若干個專案。

一、獲取、設定 ListView 的滾動位置

關於獲取、設定 ListView 的滾動位置，微軟已經提供了

       // 獲取 ListView 的滾動位置
       public static string GetRelativeScrollPosition(ListViewBase listViewBase, ListViewItemToKeyHandler itemToKeyHandler)

       // 設定 ListView 的滾動位置
       public static IAsyncAction SetRelativeScrollPositionAsync(ListViewBase listViewBase, String relativeScrollPosition, ListViewKeyToItemHandler keyToItemHandler)

這兩個方法中各有一個參考是委託型別，分別是 ListViewItemToKeyHandler 和 ListViewKeyToItemHandler，它們的作用是告訴這個類如何處理列表項與 Key 的對應關係，好使得該類可以正確地獲取或設定滾動位置。這裡的 Key 是 ListViewItem 所代表的專案的一個屬性（比如 Demo 中 Item 類的 Id 屬性），這個屬性的值在整個列表中是唯一的；而 Item 是在 Item 物件本身。在 Demo 中它們的實現分別如下：

        private string ItemToKeyHandler(object item)
        {
            Item dataItem = item as Item;
            if (dataItem == null) return null;

            return dataItem.Id.ToString();
        }

        private IAsyncOperation<object> KeyToItemHandler(string key)
        {
            Func<System.Threading.CancellationToken, Task<object>> taskProvider = token =>
            {
                var items = listView.ItemsSource as List<Item>;
                if (items != null)
                {
                    var targetItem = items.FirstOrDefault(m => m.Id == int.Parse(key));
                    return Task.FromResult((object)targetItem);
                }
                else
                {
                    return Task.FromResult((object)null);
                }
            };
            return AsyncInfo.Run(taskProvider);
        }

實現這兩個方法後，過載列表頁的  OnNavigatingFrom 方法，在其中加入以下程式碼，來實現獲取滾動位置並儲存：

           string position = ListViewPersistenceHelper.GetRelativeScrollPosition(this.listView, ItemToKeyHandler);
           NavigationInfoHelper.SetInfo(targetItem, position);

繼續為頁面註冊 Loaded 事件，在 Loaded 事件中加入以下程式碼來實現設定滾動位置：

            if (navigationParameter != null)
            {
                if (NavigationInfoHelper.IsHasInfo)
                {
                    await ListViewPersistenceHelper.SetRelativeScrollPositionAsync(listView, NavigationInfoHelper.LastPosition, KeyToItemHandler);
                }
            }

這裡需要注意的是，設定滾動位置的方法是非同步的，所以 Loaded 方法需要加上 async 修飾符。而上述程式碼中對 navigationParameter 引數的判斷則是為了區別：在導航時是否定位到最近瀏覽的位置，具體可參考 Demo 的程式碼。

二、獲取 ListView 滾動位置處的專案

關於第二個需求的實現，我們首先需要明白以下三點：

1. ListView 的模板 (Template) 中包括 ScrollViewer，我們可以通過 VisualTreeHelper 獲取到此控制元件；
2. ListView 提供 ContainerFromItem 方法，它使們可以通過傳遞 Item 獲取包括此 Item 的 Container，即 ListViewItem；
3. UIElement 提供 TransformToVisual 方法，可以得到某控制元件相對指定控制元件的位置轉換資訊；

所以我們的思路就是：得到 ListView 控制元件中的 ScrollViewer，並遍歷 ListView 中所有的 Item，在遍歷過程中，得到每一專案的 ListViewItem，並判斷它的位置是否位於 ScrollViewer 的位置中。以下是獲取 ListView 中當前所有可見項的程式碼：

        public static List<T> GetAllVisibleItems<T>(this ListViewBase listView)
        {
            var scrollViewer = listView.GetScrollViewer();
            if (scrollViewer == null)
            {
                return null;
            }

            List<T> targetItems = new List<T>();
            foreach (T item in listView.Items)
            {
                var itemContainer = listView.ContainerFromItem(item) as FrameworkElement;
                bool isVisible = IsVisibileToUser(itemContainer, scrollViewer, true);
                if (isVisible)
                {
                    targetItems.Add(item);
                }
            }

            return targetItems;
        }

在上述程式碼的 foreach 迴圈中的部分，正是我們前述思路的體現。而其中所呼叫的 IsVisibleToUser 方法，則是如何判斷某一 ListViewItem 是否在 ScrollViewer 中為當前可見。其程式碼如下：

        /// <summary>
        /// Code from here:
        ///  https://social.msdn.microsoft.com/Forums/en-US/86ccf7a1-5481-4a59-9db2-34ebc760058a/uwphow-to-get-the-first-visible-group-key-in-the-grouped-listview?forum=wpdevelop
        /// </summary>
        /// <param name="element">ListViewItem or element in ListViewItem</param>
        /// <param name="container">ScrollViewer</param>
        /// <param name="isTotallyVisible">If the element is partially visible, then include it. The default value is false</param>
        /// <returns>Get the visibility of the target element</returns>
        private static bool IsVisibileToUser(FrameworkElement element, FrameworkElement container, bool isTotallyVisible = false)
        {
            if (element == null || container == null)
                return false;

            if (element.Visibility != Visibility.Visible)
                return false;

            Rect elementBounds = element.TransformToVisual(container).TransformBounds(new Rect(0.0, 0.0, element.ActualWidth, element.ActualHeight));
            Rect containerBounds = new Rect(0.0, 0.0, container.ActualWidth, container.ActualHeight);

            if (!isTotallyVisible)
            {
                return (elementBounds.Top < containerBounds.Bottom && elementBounds.Bottom > containerBounds.Top);
            }
            else
            {
                return (elementBounds.Bottom < containerBounds.Bottom && elementBounds.Top > containerBounds.Top);
            }
        }

可以看出，我們是能過得到兩個 Rect 值。Rect 型別的值代表一個矩形區域的位置和大小，我們對這兩個值進行比較後，返回最終的結果。
獲取 ListViewItem 的 Rect 值： element.TransformToVisual(container) 返回的結果是 GeneralTransform 型別，這個值表明了 ListViewItem 相對於 Container（即 ScrollViewer）的位置轉換資訊。GeneralTransform 型別可能我們並不太熟悉，不過，從它派生出來的這些類： ScaleTransform、TranslateTransform ，我們就熟悉了，GeneralTransform 正是它們的基類。GeneralTransform 包括以下兩個重要的方法：

1. TransformPoint, 可以將得到的轉換資訊計算成 Point 值，表示某控制元件相對於另一控制元件的座標位置
2. TransformBounds，可以將得到的轉換資訊計算成 Rect 值，表示某控制元件相對於另一控制元件的座標位置及所佔的區域。

所以，我們通過 TransformBounds 方法就得到了 ListViewItem 相對於 ScrollViewer 的位置和所佔區域的資訊。
獲取 ScrollViewer 的 Rect 值： 直接例項化一個 Rect，以 0,0 作為你左上角的座標位置點， ScrollViewer 的 ActualWidth 和 ActualHeight 作為其大小。

接下來，就是比較的過程：這裡，我們做了一個判斷，判斷是否要求元素 (ListViewItem) 完全在 ScrollViewer 中（而非僅部分在其中）。如果要求部分顯示即可，則只要元素的 Top 小於 Container 的 Bottom 值，並且元素的 Bottom 大於 Container 的 Top；如果要求全部顯示，那麼演算法是：元素的 Top 大於 Container 的 Top 並且元素的 Bottom 小於 Container 的 Bottom。如果您對語言描述或者程式碼都還不明白，也可以在紙上畫一下進行比較。

接下來，我們照著 GetAllVisbleItems 方法的思路可以實現 GetFirstVisibleItem 方法，即獲取列表中第一個可見項，程式碼可參考 Demo 的原始碼，在此不再贅述。

我們在之前過載的方法 OnNavigatingFrom 中加上這句程式碼，即可以獲取到使用者瀏覽位置處的那一項。

          var targetItem = this.listView.GetFirstVisibleItem<Item>();

至此，所有主要功能已經基本完成。

結語

本文介紹瞭如何獲取和設定 ListView 的滾動位置，以及獲取滾動位置處的那一項，前者主要是藉助於 ListViewPersistenceHelper 來實現，後者則是通過獲取 ListViewItem 和 ScrollViewer 的 Rect 值並進行比較而最終實現的。如果您有更好的方法、不同的看見，請留言，共同交流。

原始碼下載

參考資料：