Windows8のストア画面で手軽に時計を表示するサンプル

開発ツール

技術解説

連載 :

Windows Storeアプリ開発で今覚えておきたいTips10選+α

2013年4月19日(金)

薬師寺国安

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

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

リスト1　(MainWindow.xaml.vb)

`1`	`Option Strict On`

タイマーの機能を提供するクラスの含まれるWindows.System.Threading名前空間をインポートします。

`1`	`Imports Windows.System.Threading`

文字色等を設定する機能の含まれるWindows.UI名前空間をインポートします。

`1`	`Imports Windows.UI`

ファイル、フォルダ、およびアプリケーションの設定を管理するクラスの含まれる、Windows.Storage名前空間をインポートします。

`1`	`Imports Windows.Storage`

シーケンシャルとランダムアクセスストリームから読み書きをサポートするクラスの含まれる、Windows.Storage.Streams名前空間をインポートします。

1Imports Windows.Storage.Streams
2 
3Public NotInheritable Class MainPage
4  Inherits Page
5 
6  Dim myColorInfo As String

タイマーを表すDispatcherTimerクラスの新しいインスタンスmyTimerをメンバ変数として宣言します。

`1`	`Dim myTimer As New DispatcherTimer`

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

GetFilesAsyncメソッドでピクチャライブラリ内のXMLサブフォルダ内のファイルを取得します。CountプロパティでXMLサブフォルダ内にファイルが存在する場合は、GetFileAsyncメソッドでmyColor.xmlを取得します。
取得したXMLファイルをOpenAsyncメソッドで、読み込み専用で開きます。
新しいStreamReaderクラスのインスタンスreaderオブジェクトを作成し、取得したXMLファイルをUTF-8エンコーディングで読み込みます。
ReadToEndメソッドで読み込んだ結果を変数resultに格納します。

XElement.Parseメソッドで読み込んだXMLを格納しているresult変数の内容を文字列として読み込みます。
読み込んだXMLの要素の値を変数_Colorに格納します。

変数_Colorに格納された値で条件分岐を行います。変数_Colorに格納された色をCasCadingTextBlockのForegroundに指定し、_Color変数に対応するRadioButtonにチェックを付けます。

CasCadingTextBlockのTextプロパティに現在の年月日時間分秒を指定します。タイマーの発生する間隔を10秒とします。
AddHandlerステートメントで、タイマーのTickイベントにイベントハンドラを追加します。Tickイベントは、指定したタイマーの間隔が経過し、タイマーが有効である場合に発生するイベントです。
イベントハンドラ内ではCascadhingTextBlockのTextプロパティに現在の年月日時間分秒を指定し、BeginCascadingTransitionAsyncメソッドでアニメーションを開始します。
Startメソッドでタイマーを開始します。非同期処理で実行されるため、メソッドの先頭にAsyncを追加します。

01Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
02    Dim result As String
03    Dim _Color As String
04    Dim myStorageFolder As StorageFolder = Windows.Storage.KnownFolders.PicturesLibrary
05    Dim mySubFolder = Await myStorageFolder.CreateFolderAsync("XML", CreationCollisionOption.OpenIfExists)
06    Dim myFile = Await mySubFolder.GetFilesAsync()
07    If myFile.Count> 0 Then
08      Dim xmldoc As StorageFile = Await mySubFolder.GetFileAsync("myColor.xml")
09      Using myStream As IRandomAccessStream = Await xmldoc.OpenAsync(FileAccessMode.Read)
10        Using reader As StreamReader = New StreamReader(myStream.AsStream, System.Text.Encoding.UTF8)
11          result = reader.ReadToEnd
12        End Using
13      End Using
14    Dim doc As XElement = XElement.Parse(result)
15    _Color = doc.Descendants("Color").Value
16    Select Case _Color
17      Case "Red"
18        CascadingTextBlock1.Foreground = New SolidColorBrush(Colors.Red)
19        redRadioButton.IsChecked = True
20      Case "Blue"
21        CascadingTextBlock1.Foreground = New SolidColorBrush(Colors.Blue)
22        blueRadioButton.IsChecked = True
23      Case "Green"
24        CascadingTextBlock1.Foreground = New SolidColorBrush(Colors.Green)
25        greenRadioButton.IsChecked = True
26      Case "White"
27        CascadingTextBlock1.Foreground = New SolidColorBrush(Colors.White)
28        whiteRadioButton.IsChecked = True
29      Case "Yellow"
30        CascadingTextBlock1.Foreground = New SolidColorBrush(Colors.Yellow)
31        goldRadioButton.IsChecked = True
32    End Select
33  End If
34  CascadingTextBlock1.Text = DateTime.Now.ToString
35  myTimer.Interval = New TimeSpan(0, 0, 10)
36 
37  AddHandlermyTimer.Tick, Sub()
38                          CascadingTextBlock1.AnimateOnLoaded = True
39                          CascadingTextBlock1.Text = DateTime.Now.ToString
40                  
41                          CascadingTextBlock1.BeginCascadingTransitionAsync()
42                        End Sub
43  myTimer.Start()
44   
45End Sub

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

Stopメソッドでタイマーを停止します。

1Protected Overrides Sub OnNavigatedFrom(e As Navigation.NavigationEventArgs)
2  myTimer.Stop()
3  MyBase.OnNavigatedFrom(e)
4End Sub

[Settings]ボタンがクリックされた時の処理

非表示になっていたStackPanelを表示します。色を選択するRadioButtonと[Save]ボタンが表示されます。

