あいてぃーとふぼふ

WP7のLoopingSelector(応用編)

前回に引き続き、今回はLoopingSelectorコントロールをデータバインドで使用する方法をご紹介します。

どうやって実現する?

今回の方法では、LoopingSelectorとDataSourceを『Behavior』クラスにより間接的にデータバインドさせます。つまり、両者の間にBehaviorクラスを仲介させることにより、データバインドを橋渡しさせるわけです。この方法であれば、前回作成した『ILoopingSelectorDataSource』実装クラスを再利用できますし、少ない工数で実現することができそうですね!

こんな感じのXAMLになる!

先に、完成形となるXAMLの配置方法を左記に記載します。前回投稿したXMALと比較してもらえるとわかると思いますが、パッと見はほとんど同じように見えますね。大きな違いとしては、前回はDataSourceを直接設定していたのに対し、今回はBehaviorを設定してデータバインドを定義しています。設定されたBehaivorの内部では、バインドされた情報をもとにLoopingSelectorのDataSourceを初期化して、バインドされたプロパティとDataSourceを相互に関連付けます。

Behaviorを実装しよう!

では肝心のビヘイビアを実装しましょう。ソースコードは左記のとおりです。一見するとかなりのコード量に見えますが、前半は依存関係プロパティの定義が占めていますので、実際の処理はそんなに多くありません。重要なポイントは、依存関係プロパティの型がBindingクラスであるという点です。通常はIEnumerable型だったりint型だったりするわけですが、そんなことをしようものならたちまち『XamlParseException』が発生します。ですので、依存関係プロパティをBinding型とすることにより、バインド情報そのものを受け取るようにします。この対処方法は、WP7版のMvvmLightやPrismにおいても採用されていますね。

ただしこのままでは、Bindingクラスから値を取得することができないため、バインドされたプロパティとDataSourceの橋渡しが行えません。そこで活躍するのが、PrismやMvvmLight に含まれている『BindingListener』クラスです。このクラスを利用することにより、バインドされたプロパティの値を取得することができるようになり、晴れて双方向のデータバインドを実現することが可能となります!ヽ(゚´Д`)ノ゚

サンプルコードはこちらから!

LoopingSelectorに関するサンプルコードは以下のリンクからダウンロードすることが可能です。なお実行には『Silverlight for Windows Phone Toolkit』がインストールされている必要がありますのであらかじめご了承ください。
LoopingSelectorSample

さいごに!

ということで、最終的にはだいぶ簡潔にデータバインドを実現することができました。工数などに応じて適材適所だとは思いますが、BehaviorやTriggerActionは、ある程度使いこなせると非常に便利な機能ですね!それにしても、なんか最近イラストばかり描いていたから、久しぶりにシステムエンジニアらしい更新をした気がする…(; ̄ー ̄

WP7のLoopingSelector(基礎編)

WP7には『LoopingSelector』というコントロールが存在するのですが、知らない人も結構多いみたいです。それもそのはず、LoopingSelectorは『Silverlight for Windows Phone Toolkit』に含まれているコントロールであり、かつ『Microsoft.Phone.Controls.Primitives』というマイナーな名前空間に属しています。しかもToolkitのサンプルプログラムにも載っていません。

コントロールの機能としては、一覧が無限にループするアイテムリストのようなものと考えてもらえれば問題ないと思います。DatePickerやTimePickerコントロールでも利用されているため、目にしたことのある人は多いハズ。今回はこれを単体で利用する方法をご紹介します。

ちょっと実装しづらい

このコントロール、実はちょっと実装しづらいです。たとえばListBoxやComboBoxといったコントロールで一覧を設定する場合、ItemsSourceプロパティにIEnumelableコレクションを設定すればOKです。同様に、LoopingSelectorにもDataSourceというプロパティが存在していますが、設定できる型が『ILoopingSelectorDataSource』となっています。このため、IEnumelableコレクションを設定すれば利用できるという代物ではありません。しかも、上記のインタフェイスを実装したクラスは標準で用意されていないため、自前で実装しなければなりません。ちょっと面倒ですが仕方ありませんね。

ILoopingSelectorDataSourceを汎用的に実装しよう

ILoopingSelectorDataSourceの実装はそれほど難しくありません。今回は汎用的なコレクションを指定できるように実装してみたいと思います。実装内容は右記画像の通りです。意外と簡単ですね!肝は『GetNext』と『GetPrevious』の2つのメソッドです。GetNextメソッドでは、コレクションの次のオブジェクトを返却するように実装するわけですが、コレクションの末尾に到達した場合は再度先頭のオブジェクトを返却するようにします。こうすることにより、コレクションを無限にループさせているわけですね~。GetPreviousメソッドはGetPrevメソッドの逆回りです。

XAMLに配置しよう

では実際にLoopingSelectorをXAMLに配置してみましょう。左記のような感じになります。LoopingSelectorのDataSourceプロパティに先程実装したクラスを指定し、適当なコレクションを指定します。なお余談ですが、LoopingSelectorのItemSizeプロパティを指定し忘れると何も表示されないのでごっそい焦ります。う~ん…でもこうなってくるとItemsSourceやSelectedItemにデータバインドができればいろいろと便利そうですよね~。よし、やってみましょう!(≧∀≦)/

データバインドで利用しよう

できません(´・ω・`)!なぜなら上記クラスはFrameworkElementの派生クラスではないので、データバインドのソースとして親のDataContextを利用することができません。となると、先程作成したクラスにFrameworkElementを継承させればよいのでは?と思いますが、そう簡単な話でもありません。しかもWP7では、Silverlight3の制約に輪をかけて制限が厳しいで、何かするとすぐさま『XamlParseException:AG_E_PARSER_BAD_PROPERTY_VALUE』エラーが発生します。にんともかんとも。

