お天気情報WebAPIを使ってGIF画像を表示する
2012年1月27日(金)
書き出されるXAMLコードはリスト1のようになります。
リスト1 編集されたXAMLコード(MainPage.xaml)
(1)areaTextBlockのTextWrappingプロパティにWrapを指定し、文字の回り込みを可能としています。 (2)最初の状態では、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" /> ■(1) <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" /> ■(2) <Button Content="<<" Height="83" HorizontalAlignment="Left" Margin="139,453,0,0" Name="prevButton" VerticalAlignment="Top" Width="95" IsEnabled="False" /> ■(2) </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
「お天気情報WebAPIを使ってGIF画像を表示する」のサンプルプログラム
連載バックナンバー
Think ITメルマガ会員登録受付中
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。