UWP how to interaction with , which canvas.zindex value is lower among two canvas one over another?

Question

I have a Parent Canvas.That Parent Canvas has two child Canvas One over another with same height and width.Fisrt child Canvas has zindex=0,and second child Canvas has zindex=1.The second Child Canvas has many child Image(UIElement).i want,my second canvas must have higher zindex.I have PointerPressed event for first canvas , second canvas and on each Image also.I want,if I Click on image it fire PointerPressed event of the Image and if I click on canvas where the image is not present ,it must fire first canvas pointerPressed event whose zindex is 0.I don't know how to achieve this??

My XAML Code:

<Canvas x:Name="MyCanvas">
    <Canvas x:Name="FirstCanvas" Canvas.ZIndex="0" PointerPressed="FirstCanvas_PointerPressed" Width="1500" Height="700">
        <!--Child Elements-->
    </Canvas>
    <Canvas x:Name="SecondCanvas" Canvas.ZIndex="1" PointerPressed="SecondCanvas_PointerPressed" Width="1500" Height="700">
        <Image x:Name="FistImage" Source="image1.jpg" Width="100" Height="100" PointerPressed="FistImage_PointerPressed" Canvas.Left="0" Canvas.Top="0"></Image>
        <Image x:Name="SecondImageImage" Source="image2.jpg" Width="100" Height="100" PointerPressed="SecondImageImage_PointerPressed" Canvas.Left="200" Canvas.Top="200"></Image>
    </Canvas>
</Canvas>

My C# Code:

    private void FirstCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
    {

    }

    private void SecondCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
    {

    }

    private void FistImage_PointerPressed(object sender, PointerRoutedEventArgs e)
    {

    }

    private void SecondImageImage_PointerPressed(object sender, PointerRoutedEventArgs e)
    {

    }

Hello, Are your two Canvas completely overlapping or separated? Can you provide some code to explain your intentions? — Richard Zhang - MSFT
Sorry I am not very clear about the function you want to achieve. Do you mean that when you click on the picture in the top Canvas, only the PointerPressed event of the picture will be triggered, and will not continue to trigger the PointerPressed event of TopCanvas? — Richard Zhang - MSFT
No. First, the PointerPressed event occurs on the Image, and secondly, FirstCanvas is not the parent element of the Image, and the event will not bubble through the FirstCanvas. — Richard Zhang - MSFT

Richard Zhang - MSFT Richard Zhang - MSFT · Accepted Answer · 2020-05-05T09:30:56

I understand what you mean, here are some explanations:

In the code you provided, the background color of Canvas is transparent. For this transparent container control, the pointer can penetrate. So it will not trigger PointerPressed event.

If you want to make it handle the pointer event, set the same background color as the page like:

<Canvas x:Name="FirstCanvas" Canvas.ZIndex="0" 
        PointerPressed="FirstCanvas_PointerPressed" Width="1500" Height="700"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <!--Child Elements-->
</Canvas>

If there is an element that needs to be displayed under your Canvas, you can give the background color a very low opacity:

<Canvas x:Name="MyCanvas">
    <Canvas.Resources>
        <SolidColorBrush x:Key="LowOpacityBackground" Color="White" Opacity="0.01"/>
    </Canvas.Resources>
    <Canvas ...
            Background="{ThemeResource LowOpacityBackground}">
        <!--Child Elements-->
    </Canvas>
</Canvas>

In short, the background color cannot be completely transparent.

Thanks.

UWP how to interaction with , which canvas.zindex value is lower among two canvas one over another?

1 Answers