第八章：代码和XAML协调一致5

栏目: 编程工具 · 发布时间: 7年前

内容简介：Xamarin.Forms按钮响应手指点击，但您实际上可以从任何派生自View的类中获取手指点击，包括Label，BoxView和Frame。 这些点击事件不会内置到View类中，但View类会定义名为GestureRecognizers的属性。 通过向此GestureRecognizers集合添加对象来启用点击。 可以将从GestureRecognizer派生的任何类的实例添加到此集合中，但毫无疑问最有用的是TapGes？tureRecognizer。以下是在代码中将TapGestureRecogniz

点按手势

Xamarin.Forms按钮响应手指点击，但您实际上可以从任何派生自View的类中获取手指点击，包括Label，BoxView和Frame。 这些点击事件不会内置到View类中，但View类会定义名为GestureRecognizers的属性。 通过向此GestureRecognizers集合添加对象来启用点击。 可以将从GestureRecognizer派生的任何类的实例添加到此集合中，但毫无疑问最有用的是TapGes？tureRecognizer。

以下是在代码中将TapGestureRecognizer添加到BoxView的方法：

点击( 此处 )折叠或打开

  1. BoxView boxView = new BoxView
  2. {
  3.      Color = Color . Blue
  4. } ;
  5. TapGestureRecognizer tapGesture = new TapGestureRecognizer ( ) ;
  6. tapGesture . Tapped + = OnBoxViewTapped ;
  7. boxView . GestureRecognizers . Add ( tapGesture ) ;

TapGestureRecognizer还定义了NumberOfTapsRequired属性，默认值为1.将其设置为2以实现双击。

要生成Tapped事件，View对象必须将其IsEnabled属性设置为true，将其Is？Visible属性设置为true（或者根本不可见），并将其InputTransparent属性设置为false。 这些都是默认条件。

Tapped处理程序看起来就像Button的Clicked处理程序：

点击( 此处 )折叠或打开

  1. void OnBoxViewTapped ( object sender , EventArgs args )
  2. {
  3.      . . .
  4. }

如您所知，事件处理程序的sender参数通常是触发事件的对象，在本例中是TapGestureRecognizer对象。 这没什么用。 相反，Tapped处理程序的sender参数是被轻击的视图，在本例中是BoxView。 那更有用！

与Button类似，TapGestureRecognizer也定义了Command和CommandParameter属性; 这些在实现MVVM设计模式时使用，将在后面的章节中讨论。

TapGestureRecognizer还定义了名为TappedCallback和TappedCallback？参数的属性以及包含TappedCallback参数的构造函数。 这些都已弃用，不应使用。

在XAML中，您可以通过将GestureRecognizers集合表示为属性元素，将TapGestureRecognizer附加到视图：

点击( 此处 )折叠或打开

  1. < BoxView Color = "Blue" >
  2.      < BoxView . GestureRecognizers >
  3.          < TapGestureRecognizer Tapped = "OnBoxViewTapped" / >
  4.      < / BoxView . GestureRecognizers >
  5. < / BoxView >

像往常一样，XAML比同等代码略短。

让我们制作一个受首批独立计算机游戏之一启发的程序。

这个游戏的Xamarin.Forms版本叫做MonkeyTap，因为它是一个仿制游戏。 它包含四个BoxView元素，颜色为红色，蓝色，黄色和绿色。 当游戏开始时，其中一个BoxView元素会闪烁，然后您必须点击该BoxView。 BoxView再次闪烁，然后你必须按顺序点击两个。 然后那两个闪光之后是第三个，依此类推。 （原版也有声音，但是MonkeyTap没有。）这是一场相当残酷的游戏，因为没有办法获胜。 在你输球之前，比赛一直在变得越来越难。

MonkeyTapPage.xaml文件实例化了四个BoxView元素和一个标记为“Begin”的中心的Button。