1Private Sub settingButton_Click(sender As Object, e As RoutedEventArgs) Handles settingButton.Click
2 
3  StackPanel1.Visibility = Windows.UI.Xaml.Visibility.Visible
4 
5End Sub

「赤」のRadioButtonにチェックが付けられた時の処理

ForegroundプロパティにRedを指定し、メンバ変数myColorInfoにRedを格納します。

1Private Sub redRadioButton_Checked(sender As Object, e As RoutedEventArgs) Handles redRadioButton.Checked
2  CascadingTextBlock1.Foreground = New SolidColorBrush(Colors.Red)
3  myColorInfo = "Red"
4End Sub

「青」のRadioButtonにチェックが付けられた時の処理

1Private Sub blueRadioButton_Checked(sender As Object, e As RoutedEventArgs) Handles blueRadioButton.Checked
2  CascadingTextBlock1.Foreground = New SolidColorBrush(Colors.Blue)
3  myColorInfo = "Blue"
4End Sub

「緑」のRadioButtonにチェックが付けられた時の処理

1Private Sub greenRadioButton_Checked(sender As Object, e As RoutedEventArgs) Handles greenRadioButton.Checked
2  CascadingTextBlock1.Foreground = New SolidColorBrush(Colors.Green)
3  myColorInfo = "Green"
4End Sub

「白」のRadioButtonにチェックが付けられた時の処理

1Private Sub whiteRadioButton_Checked(sender As Object, e As RoutedEventArgs) Handles whiteRadioButton.Checked
2  CascadingTextBlock1.Foreground = New SolidColorBrush(Colors.White)
3  myColorInfo = "White"
4End Sub

「黄」のRadioButtonにチェックが付けられた時の処理

1Private Sub goldRadioButton_Checked(sender As Object, e As RoutedEventArgs) Handles goldRadioButton.Checked
2  CascadingTextBlock1.Foreground = New SolidColorBrush(Colors.Yellow)
3  myColorInfo = "Yellow"
4End Sub

[Save]ボタンがクリックされた時の処理

Visual Basic の埋め込み式を用いて、ルート要素、その子要素としてを作成し、埋め込み式の構文であるを用いてメンバ変数myColorInfoの値を指定します。これは ASP.NET で使用される構文と同じです。作成したXML文書を変数colorXmlに格納します。

XElement.ParseメソッドでcolorXml変数の値を文字列として読み込みます。読み込んだ結果XMLの値を変数resultに格納しておきます。

ピクチャライブラリにアクセスします。CreateFolderAsyncメソッドでピクチャライブラリ内にXMLというフォルダを作成します。CreationCollisionOption.OpenIfExistsを指定しておくと、同名フォルダが存在する場合は、そのフォルダ名を返し、ない場合は新規に作成してくれます。また、CreateFileAsyncメソッドでピクチャライブラリのXMLサブフォルダ内にmyColor.xmlというファイルを作成します。CreationCollisionOption.ReplaceExistingと指定し、既に同名のファイルがある場合は上書きします。OpenAsyncメソッドで作成したmyColor.xmlを「読み取り／書き込み」モードで開き、入出力データへの、ランダムアクセスをサポートするIRandomAccessStreamインターフェース型のmyStreamで参照します。

データを出力ストリームに書き込む、新しいDataWriterのインスタンスをmyStreamで初期化し、writerオブジェクトを作成します。出力ストリームのUnicode文字エンコードを設定する、UnicodeEncodingプロパティにUtf8を指定します。Writeメソッドで出力ストリームにresult変数の値を書き込みます。StoreAsyncメソッドでバッキングストアにバッファーのデータをコミットします。StackPanelを非表示にし、文字色の選択を非表示にします。非同期処理で行われるため、メソッドの先頭にAsyncを追加します。

01Private Async Sub saveButton_Click(sender As Object, e As RoutedEventArgs) Handles saveButton.Click
02  Dim colorXml As XElement = <ColorInfo><Color><%= myColorInfo %></Color></ColorInfo>
03  Dim xmldoc As XElement = XElement.Parse(colorXml.ToString)
04  Dim result As String = xmldoc.ToString
05 
06  Dim myStorageFolder As StorageFolder = Windows.Storage.KnownFolders.PicturesLibrary
07  Dim mySubFolder = Await myStorageFolder.CreateFolderAsync("XML", CreationCollisionOption.OpenIfExists)
08  Dim myXmlFile As StorageFile = Await mySubFolder.CreateFileAsync("myColor.xml", CreationCollisionOption.ReplaceExisting)
09  Using myStream As IRandomAccessStream = Await myXmlFile.OpenAsync(FileAccessMode.ReadWrite)
10    Dim writer As DataWriter = New DataWriter(myStream)
11    writer.UnicodeEncoding = UnicodeEncoding.Utf8
12    writer.WriteString(result)
13    Await writer.StoreAsync
14  End Using
15  StackPanel1.Visibility = Xaml.Visibility.Collapsed
16End Sub

CountdownControlが指定され、数をカウントし終えた場合の処理

CountdownControlを非表示にします。

1  Private Sub CountdownControl1_CountdownComplete(sender As Object, e As RoutedEventArgs) Handles CountdownControl1.CountdownComplete
2    CountdownControl1.Visibility = Xaml.Visibility.Collapsed
3  End Sub
4End Class

今回はここまでです。ありがとうございました。

開発 / Windows 8 / サンプルアプリ / Windows8 ストア

Windows 8のWindowsストア画面で手軽に時計を表示させるためのサンプル

4060_1.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）。