Xamarin Forms点击GridView图片跳转新XAML页面实现方法

注意：Xamarin.Forms 做跨平台页面跳转无需手动编写原生平台Intent，直接使用Forms内置导航API即可，一套代码支持Android、iOS、UWP全平台

首先先修正你现有代码的两个基础问题：

• 布局逻辑错误：你给Image配置的Grid.Row、Grid.Column属性完全不生效，因为所有Image被嵌套在StackLayout容器内，Grid的附加属性仅在控件直接父级为Grid时生效，当前代码下图片会纵向堆叠，无法实现网格效果。
• 未给图片配置点击交互逻辑，也未初始化导航容器。

具体实现步骤 #

1. 初始化导航容器 #

Xamarin.Forms的页面导航依赖NavigationPage容器，需要在App启动入口将根页面包裹在NavigationPage中，否则导航方法会报错。
打开App.xaml.cs，修改构造函数代码：

public App()
{
    InitializeComponent();
    // 用NavigationPage包裹你的网格页面作为根页面
    MainPage = new NavigationPage(new Views.XamarinRocket2Page());
}

2. 修正XAML布局，添加点击手势 #

调整布局结构，移除无效的StackLayout，让Image直接作为Grid的子元素，同时给每个Image添加点击手势识别器，支持传参。
修正后的完整XAML代码：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:XamarinRocket.ViewModel;assembly=XamarinRocket" 
             x:DataType="local:XamarinRocket2ViewModel"
             x:Class="XamarinRocket.Views.XamarinRocket2Page">
    
    <ContentPage.Resources>
        <Style TargetType="Grid">
            <Setter Property="ColumnSpacing" Value="0" />
            <Setter Property="RowSpacing" Value="0" />
        </Style>
    </ContentPage.Resources>

    <ContentPage.Content>
        <!-- 捏合缩放容器占满整个网格 -->
        <local:PinchToZoomContainer>
            <local:PinchToZoomContainer.Content>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <!-- 第一行第一列图片 -->
                    <Image Source="luciferc.jpg" Grid.Row="0" Grid.Column="0">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Image_Tapped" CommandParameter="luciferc_1"/>
                        </Image.GestureRecognizers>
                    </Image>
                    
                    <!-- 第一行第二列图片 -->
                    <Image Source="luciferc.jpg" Grid.Row="0" Grid.Column="1">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Image_Tapped" CommandParameter="luciferc_2"/>
                        </Image.GestureRecognizers>
                    </Image>
                    
                    <!-- 第一行第三列图片 -->
                    <Image Source="luciferc.jpg" Grid.Row="0" Grid.Column="2">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Image_Tapped" CommandParameter="luciferc_3"/>
                        </Image.GestureRecognizers>
                    </Image>
                    
                    <!-- 第二行第一列图片 -->
                    <Image Source="luciferc.jpg" Grid.Row="1" Grid.Column="0">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Image_Tapped" CommandParameter="luciferc_4"/>
                        </Image.GestureRecognizers>
                    </Image>
                    
                    <!-- 第二行第二列图片 -->
                    <Image Source="luciferc.jpg" Grid.Row="1" Grid.Column="1">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Image_Tapped" CommandParameter="luciferc_5"/>
                        </Image.GestureRecognizers>
                    </Image>
                    
                    <!-- 第二行第三列图片 -->
                    <Image Source="luciferc.jpg" Grid.Row="1" Grid.Column="2">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="Image_Tapped" CommandParameter="luciferc_6"/>
                        </Image.GestureRecognizers>
                    </Image>
                </Grid>
            </local:PinchToZoomContainer.Content>
        </local:PinchToZoomContainer>
    </ContentPage.Content>
</ContentPage>

你可以根据业务需求修改CommandParameter的值，比如传入图片路径、图片ID、对应数据模型，在点击事件中可以直接获取该参数。

3. 编写后台导航逻辑 #

在XamarinRocket2Page.xaml.cs中添加点击事件处理方法，调用Forms内置导航API跳转到目标页面，示例代码如下：

using System;
using System.Collections.Generic;
using Xamarin.Forms;
using XamarinRocket.ViewModel;

namespace XamarinRocket.Views
{
    public partial class XamarinRocket2Page : ContentPage
    {
        public XamarinRocket2Page()
        {
            InitializeComponent();
        }

        private async void Image_Tapped(object sender, EventArgs e)
        {
            // 获取点击时传入的参数
            var tapArgs = (TappedEventArgs)e;
            var imageParam = tapArgs.Parameter?.ToString();
            
            // 跳转到目标页面，将参数传入新页面的构造函数
            // 请将ImageDetailPage替换为你自己要跳转的XAML页面类名
            await Navigation.PushAsync(new ImageDetailPage(imageParam));
        }
    }
}

补充说明 #

• 如果你采用MVVM架构不想编写后台事件，可以将TapGestureRecognizer的Command和CommandParameter绑定到ViewModel中的对应命令，在ViewModel中通过INavigation服务完成导航，逻辑和事件实现一致。
• 如果需要返回上一页，在目标页面调用Navigation.PopAsync()即可。
• 捏合缩放容器PinchToZoomContainer如果需要支持内部图片点击，记得不要把手势事件拦截，常规开源的PinchToZoomContainer实现默认不会拦截点击手势，可以正常触发Tap事件。

内容的提问来源于stack exchange，提问作者Welkengoncalves Charlois