PR

RSSの読み込み表示とページ遷移時のパラメータの渡し方を知る

2012年10月31日(水)
薬師寺 国安

今回は2つのサンプルを紹介します。「RSSを読み込み表示する」と「別なページに遷移する際のパラメータの渡し方」の2つです。最初は、「RSSを読み込み表示する」を紹介します。

RSSを読み込み表示する

Microsoft社の http://www.microsoft.com/japan/msdn/rss/feed/rss.aspx から取得したRSSをListBoxに表示し、ListBoxから選択されたサイトに遷移するサンプルです(図1)。ListBox内にはタイトル(赤文字)と概要(紺色)が表示されています。タイトルと概要は一対になって表示されています。

図1:RSSの情報がListBoxに表示され、ListBoxから選択した項目のサイトに遷移している(クリックで拡大)

実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホでとった動画です。見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_MicrosoftRSS」という名前を付けています。

コントロールの配置

ツールボックスからデザイン画面上にListBoxコントロールを1個、Frameコントロールを1個、Buttonコントロールを1個配置しています(図2)。

図2:各コントロールをレイアウトした(クリックで拡大)

書き出されるXAMLコードをリスト1のように編集します。

リスト1 編集されたXAMLコード(MainPage.xaml)

  • (1)プロパティ要素内に、Key名がListBoxTemplateという要素を配置します。その子要素として要素を配置し、枠線を3、枠線の色をNavyに指定します。
    次に、要素を配置し、Marginプロパティに5を指定して余白を設けます。その子要素として再度要素を配置し、背景色にGoldを指定します。

    要素の子要素として要素を配置します。Textプロパティにtitleをバインドし、文字色(Foreground)をCrimsonに指定しておきます。
    もう一個要素を配置し、背景色に、GreenYellowを指定します。その子要素として要素を配置します。
    Textプロパティにdescriptionをバインドし、文字色(Foreground)にNavyを指定しておきます。

    2つのの文字サイズには、それぞれ異なった文字サイズを指定しておきます。
  • ここでバインドした名称はVBコード内で定義したプロパティ名です。
  • (2)要素のItemTemplateにStaticResourceで(1)で定義したListBoxTemplateを参照させます。
  • (3)myFrameという名前の要素を配置しています。
  • (4)backButtonという名前の
<Page.Resources>■(1)
    <DataTemplate x:Key="ListBoxTemplate">■(1)
      <Border BorderThickness="3" BorderBrush="Navy">■(1)
      <StackPanel Margin="5">■(1)
        <StackPanel Background="Gold">■(1)
        <TextBlock TextWrapping="Wrap" Width="1150" Text="{Binding title}" Foreground="Crimson" FontFamily="Meiryo UI" FontSize="24" />■(1)
        </StackPanel>■(1)
        <StackPanel Background="GreenYellow">■(1)
        <TextBlock TextWrapping="Wrap" Width="1150" Text="{Binding description}" Foreground="Navy" FontFamily="Meiryo UI" FontSize="20"/>■(1)
      
        </StackPanel>■(1)
      </StackPanel>■(1)
      </Border>■(1)
    </DataTemplate>■(1)
  </Page.Resources>■(1)
  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <ListBox x:Name="ListBox1" HorizontalAlignment="Left" Height="717" Margin="104,41,0,0" VerticalAlignment="Top" Width="1186" ItemTemplate="{StaticResource ListBoxTemplate}"/>■(2)
    <Frame  HorizontalAlignment="Left" Height="741" Margin="80,27,0,0" VerticalAlignment="Top" Width="1276" x:Name="myFrame"/>■(3)
    <Button Style="{StaticResource BackButtonStyle}" HorizontalAlignment="Left" Height="60" Margin="10,27,0,0" VerticalAlignment="Top" Width="65" x:Name="backButton" />■(4)
  </Grid>
</Page>

次にListBoxに表示されている「タイトル」と「概要」を選択した際に、FrameクラスのNavigateメソッドで遷移するWebViewPage.xamlページを作成します。

「空白のページ」の作成

VS2012のメニューの「プロジェクト(P)/新しい項目の追加(W)」と選択します。「新しい項目の追加」ダイアログボックスが開きますので、「空白のページ」を選択します。「名前(N)」にWebViewPage.xamlと入力し、[追加(A)]ボタンをクリックします。

コントロールの配置

表示されるデザイン画面に、ツールボックスからWebViewコントロールを1個配置します(図3)。WebViewコントロールは、アプリケーション内のHTMLコンテンツをホストするUI要素を提供するコントロールです。

書き出されるXAMLコードはリスト2になります。

図3:各コントロールを配置した(クリックで拡大)

リスト2 書き出されたXAMLコード(WebViewPage.xaml)

(1)WebView1という名前の要素を配置しています。

<Page
  x:Class="Win8_MicrosoftRss.WebViewPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Win8_MicrosoftRss"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  <WebView x:Name="WebView1" HorizontalAlignment="Left" Height="1039" Margin="206,31,0,0" VerticalAlignment="Top" Width="1694"/>■(1)
  </Grid>
  </Page>

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト3のコードを記述します。

  • Windows ストアアプリでRSSを読み込み表示するサンプル

  • ページを遷移する際にパラメータを渡すサンプル

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています