Xamarin.Formsでタップ座標を相対的に取得する。


無料で使えるライブラリ等が見当たらなかったので色々探しましたが、<br />
結果的にライブラリを見つけれずXamarinのサンプルを流用することで実現しました。<br />
絶対位置でのタップ座標ではありませんが代用する形で実現しています。同じように困っている方の参考になれば幸いです。</p><p>ちなみに私が実現した機能は下記の図のようにタップしながらアイテムを選択可能なドーナツメニューのようなものでした。<br />
<span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/furugen098/20180105/20180105011637.gif" alt="f:id:furugen098:20180105011637g:plain" title="f:id:furugen098:20180105011637g:plain" class="hatena-fotolife" itemprop="image"></span></p><br />
<p>下記サンプルからポイントを抜粋して記載します。</p><p>Xamarinのサンプルコード<br />
<a href="https://developer.xamarin.com/samples/xamarin-forms/Effects/TouchTrackingEffectDemos/">Touch-Tracking Effect Demos - Xamarin</a></p><p></p>

## 準備   
### .Forms
<div class="section">
    <p>下記のクラスを.Formsプロジェクトにコピーします。<br />
適当にフォルダを切ってまとめて配置するのが楽ですね。<br />
TouchActionEventArgs / TouchActionEventHandler / TouchActionEventHandler / TouchEffect / WhiteKey<br />
<span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/furugen098/20180131/20180131235534.png" alt="f:id:furugen098:20180131235534p:plain" title="f:id:furugen098:20180131235534p:plain" class="hatena-fotolife" itemprop="image"></span><br />
</p>

</div>

### iOS/Android
<div class="section">
    <p>iOS/Androidのプロジェクトには下記赤枠のクラスを配置します。<br />
iOSはTouchEffect.cs　及び　TouchRecognizer<br />
Androidは　TouchEffect.cs　ですね。<br />
<span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/furugen098/20180131/20180131234954.png" alt="f:id:furugen098:20180131234954p:plain" title="f:id:furugen098:20180131234954p:plain" class="hatena-fotolife" itemprop="image"></span><br />
</p>

</div>
</div>

## 利用方法(.Forms)
<p><b>.xaml</b></p>
<div class="section">
<pre class="code lang-xml" data-lang="xml" data-unlink><span class="synIdentifier">&lt;Grid </span><span class="synType">Grid</span><span class="synComment">.</span><span class="synType">Row</span>=<span class="synConstant">&quot;1&quot;</span><span class="synIdentifier"> </span><span class="synType">BackgroundColor</span>=<span class="synConstant">&quot;White&quot;</span><span class="synIdentifier">&gt;</span>
   <span class="synIdentifier">&lt;Grid</span><span class="synComment">.</span><span class="synIdentifier">Effects&gt;</span>
          <span class="synIdentifier">&lt;</span><span class="synSpecial">tt</span><span class="synComment">:</span><span class="synIdentifier">TouchEffect </span><span class="synType">Capture</span>=<span class="synConstant">&quot;True&quot;</span>
<span class="synIdentifier">                      </span><span class="synType">TouchAction</span>=<span class="synConstant">&quot;OnTouchEffectAction&quot;</span><span class="synIdentifier"> /&gt;</span>
     <span class="synIdentifier">&lt;/Grid</span><span class="synComment">.</span><span class="synIdentifier">Effects&gt;</span>
<span class="synIdentifier">&lt;/Grid&gt;</span>
</pre><p><b>.cs</b></p>
<pre class="code lang-cs" data-lang="cs" data-unlink>       <span class="synType">void</span> OnTouchEffectAction(<span class="synType">object</span> sender, TouchActionEventArgs args)
        {
            <span class="synComment">// X座標</span>
            args.Location.X;
            <span class="synComment">// Y座標</span>
            args.Location.Y;

            <span class="synStatement">switch</span> (args.Type)
            {
                <span class="synStatement">case</span> TouchActionType.Pressed:
                   <span class="synComment">// タップを開始した瞬間</span>
                   <span class="synStatement">break</span>;

                <span class="synStatement">case</span> TouchActionType.Moved:
                   <span class="synComment">//タップ中</span>
                   <span class="synStatement">break</span>;

                <span class="synStatement">case</span> TouchActionType.Released:
                    <span class="synComment">// タップが離れたとき</span>
                    <span class="synStatement">break</span>;
            }
       }
</pre><p>私のドーナツメニューに関してはPressedでタッチの基礎座標を取得し、
Movedイベントで相対座標を割り出しメニューのアクティブな座標からアニメーションを発生させています。</p>