Question

我是xamarin.forms的新手。请帮我解释如何在Stack Layout或Frame中添加click事件

<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

您可以在XAML中将TapGestureRecognizer添加到StackLayout，如下所示：

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

然后，您可以在后面的代码中实现 OnTapped 方法：

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

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

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

在您的ViewModel中，您将拥有：

ICommand 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 ，根据我所看到的，请允许我也分享一下，这些没有的视图（布局，框架，图像等）内置的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

如何在堆栈布局或框架中添加Click事件

3 个答案: