読者です 読者をやめる 読者になる 読者になる

さわっても熱くない花火

ちょっとした驚きを食べながら生きています

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をぺしぺしする作業
        //メインのメソッドで実行されるので、コントロールをぺしぺししてもおk
    })
    .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
    {
        //右方向へのフリック
    }
}

という訳で完成

f:id:yanoshi:20120325021605p:plain
f:id:yanoshi:20120325021613p:plain
動いているから多分完成だと思う
手抜きだけどまぁいいやー
今度はこれを公開できるのか試してみよう。

*1:OAuthが面倒だから(ぁ