如何在 uwp 应用程序中仅单击网格视图项目的一部分?

Question

我在我的uwp应用程序中使用网格视图控件，每个网格视图项都包含一个网格和一个堆栈面板。我想只使网格可单击，而不是在完整的网格视图项上单击。 这是我的网格视图代码

<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>

它创造了这样的东西。

https://i.stack.imgur.com/0UmIx.png

我只想让圆圈可点击，而不是下面的文本。 有什么办法可以做到这一点吗？请指导我。提前谢谢。

Answer 1

如何在 UWP 应用程序中仅单击网格视图项目的一部分？

根据您的要求，可以将 GridViewIsItemClickEnabled属性设置为 false，然后侦听 GridTapped事件，如下所示。

<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)
{
}

Answer 2

试试这个。

<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>