张高兴的 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 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Matplotlib新手上路(上)

matplotlib是python里用于绘图的专用包,功能十分强大。下面介绍一些最基本的用法: 一、最基本的划线 先来一个简单的示例,代码如下,已经加了注释: ...

27310
来自专栏菩提树下的杨过

[转自blueidea]像table一样布局div Ⅰ

翻译自:Equal height boxes with CSS 原文:http://www.456bereastreet.com/archive/200405...

1867
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(二)JD移动端网页,移动触屏事件

要实现轮播图,必须在首尾添加图片,如果直接在 html 代码直接添加图片的话,由于图片的数量是不固定的,那么每次图片的数量发生改变的话,不仅需要设置 html ...

541
来自专栏Android 技术栈

Android 水波纹效果的探究

水波纹效果从Android5.0就已经出来了,基本的使用相信大家都知道了,这里多谈一些相对深层次的使用:

1062
来自专栏Nian糕的私人厨房

CSS 使用 Flex 布局来制作一个骰子

我在上一篇博文 CSS 布局_2 Flex弹性盒中,对 Flex 弹性盒有着详细的介绍,在这里,我们使用 Flex 弹性盒布局,来实现骰子的布局,一个面可以设置...

744
来自专栏张高兴的博客

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

3367
来自专栏菩提树下的杨过

Silverlight Telerik控件学习:TreeView数据绑定并初始化选中状态、PanelBar的Accordion效果、TabPanel、Frame基本使用

实际开发中控件的数据源肯定是动态绑定的,不可能在xaml里写死item项。既然要绑定,就先来几个实体类: ? 上面是类图,各类的代码如下:  Business...

2558
来自专栏分享达人秀

屏幕宽高不够,滚动视图ScrollView来凑

前面几期学习了ProgressBar系列组件、ViewAnimator系列组件、Picker系列组件和时间日期系列组件,接下来几期继续来学习常见的其他组...

1796
来自专栏一“技”之长

Bootstrap响应式前端框架笔记二——排版标签与类

    Bootstrap中对h标签的字体和字号进行了微调,开发者除了可以直接使用这些标签进行标题的修饰外,还可以使用.h1到.h6类来将其他元素的字体进行修饰...

732
来自专栏我和未来有约会

Blend基础-布局控件

布局 什么是布局? Panels控件(其实就是容器控件) 对内部的子控件提供了自动布局功能 可以在容器控件内继续添加容器控件(一个复杂的界面往往是多种容器控件...

1806

扫码关注云+社区