ShareLinkTaskを使ったSNSでのリンク共有とHubTileのサンプル

ロジックコードを記述する

リスト4　(MainPage.xaml.vb)

Option Strict On
Imports System.Xml.Linq
Imports System.Windows.Media.Imaging

Partial Public Class MainPage
  Inherits PhoneApplicationPage
  
  ' コンストラクター
  Public Sub New()
    InitializeComponent()
  End Sub

XElementクラス型のメンバ変数xmldocを宣言します。
  Dim xmldoc As XElement

ページが読み込まれた時の処理

XElement.LoadメソッドでXML文書ファイル(Astrology.xml)を読み込みます。
HubTile型の新しいリストであるmyHubTileListオブジェクトを作成します。
Descendantsメソッドで、子孫要素である全ての <占い> 要素のコレクションに対して、各要素を変数 result に格納しながら、以下の処理を繰り返します。
HubTileの新しいインスタンスであるmyHubTileオブジェクトを生成します。
myHubTileオブジェクトの、SourceプロパティにImage/を連結した、<Source> 要素の値を指定します。
Titleプロパティには<Title> 要素の値を指定します。
Messageプロパティには、<Message> 要素の値を指定します。
HubTileをグループ化するGropuTagプロパティには「astorology」と指定します。
HubTileの各プロパティについては8月版Toolkitをインストールした
C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Aug11\SilverlightForWindowsPhoneToolkit.chm
のドキュメントを参照してください(英語)。
Marginプロパティには10を指定して余白を設けます。Background(背景色)プロパティには「赤」、Foreground(文字色)プロパティには「青」を指定します。
これらのプロパティの設定されたmyHubTileオブジェクトをAddメソッドでmyHubTileListオブジェクトに追加します。ListBoxのItemsSourceプロパティにmyHubTileListオブジェクトを指定します。これで、ListBox内に2列でHubTileが表示され、ランダムにアニメーションが実行されます。
  Private Sub MainPage_Loaded(sender As Object, e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    xmldoc = XElement.Load("Astrology.xml")
    Dim myHubTileList As New List(Of HubTile)
    For Each result In From c In xmldoc.Descendants("占い") Select c
      Dim myHubTile As New HubTile
 
      With myHubTile
        .Source = New BitmapImage(New Uri("Image/" & result.Element("Source").Value, UriKind.Relative))
        .Title = result.Element("Title").Value
        .Message = result.Element("Message").Value
        .GroupTag = "astrology"
        .Margin = New Thickness(10)
        .Background = New SolidColorBrush(Colors.Red)
        .Foreground = New SolidColorBrush(Colors.Blue)
      End With
      myHubTileList.Add(myHubTile)
    Next
    ListBox1.ItemsSource = myHubTileList
  End Sub

ListBoxから任意のHubTileが選択された時の処理

ListBoxから選択されたHubTileのインデックスに該当する<占い>要素の子要素<Tile> の値を変数myTitleに格納します。
ListBoxから選択されたHubTileのインデックスに該当する<占い>要素の子要素<Message> の値を変数myMessageに格納します。
myTitleとmyMessageを引数にして、これから作成するAstorologyPage.xamlに遷移します。
Back(←)アイコンがクリックされた時に発生する例外処理のために、Try～Catch～End Tryステートメントを使用しています。
Private Sub ListBox1_SelectionChanged(sender As Object, e As System.Windows.Controls.SelectionChangedEventArgs) Handles ListBox1.SelectionChanged
    Try
      Dim myTitle As String = xmldoc.Descendants("占い")(ListBox1.SelectedIndex).Element("Title").Value
      Dim myMessage As String = xmldoc.Descendants("占い")(ListBox1.SelectedIndex).Element("Message").Value
      NavigationService.Navigate(New Uri(String.Format("/AstrologyPage.xaml?title={0}&message={1}", myTitle, myMessage), UriKind.Relative))
    Catch
      Exit Sub
    End Try
  End Sub
End Class

「Windows Phone 縦向きのページ(AstorologyPage.xaml) 」の作成

「プロジェクト(P)／新しい項目の追加(W)」と選択して、「Windows Phone 縦向きのページ」を選択します。「名前(N)」には「AstorologyPage.xaml」と指定します（図6）。

AstrologyPage.xamlの編集とコントロールの追加

x:NameがPageTitleというTextBlockのTextプロパティを削除します。ここにはプログラムから星座名が表示されます。

ツールボックスからTextBlockコントロールを1個配置します。Fontsizeは24、ForegroundはGold、TextWrappingはWrapと指定します（図7）。

日本語表示設定

「ShareLinkTaskを使ってSNSでリンクを共有する」を参照してください。

書き出されるXAMLコードは省略します。

AstrologyPage.xamlを展開して表示される、Astrology.xaml.vbをダブルクリックしてリスト5のコードを記述します。

ロジックコードを記述する

リスト5 (AstrologyPage.xaml.vb)

Option Strict On
Partial Public Class AstrologyPage
  Inherits PhoneApplicationPage

  Public Sub New()
    InitializeComponent()
  End Sub

画面の遷移で移動した時に最初に呼ばれるイベント

ここで、MainPage.xamlから渡された文字データを受け取ります。文字データはNavigationContextのQueryStringにDictionary として提供されます。送信時のキーワード(この場合title)を基に渡された文字列情報の値(myParam(“title”))を取得します。取得した値を、PageTitleという名前を持つTextBlockに表示します。
次に、myParam(“message”)の値をTextBlock1に表示します。 
  Protected Overrides Sub OnNavigatedTo(e As System.Windows.Navigation.NavigationEventArgs)
    Dim myParam As IDictionary(Of String, String) = NavigationContext.QueryString
    PageTitle.Text = myParam("title") & "の運勢"
    TextBlock1.Text = myParam("message")
    MyBase.OnNavigatedTo(e)
  End Sub
End Class

以上でTips集は終わりですが、まだまだ紹介したいTipsがありますので、この後予定している第2弾でも続けて紹介していきたいと思います。

どうもありがとうございました。