.NET MAUI中如何为HorizontalStackLayout等元素添加Clicked事件

方法1：通过GestureRecognizers添加点击手势 #

这是MAUI中最通用的方案，所有可视化元素都支持添加手势识别器，直接给目标元素嵌套TapGestureRecognizer并绑定Tapped事件即可。

以你的HorizontalStackLayout为例，修改后代码如下：

<ContentPage ...>
    <ScrollView>
        <VerticalStackLayout>
            <HorizontalStackLayout>
                <!-- 给StackLayout添加点击手势 -->
                <HorizontalStackLayout.GestureRecognizers>
                    <TapGestureRecognizer Tapped="OnStackLayoutTapped" />
                </HorizontalStackLayout.GestureRecognizers>
                
                <Image Source="assets/profil/EnzoDeg40.png" />
                <VerticalStackLayout>
                    <Label Text="EnzoDeg40"/>
                    <Label Text="On mange des frites ce soir ?"/>
                </VerticalStackLayout>
            </HorizontalStackLayout>
            ...
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

接着在后台代码中实现事件处理逻辑：

private void OnStackLayoutTapped(object sender, EventArgs e)
{
    // 这里编写点击后的业务逻辑，比如弹窗提示、页面导航等
    Console.WriteLine("StackLayout被点击了");
}

如果要给单个Label或Image添加点击，逻辑完全一致：

<Label Text="EnzoDeg40">
    <Label.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnLabelTapped" />
    </Label.GestureRecognizers>
</Label>

方法2：用透明Button包裹元素 #

如果希望整个区域具备按钮的点击特性，还可以用透明样式的Button包裹目标元素，既能保留原有布局，又能直接复用Button的Clicked事件。

示例代码：

<Button BackgroundColor="Transparent" BorderWidth="0" Clicked="OnContainerClicked">
    <Button.Content>
        <HorizontalStackLayout>
            <Image Source="assets/profil/EnzoDeg40.png" />
            <VerticalStackLayout>
                <Label Text="EnzoDeg40"/>
                <Label Text="On mange des frites ce soir ?"/>
            </VerticalStackLayout>
        </HorizontalStackLayout>
    </Button.Content>
</Button>

这种方式无需额外添加手势，还能自动支持点击按压反馈（可根据需求自定义样式）。

方法3：MVVM模式下绑定命令 #

如果采用MVVM架构开发，推荐使用命令绑定来避免后台代码耦合：

<HorizontalStackLayout>
    <HorizontalStackLayout.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding StackLayoutTapCommand}" />
    </HorizontalStackLayout.GestureRecognizers>
    <!-- 子元素内容 -->
</HorizontalStackLayout>

在ViewModel中定义对应命令：

public ICommand StackLayoutTapCommand { get; }

public YourViewModel()
{
    StackLayoutTapCommand = new Command(ExecuteStackLayoutTap);
}

private void ExecuteStackLayoutTap()
{
    // 执行点击后的业务逻辑
}

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