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

Question

我是 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>

Answer 1

您可以像这样将 TapGestureRecognizer 添加到 XAML 中的 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/

Answer 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 >

干杯。

Answer 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

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

How to Add Click event in Stack Layout or Frame

xaml

android

ios

xamarin

xamarin.forms