WPF 使用 TranslatePoint 換算元素之間相對坐标

在 WPF 中的布局模型裡面，可以将每個元素都認為是矩形。而每個矩形都可以将自己的左上角作為原點建立坐标，不同的矩形之間的坐标原點不相同，當這些用矩形表達的元素進行系列的旋轉和平移等之後，如何将以某個元素的矩形左上角為原點的坐标換算為另一個元素的矩形左上角為原點的坐标

隻要在相同的視覺樹上面，所有的元素的矩形範圍都能通過矩陣計算換算出來，在 WPF 和 UWP 裡面都在每個元素提供了 TranslatePoint 方法，這個方法的作用就是用目前元素的左上角為原點的坐标換算為這個點在傳入的元素的坐标，或者說将傳入的點相對于視覺樹最頂層的坐标不變的前提下，計算出如果放在傳入元素裡面應該的坐标是多少

如我有一個 Canvas 和 Canvas 裡面有一個矩形，我對矩形做了一些複雜的變換，包括設定他的 Margin 和 Canvas.Left 的值，我想要了解這個矩形相對于Canvas的坐标在哪？其實這個問題可以轉換為求在矩形坐标中，點(0,0)在 Canvas 上的值是多少

因為求一個元素相對于另一個的元素的坐标，也就是求元素左上角所在另一個元素的坐标，而一個元素的左上角就是通過以元素的左上角為原點的坐标也就是點 (0,0) 在螢幕坐标不變前提下，以另一個元素的左上角為原點的坐标點在哪

<Canvas x:Name="Canvas">
            <Rectangle x:Name="Rectangle" Margin="10,10,10,10" Width="100" Height="100"
                       Canvas.Left="-5" Fill="Black"></Rectangle>
        </Canvas>           

複制

可以通過在 Rectangle 的 TranslatePoint 方法裡面傳入點 (0,0) 和需要換算的對應的另一個元素 Canvas 對象，就能傳回傳入的點在畫布中的坐标

private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            var point = Rectangle.TranslatePoint(new Point(), Canvas);
            Debug.WriteLine(point);
        }           

複制

在元素的TranslatePoint方法裡面，第一個參數傳入的點是相對于目前元素的左上角為原點的坐标，而第二個值就是将要轉換坐标的元素。計算方法就是将傳入的點換算為傳入的轉換坐标的元素的左上角原點的坐标

計算原理是什麼？其實小夥伴可以嘗試畫兩個矩形，在其中一個矩形裡面點一個點，然後求這個點在使用另一個矩形的左上角作為原點時的坐标，這是一道特别簡單的國中數學

本文代碼放在github歡迎小夥伴通路