選択した画像を拡大表示してアニメーションさせる+1つのサンプル

開発ツール

技術解説

連載 :

Windows 8 Store Applicationプログラミング（応用編）

2013年3月22日(金)

薬師寺国安

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

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

リスト3　(MainWindow.xaml.vb)

`1`	`Option Strict On`

UIを提供するクラスの含まれる、Windows.UI名前空間を読み込みます。文字の色を指定する場合等に必要です。
Imports Windows.UI

ImageInfoクラス内で文字列型の「画像名」、「説明」プロパティを定義しています。

1Public Class ImageInfo
2  Property 画像名 As String
3  Property 説明 As String
4End Class
5Public NotInheritable Class MainPage
6  Inherits Page

XML要素を表す、XElementクラス型のメンバ変数xmldocを宣言します。

`1`	`Dim xmldoc As XElement`

ページがアクティブになった時の処理

XElement.LoadメソッドでXML文書ファイル(photo_etc.xml)を読み込みます。

ImageInfoクラス型の新しいリストであるmyImageInfoオブジェクトを作成します。

Descendantsメソッドで全ての要素のコレクションに対して、要素を変数resultに格納しながら、反復処理を行います。
ImageInfoクラスの「画像名」プロパティに、画像を配置している”ms-appx:///Images/”フォルダを連結した要素の内容テキストを指定します。「説明」プロパティには要素の内容テキストを指定します。
各プロパティの設定されたImageInfoクラスをAddメソッドで、myImageInfoオブジェクトに追加していきます。
ListBoxのItemsSourceプロパティにmyImageInfoオブジェクトを指定します。これで、ListBox内に画像の一覧が表示されます。

01Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
02  xmldoc = XElement.Load("photo_etc.xml")
03  Dim myImageInfo As New List(Of ImageInfo)
04 
05  For Each result In From c In xmldoc.Descendants("情報") Select c
06    With myImageInfo
07      .Add(New ImageInfo With {.画像名 = "ms-appx:///Images/" &result.Element("画像名").Value, .説明 = result.Element("説明").Value})
08    End With
09  Next
10  ListBox1.ItemsSource = myImageInfo
11End Sub

リストボックスから任意の画像が選択された時の処理

ListBoxから選択された画像の「画像名」プロパティを取得して、変数myImageに格納します。同じく「説明」プロパティを取得して変数myExplainに格納しておきます。

Imageの新しいインスタンスである、_myImageオブジェクトを作成します。
WidthとHeightプロパティの値を指定し、Sourceプロパティに変数myImageで初期化されたUriを指定します。

TextBlockの新しいインスタンスmyTextBlockオブジェクトを作成します。

WidthとHeightプロパティを設定し、文字の回り込みを設定するTextWrappingプロパティにWrapを指定します。文字色(Foreground)にはGoldを指定します。
Textプロパティには、変数myExplainの値を指定します。
文字の水平方向の配置を示すTextAlignmentプロパティにはLeftを指定し、左詰めとします。

StackPanelの新しいインスタンスmyStackPanelオブジェクトを作成します。
AddメソッドでmyStackPanelオブジェクトに、_myImageとmyTextBlockオブジェクトを追加します。
画像の下に文字(説明文)が表示されます。

AnimationContainer1の回転する内容を表すRotaingContentにmyStackPaneオブジェクトを指定します。
持続時間を指定するDurationに4秒と指定します。
画像の最大拡大率を指定するPulseScaleに10.0と指定します。
Y軸の回転の半径をRadiusYに50.0、X軸の回転の半径を表すRadiusXに100を指定しています。
AnimationContainerの各プロパティの説明に対しての情報が、現時点ではどこにも掲載されていませんので、各自が各プロパティの値を変更して、どのような動作になるかを確認して、お試しください。

01  Private Sub ListBox1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles ListBox1.SelectionChanged
02    Dim myImage = DirectCast(ListBox1.SelectedItem, ImageInfo).画像名
03    Dim myExplain = DirectCast(ListBox1.SelectedItem, ImageInfo).説明
04    Dim _myImage As New Image
05  
06    With _myImage
07      .Width = 320
08      .Height = 240
09      .Source = New BitmapImage(New Uri(myImage, UriKind.Absolute))
10    End With 
11  
12    Dim myTextBlock As New TextBlock
13    With myTextBlock
14      .Width = 350
15      .Height = 240
16      .TextWrapping = TextWrapping.Wrap
17      .Foreground = New SolidColorBrush(Colors.Gold)
18      .Text = myExplain
19      .TextAlignment = TextAlignment.Left
20    End With
21  
22    Dim myStackPanel As New StackPanel
23    With myStackPanel
24      .Children.Add(_myImage)
25      .Children.Add(myTextBlock)
26    End With
27  
28    With AnimationContainer1
29      .RotatingContent = myStackPanel
30      .Duration = "0:0:4"
31      .PulseScale = 10.0
32      .RadiusY = 50.0
33      .RadiusX = 100
34    End With
35  End Sub
36End Class

1つ目のサンプルは以上で終わりです。次ページでは2つ目のサンプルを紹介します。

画像 / 開発 / API / Windows 8 / サンプルアプリ

選択した画像を拡大表示してアニメーションさせるアプリサンプル

4017_1.zip
時計の秒針のような動きを実装するアプリサンプル

4017_2.zip

著者

薬師寺国安

この著者の記事一覧この著者の
記事一覧

薬師寺国安事務所

薬師寺国安事務所代表。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）。