Windows Phoneの開発をしてみる～何か物を作ってみる編～

前回：Windows Phoneの開発をしてみる～環境導入編～ - さわっても熱くない花火

前回はとりあえず環境を入れてサンプルを作ってみましたけど、今回は何かものを作ってみます。
もっと早く作り始めたかったのに、忙しかったからなぁ

作るもの

TumblrPhotoViewer（どやぁ

コンセプト

LikeとかReblogとかは考えない*1
ユーザーIDを入力させて、そのユーザーのPostを閲覧するだけ
画像しか読ませない
TumblrAPIはバージョン1を利用する
ページ遷移とかは適当なアニメーションを使う
- 面倒なのでthis.NavigationService.Navigateメソッドでページ遷移を実現
Expression Blendはよくわからないので、今回は使わない

ほら！そこの君！手抜きとか言わないっ

メモ

開発中に詰まった事を適当にメモっとく…

画面遷移のアニメーション実装方法

Silverlight fot Windows Phone 7 Toolkitがめっちゃ便利 - tmytのらくがき
 TransitionServiceを使って画面遷移時にアニメーションを行う – CH3COOH(酢酸)の実験室

本当はExpression Blendを使った方が良いのかな？まぁいいや

Silverlight fot Windows Phone 7 Toolkitを下のURLからダウンロードする。

Silverlight Toolkit - Download: Windows Phone Toolkit - Nov 2011 (7.1 SDK)

次にMicrosoft.Phone.Controls.Toolkitへの参照を追加。
あとは上のURLに書いてあるようにうにうにする。

簡単にメトロUI特有の「パタパタ」した感じの画面遷移が実装できるんですねー！

画面遷移後にURLのクエリ文字を受け取る

WindowsPhoneで画面遷移 - がりらぼWP7 ~WindowsPhoneプログラミング情報発信ラボ~

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    IDictionary<string, string> param = NavigationContext.QueryString;
    //ここでクエリ文字をmogmogする
    //param["クエリ名"]で参照
    base.OnNavigatedTo(e);
}

XDocument.Loadの問題を解決する

Windows Phone 7 のはてなフォトライフビューワを作る (前編) - backyard of 伊勢的新常識

Windows PhoneなXDocument.Loadはどうやら相対URIにしか対応してないらしいです。
なので、上のページに書いてあるようにMicrosoft.Phone.Reactiveを使って見ることにします。

WebClient webC = new WebClient();

Observable.FromEvent<DownloadStringCompletedEventArgs>(webC, "DownloadStringCompleted")
    .Select(doc => XDocument.Load(new StringReader(doc.EventArgs.Result)))
    .ObserveOnDispatcher()
    .Do(doc =>
    {
        var postsElements = doc.Element("tumblr").Element("posts");
        //以下XMLをぺしぺしする作業
        //メインのメソッドで実行されるので、コントロールをぺしぺししてもおｋ
    })
    .Subscribe();

string apiUrl =
    string.Format(@"http://{0}.tumblr.com/api/read?start={1}&num=1", userId, nowPageNum);


webC.DownloadStringAsync(new Uri(apiUrl));

ちなみに通信系のエラー処理対策のために、doc => XDocument.Load(new StringReader(doc.EventArgs.Result)…に例外処理を入れたほうがいいかもしれません。

Imageコントロールで縦横比を維持して最大表示

StretchプロパティをUniformにすればいいらしい。

フリックなイベントを得る

MSDN マガジン: UI 最前線 - Windows Phone でのタッチジェスチャ

Microsoft.Phone.Controls.Toolkitを参照しておく必要があるみたいです。

で、次のような感じにxamlを書くとうまくいくらしいです

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
    <Image Name="imageBox" Stretch="Fill" />

    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener 
          Flick="GestureListener_Flick" />
    </toolkit:GestureService.GestureListener>
</Grid>

例ではImageコントロール上でフリックされたらイベントが発生します（多分

コードでは次みたいに使えばいいらしいです。

private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
{
    if (e.HorizontalVelocity < 0)
    {
        //左方向へのフリック
    }
    else
    {
        //右方向へのフリック
    }
}