データバインドで利用したい!

それでも、どうしてもデータバインドで利用したい(>ω<、)!という人は、BehaviorとBindingListenerによる実装方法を次回の投稿でご紹介します。サンプルプログラムもその際に公開しますね!

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(ソフトウェア開発環境展)に行ってきます~( ´∀`)

WP7のスプラッシュスクリーン

スプラッシュスクリーンとは、アプリケーションを起動した時に初期化が完了するまで表示される画面のことです。Now Loading…的なアレですね。

WindowsPhone7のSilverlightアプリでは、スプラッシュスクリーンとして『SplashScreenImage.jpg』が表示される仕様になっています。しかしこれは逆に、上記のJPEG画像以外をスプラッシュスクリーンに指定することができないことを意味します。

通常ならこれでも何ら問題はないのですが、初期化処理に時間がかかるような場合などでは、どうしてもスプラッシュスクリーンをアニメーションさせたくなります。たとえば何秒間も同じ画像がただ表示されているよりも、砂時計が回っていたりしてくれた方がユーザさんは安心できるわけです。ところが、WindowsPhone7アプリでは上記の仕様が存在するため、スプラッシュスクリーンでアニメーションを再生させることはできません。これはションボリものです(´・ω・`)ので、これを解決するための方法として以下のような力技はいかがでしょうか?

プロジェクトの構成

まずプロジェクトを以下のような構成とします。AとBはプロジェクト作成時に生成されますので、新規に追加するのはCとDのユーザコントロールです。Cには初期化中に表示するアニメーションを定義し、 Dには初期化後に操作の起点となるコントロールを配置します。この際、AとCは似た構成にしておくと、アニメーションが違和感なく開始されていい感じになります。

  • A:SplashScreenImage.jpg
  • B:MainPage.xaml
  • C:SplashScreenContent.xaml
  • D:MainContent.xaml

処理の流れ

処理の流れは以下のような感じです。

  1. アプリケーションが起動されるとAが表示され、次いでBが表示されます。
  2. 次に、BのLayoutRootにCを設定して、初期化処理を実施している間アニメーションを再生します。
  3. 初期化処理が完了したら、BのLayoutRootにDを設定して完了です。

注意するべき事柄

『SplashScreenContent.xaml』をページとして作成すればもっとスマートに実現できそうですが、その方法だと『MainPage.xaml』で戻るボタンが押下された際に、再度スプラッシュスクリーンが表示されてしまいます(通常はアプリケーションが終了しなければいけません)。あと『MainContent.xaml』にPanoramaコントロールを利用する場合、LayoutRootに設定する直前にインスタンスを生成する必要があります。これはPanoramaコントロールに設定されている既定のトランジション(画面遷移効果)がインスタンスの生成時に開始されるためです。

サンプルプログラム

…なんか文章で書いてもあまり伝わらないので、よろしければサンプルプログラムもご覧ください(; ̄ー ̄
SplashScreenSample

将来的には?

現在のバージョンでは『SplashScreenImage.jpg』以外をスプラッシュスクリーンに指定することはできませんが、ビルドアクションには既に『SplashScreen』が定義されています(WPFなどの名残かもですが…)。なので将来的にはPageや他のメディアなどをSplashScreenに指定することができるようになるとうれしいですね~!(≧ω≦)