UWP: UserControl override GridView item click

Question

I have a UserControl inside of each GridView item. It's like below.

<GridView Name="SymbolItemsGridView"
          Grid.Column="0"
          Background="#333333"
          SelectionMode="None"
          IsItemClickEnabled="True"
          ItemsSource="{x:Bind Items}"
          HorizontalAlignment="Stretch"
          Margin="15,5,10,15"
          ItemClick="SymbolGridView_ItemClick">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="data:SymbolItem">
            <local:SymbolControl Margin="10"/>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

The SymbolControl above is a UserControl, I changed its ContentPresenter style to round

<ContentPresenter CornerRadius="40" 
                  Height="40"
                  Width="40"
                  Background="Cyan" 
                  x:Name="ContentPresenter" 
                  Content="{TemplateBinding Content}" 
                  Padding="0" />

So the only one button inside this UserControl is of round shape.

    <Button Name="SymbolButton" 
            Content="{x:Bind PhoneticSymbolItem.Text}" 
            Style="{StaticResource VowelSymbolButton}" />

My question is that the ItemClick="SymbolGridView_ItemClick" event handler only works when I click the corner of the GridView Item (the black part above). If I click the round button, it doesn't work.

I know it's probably because the button is on top of the GridView item and clicking the button only triggers the button click event. But the media resource I want to set is in ItemsSource="{x:Bind Items}" of the GridView. I don't know how to pass it to my UserControl and used by the button click event.

Or if there's a way to pop up the button click event to GridView item, it should work as well. I hope my question is clear, any ideas?

Answer 1

Try IsHitTestVisible="False" to your round SymbolControl .