PR

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

2011年11月21日(月)
PROJECT KySS

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

リスト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)。

図6:「Windows Phone 縦向きのページ」を選択する(クリックで拡大)

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

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

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

図7:TextBlockを配置した(クリックで拡大)

日本語表示設定

「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弾でも続けて紹介していきたいと思います。

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

Think IT会員限定特典
  • 「ShareLinkTaskを使ったSNSでのリンク共有」サンプルプログラム

  • 「HubTileを使って星座占いを表示する」サンプルプログラム

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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