Question

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

{{1}}

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

如何让我的表格单元格可点击？

Answer 1

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

您可以做的是在单元格中放置一些控件（在这种情况下，理想情况下为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>

单击网格 - UWP应用程序

2 个答案: