あいてぃーとふぼふ

WP7のPivotの中のScrollViewer

今日は凄くニッチなお話です。Pivotコントロールの中にScrollViewerを配置して、横長のコンテンツを水平スクロールできるようにしようとしたのですが、これが一筋縄ではいきませんでした。

上記の構成において、ScrollViewer上で水平フリックを行うと、親のPivotにも水平フリックが伝達されてしまいます。このため、結果としてPivotが意図せず遷移してしまうのです。これは困りましたね~(;´∀`)

…え?そんなことする状況なんてめったにないからどうでもいい?とんでもない!(゚Д゚#)たとえば、上記の画像の右端にはまだ続きがあるのですが、水平スクロールさえできればパンツ続きが見れるとしましょう!こんな状態で勝手にPivotが遷移しようものなら、ユーザビリティの低下なんて生易しいものじゃありません。営業妨害です!ここでいうところのユーザビリティがどんなものであるかは敢えて触れませんが、これは死活問題なのです!(`Д´)

でも解決方法は意外と簡単で、ScrollViewerのManipulationCompletedイベントを利用して、水平スクロールが完了するまでPivotにイベントが伝達されないようにすればOKです。ソースコードはこんな感じですね。

private void ScrollViewer_ManipulationCompleted(
object sender, ManipulationCompletedEventArgs e)
{
var scrollViewer = sender as ScrollViewer;
e.Handled = e.TotalManipulation.Translation.X > 0 ?
scrollViewer.HorizontalOffset > 0 :
scrollViewer.HorizontalOffset + scrollViewer.ViewportWidth < scrollViewer.ExtentWidth;
}

この程度ならビヘイビアにしなくてもよさそうですが、せっかくなのでサンプルコードはビヘイビアとして作成してみました。詳細な実装方法が知りたい方や、画像の右端が気になるという方は、以下のサンプルコードをどうぞ。
ScrollViewerOnPivotSample

今日は3年ぶりにSODEC(ソフトウェア開発環境展)に行ってきます~( ´∀`)