WinRT XAML Cancel Event on Element on Top of Another

Question

I have a square that has a Tapped event handler. Inside the square (on top of) is another button that has a Flyout. When I click the button to open the Flyout, the event is also fired for the square.

How can I make it so the event isn't fired on the square if the Flyout was clicked?

How can I cancel Handled = true a RoutedEvent that happens through a Command?

Here is the XAML

<Grid Margin="0, 0, 50, 50" Width="300">
    <interactivity:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="Tapped">
            <core:InvokeCommandAction Command="{Binding DataContext.MyTapCommand, ElementName=LayoutRoot}" CommandParameter="{Binding}" />
        </core:EventTriggerBehavior>
    </interactivity:Interaction.Behaviors>
    <Image Source="{Binding MyImagePath}" Width="300" />
    <Border Background="#aa000000" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
        <TextBlock Text="{Binding Title}" Margin="5" FontSize="18" TextWrapping="Wrap" />
    </Border>
    <Button VerticalAlignment="Top" HorizontalAlignment="Right">
        <Button.Template>
            <ControlTemplate>
                <Grid>
                    <Canvas Height="50" Width="50">
                        <Polygon Points="0,0 50,0 50,50 0,0" Fill="Gray" />
                        <TextBlock Text="+" FontSize="40" Canvas.Top="-16" Canvas.Left="22" Padding="0" />
                    </Canvas>
                </Grid>
            </ControlTemplate>
        </Button.Template>
        <Button.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Item 1" Command="{Binding DataContext.Item1Command, ElementName=LayoutRoot}" CommandParameter="{Binding}" />
                <MenuFlyoutItem Text="Item 2" Command="{Binding DataContext.Item2Command, ElementName=LayoutRoot}" CommandParameter="{Binding}" />
            </MenuFlyout>
        </Button.Flyout>
    </Button>
</Grid>

So there is an image that is the whole item. You can click the image and a command should fire. There is a button that sits on top of the image. If the button is clicked, I don't want the Tapped event to fire.

Answer 1

I was able to just put a Tapped handler on the button that contains the Flyout and do e.Handled = true. The Flyout still opens but the second event doesn't happen.

Answer 2

i can't reproduce the mentioned issue, anyway i guess your issue can be resolved by the below code snippet,

//Button tapped event

  private void Button_Click_1(object sender, RoutedEventArgs e)
   {
      if ((sender) is Button)
       {
         // your code                    
       }
   }

Therefore when the sender is square it can be omitted.

I hope it helps you. Thanks, Joy Oyiess Rex K