ホーム > Expression Blend > Windows Phone 7 のはてなフォトライフビューワを作る

Windows Phone 7 のはてなフォトライフビューワを作る (前編)

伊勢 シン@スマートフォン勉強会[著], わにちゃん@ExpressionTech.jp[編集]

Expression Blendに移り、デザインを作る

プロジェクト右クリックから、Open in Expression Blend... を選ぶと、Expression Blend が起動してきます。
f:id:iseebi:20110307034030p:image

Blendの初期画面はこんな感じです。
f:id:iseebi:20110307034031p:image

では、まずPivotに表示させる項目を考えます。はてなフォトライフから写真を取得できる代表的なRSSは以下の3つです。

  • 最新の写真
    https://f.hatena.ne.jp/userlist?mode=rss
  • 人気の写真
    https://f.hatena.ne.jp/hotfoto?mode=rss
  • ユーザーの写真
    https://f.hatena.ne.jp/iseebi/rss?mode=rss

このうち、僕のWP7 UI研究結果によると「新しいもの、ユーザーが見たいと思うものが左にあるべき」なのでPivotの項目は左からnew hot id:iseebi とすることにします。(id:iseebi のところは自分のIDで読み替えてください)

初期状態のPivotのページは2つしかありません。1こ増やしましょう。デザイナ上から選ぶこともできますが、「オブジェクトとタイムライン」のウィンドウから選ぶ方が確実です。Pivot を右クリックして Add PitotItem を選択します。

f:id:iseebi:20110307034032p:image

いっこ増えました

f:id:iseebi:20110307034033p:image

グリッドしかないので、リストがほしくなります。デフォルトであったPivotItemからコピペしてきましょう。

  1. 新しく追加したPivotItemにあるGridを選択して、右クリック→削除
  2. 2つめのPivotItemにあるSecondListBoxを選択して、右クリック→コピー
  3. 新しく追加したPivotItemを選択して、右クリック→貼り付け

こんな感じになります。

f:id:iseebi:20110307034034p:image

次に、Pivotのタイトルを変更していきます。「オブジェクトとタイムライン」から1つめのPivotItemを選びます。「プロパティ」のウィンドウの「共通プロパティ」というところに「Header」というのがあります。ここを「new」と書き換えます。

f:id:iseebi:20110307034035p:image

同じように、2つめを hot、3つめを id:iseebi に書き換えます。

そして、リストボックスの名前を変えましょう。「オブジェクトとタイムライン」からFirstListBoxを選択、右クリックから名前変更を選択してnewPhotoListBoxに変更します。同様にSecondListBoxをhotPhotoListBox、SecondListBox_CopyをuserPhotoListBoxにします。

f:id:iseebi:20110307034036p:image

INDEX

コメント

▲このページのトップへ