Get Mouse Click relative Position

Today, I was faced with a requirement where I had to respond to the user clicking on a cell in a manually built grid. Gird your loins - the cell itself was a label in a border in a grid in a stack panel in a grid on the page. Because of the way this particular label was displayed, there was white space to the left of the actual text.

My layout produced some unexpected issues. I tried setting the mouse-up handler for the label, and that didn't work for white space in the cell. The same for the border. Finally, I put the handler in the grid for the entire row, and while the white space problem was solved, the mouse up event was fired for anything in the row that wasn'rt already handled by another handler (buttons).

So in my handler, I do this:

private void FMMetric_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    // make sure the event came from a grid element
    if (sender is Grid)
    {
        // get the grid
        Grid element = sender as Grid;
        // get the first child (if possible). It *should* be a border
        if (element.Children != null && 
            element.Children.Count >= 1 && 
            element.Children[0] is Border)
        {
            Border firstChild = element.Children[0] as Border;
            // now see where the user clicked the mouse in relation to the 
            // discovered border
            Point point = e.GetSafePosition(firstChild);
            // if the X value is <= the actual rendered width of the element, 
            // we can process the mouse click and navigate to the appropriate 
            // page.
            if (point.X <= firstChild.ActualWidth)
            {
                // ... put code here ...
            }
        }
    }
}

Of course the example above is specific to my code, but you should be able to see the technique.

You can use this approach to find the mouse position in relation to any given UI element on the page.