在前端 UI 開發中，有時，我們會遇到這樣的需求：在一個 ScrollViewer 中有很多內容，而我們需要實現在執行某個操作後能夠定位到其中指定的控制元件處；這很像在 HTML 頁面中點選一個連結後定位到當前網頁上的某個 anchor。

要實現它，首先我們需要看 ScrollViewer 為我們提供的 API，其中並沒有類似於 ScrollToControl 這樣的方法；在它的幾個以 ScrollTo 開頭的方法中，最合適的就是 ScrollToVerticalOffset 這個方法了，這個方法接受一個引數，即縱向的偏移位置。那麼，很重要的問題：我們怎麼能得到要定位的那個控制元件在 ScrollViewer 中的位置呢？

在我之前寫的這篇文章中：XAML: 獲取元素的位置，有如何獲到元素相對位置的介紹，建議大家先了解一下，其中使用了 Visual.TransformToVisual 方法等。當你理解了這篇文章後，再回過頭來看本文後面的內容，就很容易了。

接下來，我們使用以下程式碼，即可實現上述需求：

           // 獲取要定位之前 ScrollViewer 目前的滾動位置
            var currentScrollPosition = ScrollViewer.VerticalOffset;
            var point = new Point(0, currentScrollPosition);

            
 
// 計算出目標位置並滾動
            var targetPosition = TargetControl.TransformToVisual(ScrollViewer).Transform(point);
            ScrollViewer.ScrollToVerticalOffset(targetPosition.Y);

另外，由於通常情況下，我們會採用 MVVM 模式，因此我們可以將上述程式碼封裝成一個 Action，而避免在 Code-Behind 程式碼檔案中新增上述程式碼。

新建立的名為 ScrollToControlAction 的 Action，在其中定義兩個依賴屬性 ScrollViewer 和 TargetControl，分別表示指定的要操作的 ScrollViewer 和要定位到的控制元件，然後將上述程式碼放到其 Invoke 方法中即可。由於 Action 並非本文主題，所以這裡並不會展開太多的講解，可以參考以下程式碼或本文後提供的 Demo 作進一步瞭解。

namespace ScrollTest
{
    /// <summary>
    /// 在 ScrollViewer 中定位到指定的控制元件
    /// 說明：目前支援的是垂直滾動
    /// </summary>
    public class ScrollToControlAction : TriggerAction<FrameworkElement>
    {
        public static readonly DependencyProperty ScrollViewerProperty =
            DependencyProperty.Register("ScrollViewer", typeof(ScrollViewer), typeof(ScrollToControlAction), new PropertyMetadata(null));

        public static readonly DependencyProperty TargetControlProperty =
            DependencyProperty.Register("TargetControl", typeof(FrameworkElement), typeof(ScrollToControlAction), new PropertyMetadata(null));

        /// <summary>
        /// 目標 ScrollViewer
        /// </summary>
        public ScrollViewer ScrollViewer
        {
            get { return (ScrollViewer)GetValue(ScrollViewerProperty); }
            set { SetValue(ScrollViewerProperty, value); }
        }

        /// <summary>
        /// 要定位的到的控制元件
        /// </summary>
        public FrameworkElement TargetControl
        {
            get { return (FrameworkElement)GetValue(TargetControlProperty); }
            set { SetValue(TargetControlProperty, value); }
        }

        protected override void Invoke(object parameter)
        {
            if (TargetControl == null || ScrollViewer == null)
            {
                throw new ArgumentNullException($"{ScrollViewer} or {TargetControl} cannot be null");
            }

            // 檢查指定的控制元件是否在指定的 ScrollViewer 中
            // TODO: 這裡只是指定離它最近的 ScrollViewer，並沒有繼續向上找
            var container = TargetControl.FindParent<ScrollViewer>();
            if (container == null || container != ScrollViewer)
            {
                throw new Exception("The TargetControl is not in the target ScrollViewer");
            }

            // 獲取要定位之前 ScrollViewer 目前的滾動位置
            var currentScrollPosition = ScrollViewer.VerticalOffset;
            var point = new Point(0, currentScrollPosition);

            // 計算出目標位置並滾動
            var targetPosition = TargetControl.TransformToVisual(ScrollViewer).Transform(point);
            ScrollViewer.ScrollToVerticalOffset(targetPosition.Y);
        }
    }
}

其使用方法如下：

<Button>
    <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <local:ScrollToControlAction ScrollViewer="{Binding ElementName=s}" TargetControl="{Binding ElementName=txtSectionC}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
</Button>