单击网格- UWP应用程序

Question

我正在开发一个新的UWP应用程序，我有一个网格：

<Grid.ColumnDefinitions>
       <ColumnDefinition Width="*" />
       <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
       <RowDefinition Height="*" />
       <RowDefinition Height="*" />
</Grid.RowDefinitions>

我的表有2行和2列。在每一行和每一列中，我都有一个图像和一些文本块。我希望在每个单元格中单击时(例如，当单击网格的第0行和第0列时)转到XAML页面。

如何使表格单元格可单击？

Answer 1

网格本身只是一个布局控件，它本身不会告诉你哪个单元格被点击了，你只能知道它的区域被点击了。

您可以做的是在单元格中放置一些控件(在本例中，理想情况下是一个Button)，并设置这些控件的Click或Tapped：

<Grid>
   <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Button Grid.Column="0" Grid.Row="0"
                   Click="FirstCellClicked" />
    ...
 </Grid>

如果您想要更微妙的东西，可以使用Rectangle而不是Button，将其Fill设置为Transparent (以便它捕获用户输入)，然后使用它的Tapped事件来处理单击。

<Grid>
   <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
           <RowDefinition Height="*" />
           <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Transparent" Grid.Column="0" Grid.Row="0"
                   Tapped="FirstCellTapped" />
    ...
 </Grid>

Answer 2

在网格的每个单元格中放置一个按钮，并将该按钮的内容设置为图像。使用该按钮，您可以使用click事件导航到另一个xaml页面。

<UserControl.Resources>
     <Image x:Key="MyImage" Source.../>
</UserControl.Resources>

<Button Content="{StaticResource MyImage}" />

使用一个文本块，你可以做这样的事情。

<Button>
  <StackPanel>
    <TextBlock>My text here</TextBlock>
    <Image Source="some.jpg" Stretch="None" />
  </StackPanel>
</Button>