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

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

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

詳細画面を作ってページ遷移させる

さて、リストで項目が選ばれたときに、大きな写真を表示できるようにしたいと思います。

プロジェクトを右クリック→Add→Add Item... です。今度はWindows Phone Portrait Page を選びます。ImagePage.xaml としてください。

f:id:iseebi:20110307034047p:image

画面のデザインから入りますが、ちょっとしたことなのでBlendを使うまでもありません。ImagePage.xamlの編集画面が開いていると思いますので、Visual StudioのToolboxからImageをドラッグします。

f:id:iseebi:20110307034048p:image

グリッドいっぱいに広げます。

f:id:iseebi:20110307034049p:image

image1になっていると思いますので、プロパティウィンドウでimageに名前を変えます。

f:id:iseebi:20110307034050p:image

デザインができたので、ImagePage.xaml.cs を開き、以下のプログラムを書きます。

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    if (NavigationContext.QueryString.ContainsKey("image"))
    {
        image.Source = new BitmapImage(new Uri(NavigationContext.QueryString["image"]));
    }
}

OnNavigatedTo は別の画面から遷移してくる際に呼ばれるメソッドで、引数が渡されている場合はNavigationContext.QueryStringから取得できるようになっています。今回は、imageパラメータで表示させる画像のURLを指定することにしました。

次に、呼び出し側です。MainPage.xaml.cs を開き、コンストラクタに以下のように入力します。

newPhotoListBox.SelectionChanged +=

すると、以下のようになります。

f:id:iseebi:20110307034051p:image

この状態でタブを2回押し込むと、Visual Studioがイベントハンドラを自動的に作成してくれます。便利!こんな感じになります

// Constructor
public MainPage()
{
    InitializeComponent();

    // Set the data context of the listbox control to the sample data
    DataContext = App.ViewModel;
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);

    // 画像の読み込み
    LoadImageListBox("https://f.hatena.ne.jp/userlist?mode=rss", newPhotoListBox);
    LoadImageListBox("https://f.hatena.ne.jp/hotfoto?mode=rss", hotPhotoListBox);
    LoadImageListBox("https://f.hatena.ne.jp/iseebi/rss?mode=rss", userPhotoListBox);

    newPhotoListBox.SelectionChanged += new SelectionChangedEventHandler(newPhotoListBox_SelectionChanged);
}

void newPhotoListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    throw new NotImplementedException();
}

ただ、今回は3つともこのイベントハンドラを使うようにするのに名前が不適当です。作成されたイベントハンドラの名前をphotoListBox_SelectionChangedへ変えましょう。すると、Visual Studioはこのようなスマートタグを出してきます。

f:id:iseebi:20110307034052p:image

これを押すと元々のところも書き換えてくれます。かしこい!あとは、他の2つのリストにも同じハンドラを指定し、以下のようにプログラムを記述します。

// Constructor
public MainPage()
{
    InitializeComponent();

    // Set the data context of the listbox control to the sample data
    DataContext = App.ViewModel;
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);

    // 画像の読み込み
    LoadImageListBox("https://f.hatena.ne.jp/userlist?mode=rss", newPhotoListBox);
    LoadImageListBox("https://f.hatena.ne.jp/hotfoto?mode=rss", hotPhotoListBox);
    LoadImageListBox("https://f.hatena.ne.jp/iseebi/rss?mode=rss", userPhotoListBox);

    newPhotoListBox.SelectionChanged += new SelectionChangedEventHandler(photoListBox_SelectionChanged);
    hotPhotoListBox.SelectionChanged += new SelectionChangedEventHandler(photoListBox_SelectionChanged);
    userPhotoListBox.SelectionChanged += new SelectionChangedEventHandler(photoListBox_SelectionChanged);
}

void photoListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.AddedItems.Count > 0)
    {
        HatenaFotolifeRssItem item = (HatenaFotolifeRssItem)e.AddedItems[0];
        NavigationService.Navigate(new Uri(string.Format("/ImagePage.xaml?image={0}", item.ImageUrl), UriKind.Relative));
    }
}

同じプロジェクトにある他のPageは、NavigationService.Navigateに、/からはじめてファイル名を記述して、UrlKind.Relative(相対パス)を指定して呼び出すことができます。このときに、URLのGETパラメータのようにパラメータを指定することができ、受け取り先ではNavigationContextで取り出すことができるようになっています。

では、実行して、リストを選択すると、画像が1枚ページで表示されます。ちょっと比率おかしいけどここは追々調整する形で。

f:id:iseebi:20110307034053p:image

to be continued...

以上、プログラム実装編でした!

今回のプロジェクトファイルはこちらからダウンロードできます

あとはこのプログラムをBlendでいい感じにするデザイン編を id:c-mitsuba が書いてくれました。

こちらをぜひ参照して、完成させてくださいね!

INDEX

コメント

▲このページのトップへ