Translating UIElement's position with respect to other UIElement

In this post, we will discuss how we can determine the position of one UIElement with respect to other element.



Let's create a view which has two button. When we click first button, the position of 2nd button (with respect to first element) is displayed in a text block.

<Window x:Class="WPFTranslate_Distance.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="472">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="71*" />
            <RowDefinition Height="56*" />
            <RowDefinition Height="135*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="89*" />
            <ColumnDefinition Width="80*" />
            <ColumnDefinition Width="109*" />
        </Grid.ColumnDefinitions>
        <Button Margin="14,21,14,20" Name="button1" Click="button1_Click">Button 1</Button>
        <Button Grid.Column="2" Grid.Row="2" Margin="22,41,22,59" Name="button2">Button 2</Button>
        <TextBlock Grid.Column="2" Margin="5,24,13,15" Name="textBlock1" />
    </Grid>
</Window>

The click event of button1 is as follows:

private void button1_Click(object sender, RoutedEventArgs e)
{
    Point p = this.button2.TranslatePoint(new Point(0, 0), this.button1);
    this.textBlock1.Text = string.Format("X: {0}, Y: {1}", p.X, p.Y);
}

Here we are calculating the position of Top Left of Button2 with relative to Button1. When we run the application, the view appears as follows:



As we click Button 1, the position of 2nd button with respect to first button is as follows: