お天気情報WebAPIを使ってGIF画像を表示する

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

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

（１）areaTextBlockのTextWrappingプロパティにWrapを指定し、文字の回り込みを可能としています。
（２）最初の状態では、prevButtonとnextButtonのIsEnabledにはFalseが指定され、使用不可となっています。
<phone:PhoneApplicationPage 
  x:Class="WP7_GifWeatherService.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait" Orientation="Portrait"
  shell:SystemTray.IsVisible="True" Language="ja-JP">

  <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
 
    <!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="天気予報" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
 
    <!--ContentPanel - 追加コンテンツをここに入力します-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <TextBox Height="80" HorizontalAlignment="Left" Margin="96,87,0,0" Name="cityTextBox" VerticalAlignment="Top" Width="186" />
      <Button Content="実行" Height="80" HorizontalAlignment="Left" Margin="267,87,0,0" Name="goButton" VerticalAlignment="Top" Width="127" />
      <TextBlock Height="49" HorizontalAlignment="Left" Margin="46,102,0,0" Name="TextBlock1" Text="市" VerticalAlignment="Top" Width="44" FontSize="32" FontWeight="Bold" />
      <TextBlock Height="66" HorizontalAlignment="Left" Margin="12,15,0,0" Name="TextBlock2" Text="【例】例えば、[市]には松山市の場合は[松山]とだけ入力してください。" VerticalAlignment="Top" Width="438" TextWrapping="Wrap" Foreground="Crimson" />
      <TextBlock Height="76" HorizontalAlignment="Left" Margin="12,217,0,0" Name="areaTextBlock"  VerticalAlignment="Top" Width="438" FontSize="26" TextWrapping="Wrap" />　■（１）
      <Image Height="129" HorizontalAlignment="Left" Margin="12,299,0,0" Name="Image1" Stretch="Uniform" VerticalAlignment="Top" Width="140" />
      <TextBlock Height="129" HorizontalAlignment="Left" Margin="171,299,0,0" Name="weatherTextBlock"  VerticalAlignment="Top" Width="279" FontSize="26" TextWrapping="Wrap" />
      <Button Content="＞＞" Height="83" HorizontalAlignment="Right" Margin="0,453,140,0" Name="nextButton" VerticalAlignment="Top" Width="95" IsEnabled="False" />　■（２）
      <Button Content="＜＜" Height="83" HorizontalAlignment="Left" Margin="139,453,0,0" Name="prevButton" VerticalAlignment="Top" Width="95" IsEnabled="False" />　■（２）
    </Grid>
  </Grid>
～コード略～
</phone:PhoneApplicationPage>

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

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

リスト2　(MainPage.xaml.vb)

Option Strict On
Imports System.Xml.Linq

イメージを読み込んだり、操作したりする、コントロールやクラスの含まれる、基本の名前空間である、ImageToolsをインポートします。
Imports ImageTools
GIFのデコードとエンコードのクラスが含まれている、ImageTools.IO.Gif名前空間をインポートします。
Imports ImageTools.IO.Gif

Partial Public Class MainPage
  Inherits PhoneApplicationPage
 
  ' コンストラクター
  Public Sub New()
    InitializeComponent()
  End Sub
  Dim myId As Integer
  Dim cityId As String = String.Empty

文字列型のメンバ変数myNowにtodayという文字列を格納しておきます。
  Dim myNow As String = "today"
  Dim no As Integer = 0

［実行］ボタンがタップされた時の処理

［＞＞］ボタンの使用を可能にし、お天気情報を表示するDataShowプロシージャを実行します。
  Private Sub goButton_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles goButton.Click
    nextButton.IsEnabled = True
    DataShow()
  End Sub