相談科にご質問をいただいたのでご紹介します。
相談内容:Spotlight で公開されている、ホワイトボードテンプレートで、キャンバス周りのXAMLをいじってたらペン入力ができなくなってしまいました。何か特殊な実装をしているのでしょうか?
あーわかりました。私も昔はまったことがあります。
不要だから消してしまうと実は...
おそらく、ペン入力をサポートしている、Canvas の背景設定を消してしまったのだと思います。下のソースコードの太字の部分ですね。だって、ソースコードを見ると一見無駄なコードのようにも見えるんですよね。
<Canvas x:Name="InkCanvas" Margin="0"
PointerPressed="InkCanvas_PointerPressed"
PointerMoved="InkCanvas_PointerMoved"
PointerReleased="InkCanvas_PointerReleased"
Visibility="Collapsed">
<Canvas.Background>
<ImageBrush/>
</Canvas.Background>
</Canvas>
実はタッチなどのイベントを Grid や Canvas で受ける場合、「背景が完全にない(≒透明)の場合はイベントが発生しない」のです。ですのでタッチ入力用に完全な透明のパネルを配置してやることができません。
これを回避するには以下のような方法があります。
- 薄くでもいいので色が付いたパネルにする
- 背景に画像などの配置をする状態にする
ポイントは2つ目の画像を配置する「状態にする」というところで、画像が配置されてなくてもよかったりします。つまり、ソースコードのようにImageBrushを配置しておけば画像を流し込まなくてもイベントを受け取れるようになるのです。
なので、この部分をちゃんと消さずに残しておいてくださいね。
Gridで受ければいいんじゃない?
今のテンプレートではGridが下に配置されて背景画像が設定されているので、そちらでイベントを受けることもできます。それでもありですが、今回タッチ入力でのペンの描画をCanvas側にしているので、タッチもCanvasで取っています。
そして、ペン入力の消去を簡単にするためにGridとCanvasを分けて重ねて構成していたりします。
お分かりいただけましたでしょうか?
また開発で悩んだら http://aka.ms/8clinic までご相談ください。