张高兴的 Xamarin.Forms 开发笔记:TapGestureRecognizer 的简单介绍与应用

  最近很少写应用了,一直在忙关于 ASP.NET 的东西(哈欠...)。抽点时间对 TapGestureRecognizer 做点总结。

一、简介

  TapGestureRecognizer 就是对 Tap 手势进行识别。 Forms 里的大多数控件都继承自 View 类,而 View 类中有一个公共属性 GestureRecognizers,因此控件都可以添加各种手势识别。当然手势不止 Tap 这一种,更多的可以在 Xamarin 的指南中了解:https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/gestures/

public IList<IGestureRecognizer> GestureRecognizers { get; }

二、用法

  在说用法之前,首先要搞清楚我们需要关注 Tap 的哪些属性。最重要的还是 Tap 的次数。

1. Xaml

<Label Text="0">
    <Label.GestureRecognizers>
        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped" />
    </Label.GestureRecognizers>
</Label>

  直接上代码,这里以 Label 举例,最最基本的用法都在这了,用 NumberOfTapsRequired 设置点击数, Tapped 绑定监听事件。对于 MVVM 涉及的绑定,可以去官方找找。

2. C# 代码

var tapGestureRecognizer = new TapGestureRecognizer();

tapGestureRecognizer.NumberOfTapsRequired = 1;
tapGestureRecognizer.Tapped += (s, e) =>
{
    // TODO
};

YourControl.GestureRecognizers.Add(tapGestureRecognizer);

三、应用

  写了一个小小的 Demo (GitHub:https://github.com/ZhangGaoxing/xamarin-forms-demo/tree/master/GestureRecognizersDemo

1. 超链接

  Forms 里是没有超链接的,有时候就很头疼。我顺便看了一下 Xaml Standard 的第一版草稿,里面还是没有超链接。可以用 TapGestureRecognizer 去仿制一个。这里就以 Label 跳转邮件链接和 Image 跳转网页链接举例。

  Xaml 代码

<Label Text="Hyperlinks" FontSize="20" TextColor="Black" />
<StackLayout Orientation="Horizontal">
    <Label Text="Text : " VerticalTextAlignment="Center" />
    <Label x:Name="Email" Text="zhangyuexin121@live.cn" VerticalTextAlignment="Center" TextColor="DodgerBlue"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
    <Label Text="Image : " VerticalTextAlignment="Center" />
    <Image x:Name="Weibo" Source="weibo.png" HeightRequest="35" WidthRequest="35" VerticalOptions="Center" />
</StackLayout>

  C# 代码

var tapGestureRecognizer = new TapGestureRecognizer();
// 设置触发点击数
tapGestureRecognizer.NumberOfTapsRequired = 1;
tapGestureRecognizer.Tapped += (s, e) =>
{
    if (s is Label)
    {
        Device.OpenUri(new Uri("mailto:zhangyuexin121@live.cn"));
    }
    else if (s is Image)
    {
        Device.OpenUri(new Uri("http://www.weibo.com/279639933"));
    }
};

Email.GestureRecognizers.Add(tapGestureRecognizer);
Weibo.GestureRecognizers.Add(tapGestureRecognizer);

2. 为没有 Clicked 事件的控件添加假的 Clicked 事件

  换句大白话来说,就是点击一个控件触发一个事件。这里以 Label 举例,点击 Label 以“0”和“1”变化。

  Xaml 代码

<Label Text="Fake Click Event" FontSize="20" TextColor="Black" />
<Label Text="0" FontSize="18" FontAttributes="Bold" TextColor="Black">
    <Label.GestureRecognizers>
        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped" />
    </Label.GestureRecognizers>
</Label>

  C# 代码

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
    Label label = sender as Label;

    string val = label.Text;
    switch (val)
    {
        case "0":
            label.Text = "1";
            label.TextColor = Color.FromHex("#2196F3");
            break;
        case "1":
            label.Text = "0";
            label.TextColor = Color.Black;
            break;
        default:
            break;
    }
}

3. 效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

wpf 如何使用 Magick.NET 播放 gif 图片 安装 Magick.NET解析 gif播放 gif

最近在做 gif 播放,发现 gif 播放需要很多内存,于是就使用 Magick.NET 播放,但是这个方式也需要很多的内存。播放一张 uwp 萤火虫 需要 ...

632
来自专栏xx_Cc的学习总结专栏

六天完成一个简单iOS App - 第五天

3016
来自专栏Python小屋

Python+tkinter动态创建与销毁组件小案例

本文代码演示了如何在tkinter窗体上动态创建组件以及销毁组件的方法。 import tkinter import tkinter.messagebox im...

5456
来自专栏分享达人秀

两分钟掌握数值选择器NumberPicker

上一期学习了日期选择器DatePicker和时间选择器TimePicker,是不是感觉非常简单,本期继续来学习数值选择器NumberPicker 。 一...

2006
来自专栏我就是马云飞

随手一写就是一个侧滑关闭activity

实现原因 其实侧滑关闭activity在网上也有大量的文章去介绍他,我也有去看,要么是代码实在太多看不下去,要么就是跑了项目没有反应的。唯一的方法还是自己随手鲁...

2376
来自专栏狂码一生

利用ajaxFileUpload.js实现多文件异步上传功能

  AjaxFileUpload.js是网络开发者写好的插件放出来供大家使用用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。在这里我将网络...

56713
来自专栏Java后端技术

欠的债,这一次都还给你们

  前段时间,写的一篇关于博客园主题皮肤分享的文章,一经发出便受到了极大的热捧,后来很多网友留言说,想要让我分享现在的模板,毕竟现在这个模板已经比之前分享的那个...

1223
来自专栏跟着阿笨一起玩NET

c# 模拟window 操作鼠标|winapi

适合场景:LinkButton如果想要弹出右键菜单的时候,可以在Click事件中通过API模拟鼠标右击事件。

1711
来自专栏林德熙的博客

win10 uwp win2d CanvasVirtualControl CanvasAnimatedControlCanvasVirtualControl其他博客

本文来告诉大家 CanvasVirtualControl ,在什么时候使用这个控件。

1281
来自专栏谦谦君子修罗刀

React-native-scrollable-tab-view详解

前言:他方山上有佳石,可以用来琢玉器。只有解决了一个红屏,才有机会遇见另一个红屏。只有解决了一个困难,才有机会遇到其他的困难。O(∩_∩)O~生命不息,奋斗不止...

88210

扫码关注云+社区