how to bubble pointer event to child overlapping each other in same parent

Question

I have a situation where I have several images overlapping each other and on the pointer pressed I want to test if the clicked point is clicked on the transparent part of the image I want it to let go of the event and let the image below it test it out and repeat but it's passing the pointer event directly to the parent and remaining image is not being tested

<Grid Background="Red"
      Width="200"
      Height="200"
      x:Name="grdRed"
      PointerPressed="grdRed_PointerPressed"
      VerticalAlignment="Center"
      HorizontalAlignment="Center">
    <Grid Background="Blue"
          Width="150"
          Height="150"
          x:Name="grdBlue"
          PointerPressed="grdBlue_PointerPressed"/>
    <Grid Background="Green"
          Width="100"
          Height="100"
          x:Name="grdGreen"
          PointerPressed="grdGreen_PointerPressed"/>
</Grid>



private void grdRed_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Debug.WriteLine("Red Pressed ");
    e.Handled = false;
}

private void grdBlue_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Debug.WriteLine("Blue Pressed ");
    e.Handled = false;
}

private void grdGreen_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Debug.WriteLine("Green Pressed ");
    e.Handled = false;
}

now when I click the green Color Grid

output is

Green Pressed 
Red Pressed 

what I want is

Green Pressed 
Blue Pressed
Red Pressed 

but I want it to go through the blue grid since the blue grid is below the green one,

I'll set the e.Handled as per the calculation if the clicked part is transparent I'll set it to false else true then it should go to blue grid I'll test it again and so on

So the question is how can I make the event get passed through the blue grid currently it moving from child to parent directly

thanks