How to make only a part of gridview item clickable in uwp application?

Question

I'm using a grid view control in my uwp application and each grid view item contains a grid and a stackpanel. I want to make only grid to be clickable instead on the complete grid view item. Here is my grid view code

<GridView 
    Grid.Row="1" 
    ItemsSource="{x:Bind ViewData}" 
    ScrollViewer.VerticalScrollBarVisibility="Hidden" 
    Margin="130,40,130,40">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="data:ViewArr">
            <StackPanel  Margin="50,25,50,25" >
                <Grid Height="120" Width="120">
                    <Image 
                    Source="assets/images/icons/check_my_blue.png" 
                    Height="40" 
                    Width="40" 
                    Canvas.ZIndex="99" 
                    Margin="80,0,0,80">
                    </Image>
                    <Canvas>
                        <Ellipse 
                        Height="120" 
                        Width="120" 
                        Fill ="{x:Bind profile_color , FallbackValue='#00000'}" 
                        StrokeThickness="3" 
                        Stroke="Black" >
                        </Ellipse>
                    </Canvas>
                    <TextBlock 
                    Text="{x:Bind profile_name}" 
                    VerticalAlignment="Center" 
                    HorizontalAlignment="Center"
                    FontSize="28"
                    Foreground="White">
                    </TextBlock>
                </Grid>
                <StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                        <TextBlock Text="{x:Bind first_name}" FontSize="16" FontWeight="Bold" ></TextBlock>
                        <TextBlock Text="{x:Bind last_name}" FontSize="16" FontWeight="Bold"></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                        <TextBlock Text="Today - " FontSize="14" FontWeight="Bold" Foreground="Gray" Margin="0,0,5,0"></TextBlock>
                        <TextBlock Text="0" FontSize="14" Foreground="Gray"></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                        <TextBlock Text="Previous Tasks - " FontSize="14" FontWeight="Bold" Foreground="Gray" Margin="0,0,5,0"></TextBlock>
                        <TextBlock Text="0" FontSize="14" Foreground="Gray"></TextBlock>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

And it creates something like this.

https://i.sstatic.net/0UmIx.png

I want to make only circles to be clickable not the text below that. Is there any way to achieve that? Please guide me. Thanks in advance.

Answer 1

Try this.

<GridView
    Grid.Row="1"
    Margin="130,40,130,40"
    IsItemClickEnabled="False"
    ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="50,25,50,25">
                <Button
                    BorderBrush="Transparent"
                    BorderThickness="0"
                    Command="{Binding MyCommandName}"
                    Foreground="Transparent">
                    <Grid Width="120" Height="120">
                        <Image
                            Width="40"
                            Height="40"
                            Margin="80,0,0,80"
                            Canvas.ZIndex="99"
                            Source="assets/images/icons/check_my_blue.png" />
                        <Canvas>
                            <Ellipse
                                Width="120"
                                Height="120"
                                Fill="{x:Bind profile_color, FallbackValue='#00000'}"
                                Stroke="Black"
                                StrokeThickness="3" />
                        </Canvas>
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="28"
                            Foreground="White"
                            Text="{x:Bind profile_name}" />
                    </Grid>
                </Button>
                <StackPanel>
                    <StackPanel
                        Margin="0,10,0,0"
                        HorizontalAlignment="Center"
                        Orientation="Horizontal">
                        <TextBlock
                            FontSize="16"
                            FontWeight="Bold"
                            Text="{x:Bind first_name}" />
                        <TextBlock
                            FontSize="16"
                            FontWeight="Bold"
                            Text="{x:Bind last_name}" />
                    </StackPanel>
                    <StackPanel
                        Margin="0,10,0,0"
                        HorizontalAlignment="Center"
                        Orientation="Horizontal">
                        <TextBlock
                            Margin="0,0,5,0"
                            FontSize="14"
                            FontWeight="Bold"
                            Foreground="Gray"
                            Text="Today - " />
                        <TextBlock
                            FontSize="14"
                            Foreground="Gray"
                            Text="0" />
                    </StackPanel>
                    <StackPanel
                        Margin="0,10,0,0"
                        HorizontalAlignment="Center"
                        Orientation="Horizontal">
                        <TextBlock
                            Margin="0,0,5,0"
                            FontSize="14"
                            FontWeight="Bold"
                            Foreground="Gray"
                            Text="Previous Tasks - " />
                        <TextBlock
                            FontSize="14"
                            Foreground="Gray"
                            Text="0" />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Answer 2

How to make only a part of gridview item clickable in uwp application?

For your requirement, you could set GridView IsItemClickEnabled property as false then listen Grid Tapped event like following.

<GridView IsItemClickEnabled="False" >
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Grid Tapped="Grid_Tapped"
                    Width="30"
                    Height="30"
                    VerticalAlignment="Center"
                    Background="Red"
                    CornerRadius="15"
                    />
                <StackPanel VerticalAlignment="Center" Orientation="Vertical">
                    <TextBlock VerticalAlignment="Center" Text="NicoName" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

private void Grid_Tapped(object sender, TappedRoutedEventArgs e)
{

}