如何在 Stack Layout 或 Frame 中添加 Click 事件答案

【问题标题】：How to Add Click event in Stack Layout or Frame如何在 Stack Layout 或 Frame 中添加 Click 事件
【发布时间】：2015-09-05 05:03:29
【问题描述】：

我是 xamarin.forms 的新手，请帮助我了解如何在堆栈布局或框架中添加点击事件

<Frame Grid.Column="0" BackgroundColor="#ffffff" Grid.Row="0" HasShadow="true" OutlineColor = "Black">
</Frame>


<StackLayout Grid.Column="0" BackgroundColor="#313FA0" Grid.Row="0">
</StackLayout>

【问题讨论】：

标签： android ios xaml xamarin xamarin.forms

【解决方案1】：

您可以像这样在 XAML 中将 TapGestureRecognizer 添加到 StackLayout：

<StackLayout Grid.Column="0" Grid.Row="0" BackgroundColor="#313FA0">
    <StackLayout.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnTapped"/>
    </StackLayout.GestureRecognizers>
</StackLayout>

那么就可以在后面的代码中实现OnTapped方法了：

void OnTapped(object sender, EventArgs e) 
{
    // Do stuff
}

或者，如果您使用 MVVM 模式并希望将点击绑定到 ViewModel 中的 ICommand，可以这样实现：

<StackLayout Grid.Column="0" Grid.Row="0" BackgroundColor="#313FA0">
    <StackLayout.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding TapCommand}"/>
    </StackLayout.GestureRecognizers>
</StackLayout>

在您的 ViewModel 中，您将拥有：

private ICommand _tapCommand;
pubic ICommand TapCommand => (_tapCommand ?? _tapCommand = new Command(OnTapped));

void OnTapped() 
{
    // Do stuff
}

Xamarin 网站上有一些非常好的指南：

http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/gestures/#Using_Xaml

https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/gestures/tap/

【讨论】：

如何在自定义渲染中做到这一点

【解决方案2】：

好吧，谢谢@pnavk，根据我所见，请允许我也分享一下，没有的 Views (Layouts,Frame,Images etc)内置的 OnClick 或 Click 事件处理点击事件的方式相同。

如下：

图片：

<Image>
   <Image.GestureRecognizers>
       <TapGestureRecognizer Tapped="onImageCitizenReporterTapped" NumberOfTapsRequired="1" />
   </Image.GestureRecognizers>
</Image>

对于框架：

<Frame>
   <Frame.GestureRecognizers>
       <TapGestureRecognizer Tapped="onFrameCitizenReporterTapped" NumberOfTapsRequired="1" />
   </Frame.GestureRecognizers>
</Frame>

对于 StackLayout：

<StackLayout>
   <StackLayout.GestureRecognizers>
       <TapGestureRecognizer Tapped="onStackCitizenReporterTapped" NumberOfTapsRequired="1" />
   </StackLayout.GestureRecognizers>
</StackLayout >

干杯。

【讨论】：

【解决方案3】：

衷心感谢 Xamarin 认证开发人员 Udara Alvis 的解决方案，这是最好的解决方案，因为它实现了两个目标：精确的图像和文本定位和点击事件，没有点击手势和错误的内容布局按钮很大。

The link to the solution of button with exact text and image positionning

代码示例：

<Grid HorizontalOptions="Fill" IsClippedToBounds="True" VerticalOptions="Center">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

<!--  Button Control  -->
<Button Grid.ColumnSpan="3" BackgroundColor="{StaticResource AppMainColor}" Clicked="GoToLoginPage" CornerRadius="20"/>

<StackLayout InputTransparent="True" Grid.Column="1" Orientation="Horizontal" Spacing="10">

<!--  Text Label  -->
<Label Text="Se déconnecter" FontFamily="Roboto-Regular" FontSize="20" TextColor="White"
HorizontalOptions="Start" HorizontalTextAlignment="Center" VerticalOptions="Center" VerticalTextAlignment="Center" />

<!--  Icon Image  -->
<Image HorizontalOptions="End" Source="log_out.png" VerticalOptions="Center"/>

</StackLayout>

</Grid>

ScreenShot of the button

【讨论】：