点击( 此处 )折叠或打开

  1. < ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
  2.              xmlns:x = "http://schemas.microsoft.com/winfx/2009/xaml"
  3.              x:Class = "MonkeyTap.MonkeyTapPage" >
  4.    < ContentPage . Padding >
  5.      < OnPlatform x:TypeArguments = "Thickness" iOS = "0, 20, 0, 0" / >
  6.    < / ContentPage . Padding >
  7.    < StackLayout >
  8.      < BoxView x:Name = "boxview0"
  9.              VerticalOptions = "FillAndExpand" >
  10.        < BoxView . GestureRecognizers >
  11.          < TapGestureRecognizer Tapped = "OnBoxViewTapped" / >
  12.        < / BoxView . GestureRecognizers >
  13.      < / BoxView >
  14.      < BoxView x:Name = "boxview1" VerticalOptions = "FillAndExpand" >
  15.        < BoxView . GestureRecognizers >
  16.          < TapGestureRecognizer Tapped = "OnBoxViewTapped" / >
  17.        < / BoxView . GestureRecognizers >
  18.      < / BoxView >
  19.      < Button x:Name = "startGameButton" Text = "Begin" Font = "Large" HorizontalOptions = "Center" Clicked = "OnStartGameButtonClicked" / >
  20.      < BoxView x:Name = "boxview2" VerticalOptions = "FillAndExpand" >
  21.        < BoxView . GestureRecognizers >
  22.          < TapGestureRecognizer Tapped = "OnBoxViewTapped" / >
  23.        < / BoxView . GestureRecognizers >
  24.      < / BoxView >
  25.      < BoxView x:Name = "boxview3" VerticalOptions = "FillAndExpand" >
  26.        < BoxView . GestureRecognizers >
  27.          < TapGestureRecognizer Tapped = "OnBoxViewTapped" / >
  28.        < / BoxView . GestureRecognizers >
  29.      < / BoxView >
  30.    < / StackLayout >
  31. < / ContentPage >

这里的所有四个BoxView元素都附有一个TapGestureRecognizer，但它们还没有作为？签名颜色。 这是在代码隐藏文件中处理的，因为颜色不会保持不变。 需要更改颜色以获得闪烁效果。

代码隐藏文件以一些常量和变量字段开头。 （你会注意到其中一个被标记为受保护;在下一章中，一个类将从这一个派生出来并且需要访问该字段。某些方法也被定义为受保护。）

点击( 此处 )折叠或打开

  1. public partial class MonkeyTapPage
  2. {
  3.      const int sequenceTime = 750 ; /* in msec */
  4.      protected const int flashDuration = 250 ;
  5.      const double offLuminosity = 0 . 4 ; /* somewhat dimmer */
  6.      const double onLuminosity = 0 . 75 ; /* much brighter */
  7.     BoxView [ ] boxViews ;
  8.      Color [ ] colors = { Color . Red , Color . Blue , Color . Yellow , Color . Green } ;
  9.     List < int > sequence = new List < int > ( ) ;
  10.      int sequenceIndex ;
  11.      bool awaitingTaps ;
  12.      bool gameEnded ;
  14.      Random random = new Random ( ) ;
  15.      public MonkeyTapPage ( )
  16.      {
  17.         InitializeComponent ( ) ;
  18.         boxViews = new BoxView [ ] { boxview0 , boxview1 , boxview2 , boxview3 } ;
  19.         InitializeBoxViewColors ( ) ;
  20.      }
  23.      void InitializeBoxViewColors ( )
  24.      {
  25.          for ( int index = 0 ; index < 4 ; index + + )
  26.             boxViews [ index ] . Color = colors [ index ] . WithLuminosity ( offLuminosity ) ;
  27.      }
  28.     ...
  29. }

构造函数将所有四个BoxView元素放在一个数组中; 这允许它们被一个值为0,1,2和3的简单索引引用.InitializeBoxViewColors方法将所有Box？View元素设置为略微暗淡的非崩溃状态。

该程序现在正在等待用户按下“开始”按钮以启动第一个游戏。 相同的Button处理重放，因此它包含BoxView颜色的冗余初始化。 Button处理程序还准备通过清除序列列表并调用StartSequence来构建闪存的BoxView元素序列：

点击( 此处 )折叠或打开

  1. public partial class MonkeyTapPage
  2. {
  3.      . . .
  4.     protected void OnStartGameButtonClicked ( object sender , EventArgs args )
  5.     {
  6.         gameEnded = false ;
  7.         startGameButton . IsVisible = false ;
  8.         InitializeBoxViewColors ( ) ;
  9.         sequence . Clear ( ) ;
  10.         StartSequence ( ) ;
  11.     }
  14.     void StartSequence ( )
  15.     {
  16.         sequence . Add ( random . Next ( 4 ) ) ;
  17.         sequenceIndex = 0 ;
  18.         Device . StartTimer ( TimeSpan . FromMilliseconds ( sequenceTime ) , OnTimerTick ) ;
  19.     }
  20.      . . .

StartSequence将新的随机整数添加到序列列表，将sequenceIndex初始化为0，并启动计时器。

在正常情况下，为序列列表中的每个索引调用计时器滴答处理程序，并通过调用FlashBoxView使相应的BoxView闪烁。 当序列结束时，计时器处理程序返回false，同时通过设置awaitingTaps指示用户模仿序列的时间：

点击( 此处 )折叠或打开

  1. public partial class MonkeyTapPage
  2. {
  3.     ...
  4.      bool OnTimerTick ( )
  5.      {
  6.          if ( gameEnded )
  7.              return ( false ) ;
  8.         FlashBoxView ( sequence [ sequenceIndex ] ) ;
  9.         sequenceIndex + + ;
  10.         awaitingTaps = sequenceIndex = = sequence . Count ;
  11.         sequenceIndex = awaitingTaps ? 0 : sequenceIndex ;
  12.          return ( ! awaitingTaps ) ;
  13.      }
  16.      protected virtual void FlashBoxView ( int index )
  17.      {
  18.         boxViews [ index ] . Color = colors [ index ] . WithLuminosity ( onLuminosity ) ;
  19.         Device . StartTimer ( TimeSpan . FromMilliseconds ( flashDuration ) , ( ) = >
  20.                     {
  21.                         if ( gameEnded )
  22.                             return ( false ) ;
  23.                        boxViews [ index ] . Color = colors [ index ] . WithLuminosity ( offLuminosity ) ;
  24.                         return ( false ) ;
  25.                     } ) ;
  26.      }
  27.     ...
  28. }

闪光灯的持续时间仅为四分之一秒。 FlashBoxView方法首先设置亮色的亮度并创建一个“一次性”计时器，因为计时器回调方法（此处表示为lambda函数）返回false并在恢复颜色的亮度后关闭计时器。

如果游戏已经结束（仅在用户犯了错误的情况下发生），则BoxView元素的Tapped处理程序忽略点击，如果用户过早地点击而不等待程序通过序列，则结束游戏。 否则，它只是将点击的BoxView与序列中的下一个进行比较，如果正确则闪烁BoxView，否则结束游戏：

点击( 此处 )折叠或打开

  1. public partial class MonkeyTapPage
  2. {
  3.     ...
  4.      protected void OnBoxViewTapped ( object sender , EventArgs args )
  5.      {
  6.          if ( gameEnded )
  7.              return ;
  8.          if ( ! awaitingTaps )
  9.          {
  10.             EndGame ( ) ;
  11.              return ;
  12.          }
  13.         BoxView tappedBoxView = ( BoxView ) sender ;
  14.          int index = Array . IndexOf ( boxViews , tappedBoxView ) ;
  15.          if ( index ! = sequence [ sequenceIndex ] )
  16.          {
  17.             EndGame ( ) ;
  18.              return ;
  19.          }
  20.         FlashBoxView ( index ) ;
  21.         sequenceIndex + + ;
  22.         awaitingTaps = sequenceIndex < sequence . Count ;
  23.          if ( ! awaitingTaps )
  24.             StartSequence ( ) ;
  25.      }
  28.      protected virtual void EndGame ( )
  29.      {
  30.         gameEnded = true ;
  31.          for ( int index = 0 ; index < 4 ; index + + )
  32.             boxViews [ index ] . Color = Color . Gray ;
  33.         startGameButton . Text = "Try again?" ;
  34.         startGameButton . IsVisible = true ;
  35.      }
  36. }

如果用户设法将序列“ape”一直通过，则另一个对StartSequence的调用会向序列列表添加一个新索引并开始播放该新索引。 不过，最终会有一个对EndGame的调用，它会将所有方框颜色为灰色以强调结束，并重新启用Button以便有机会再次尝试。

点击并隐藏Button后的程序：

第八章：代码和XAML协调一致5

我知道我知道。 游戏是没有声音的真正拖累。

让我们借助下一章的机会来解决这个问题。


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
The Mechanics of Web Handling

The Mechanics of Web Handling

David R. Roisum

This unique book covers many aspects of web handling for manufacturing, converting, and printing. The book is applicable to any web including paper, film, foil, nonwovens, and textiles. The Mech......一起来看看 《The Mechanics of Web Handling》 这本书的介绍吧!

码农工具
在线进制转换器
在线进制转换器

各进制数互转换器

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2026 码农网 粤ICP备17054400号-3