[C#]Visual Studio 2013で、Windows8.1向けWindowsストアアプリを作成してみる

Windowsストアアプリと言っても、Windows8用とWindows8.1用と異なり、
Windows8用のストアアプリはVisual Studio 2012で開発し、
Windows8.1用のストアアプリはVisual Studio 2013で開発する必要がある。

Windows8は無料アップデートでWindows8.1になるので、もうWin8用ストアアプリを態々作る必要も無いだろう。
なので、最初からWin8.1向けWindowsストアアプリ開発に挑戦してみる。

早速、先日インストールしたVisual Studio Community 2013を起動。

新しいプロジェクトを作成

Visual Studioが起動したらWindowsストア・アプリのプロジェクトを作成してみる。
[ファイル]-[新規作成]-[プロジェクト]メニューを選択。

「新しいプロジェクト」ダイアログの左側ツリーで、
[テンプレート]-[Visual C#]-[ストアアプリ]を選択。
とりあえず、今回はHello Worldアプリを試作する程度なので
「空のアプリケーション(ユニバーサルアプリ)」を選択。

最初にWindows8.1 開発者用ライセンスを取得しなければならないようだ。

開発者用ライセンス

Windows8.1 開発者用ライセンスを取得する

Windows8.1 でこのスタイルのアプリを開発するには開発者用ライセンスが必要です。
開発者用ライセンスを使用すると、Microsoftがテストを行って認証する前に、このコンピュータ上でアプリのインストールやテストを行うことができます。

開発者用ライセンスは、アプリの開発、テスト、および評価の目的でのみ使用することができます。
それ以外の事項については、Windows8.1ソフトウェアライセンス条項にある Windows8.1 および開発者用ライセンスの使用に準拠します。

開発者用ライセンスを取得すると、開発者用ライセンスの仕様に関するデータがMicrosoftに送信されます。
詳細については、プライバシーに関する声明をお読みください。

これら条項に同意し、開発者用ライセンスをインストールする場合は、[同意します]をクリックします。

Microsoftアカウントでサインイン

開発者用ライセンスを取得しました。
ライセンスの有効期限日までWindows8.1のアプリを開発することができます。
アプリの開発を続けるには、期限切れになる前にライセンスを更新する必要があります。

これでプロジェクト雛形が作成された。

試しに、この初っ端の状態でいきなり実行してみる。
[ローカルコンピュータ]の実行ボタンまたは[F5]キー押下。

起動すると一瞬、スプラッシュ画面（タイトル、アイコン）が表示される。

真っ黒な画面と画面右上に数値が表示される。

停止は[Alt]+[Tab]などでVisual Studioの画面に戻り、停止ボタンまたは[Shift]+[F5]キーで停止。
アプリの画面を閉じただけではデバッグは止まらないようだ。

Hello worldの作成

とりあえず、Hello worldアプリということで、文字を表示してみる。

右側のソリューションエクスプローラーのツリーから、Windows8.1用の”MainPage.xaml”をダブルクリックすると、編集用の画面(タブ)が開かれる。

Windowsストアアプリでは、Windows Formアプリと違って画面はXAML(XML)で作る必要がある。

Hello worldの文字を表示するために、コントロールを配置する。
画面左側の[ツールボックス]タブを開き、TextBlockコントロールを画面にドラッグ＆ドロップ。

画面右下のプロパティか、画面下側のXMLでTextの値を”TextBlock”から”Hello world”に変更。
ついでに、フォントとサイズも変更。これで完成。

これで実行(F5)すると、ビルドされ「Hello world」のWindowsストアアプリが実行される。

あと、この作成したアプリは、スタート画面にも登録される。
まだDebugモードなんだけど。
一応、このアイコンからもビルドしたアプリを実行可能。

日時表示アプリを作ってみる

Hello worldを表示するだけでは詰まらないし、C#のプログラムを1行も書いていないので、ちょっと改造して現在時刻を表示するアプリを作ってみる。

さっきのHello worldのTextBlockコントロールに現在時刻を表示するようにする。
そのためは、C#プログラムから識別できるようにするためTextBlockコントロールに名前を付けてやる必要がある。

適当に”timeText”という名前を付けてみる。

今度はプログラム側の処理を用意する。
“MainPage.xaml.cs”を開き、以下のソースを書き込む。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234238 を参照してください

namespace HelloWorldApp
{
    /// <summary>
    /// Frame 内へナビゲートするために利用する空欄ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            
            DispatcherTimer tm = new DispatcherTimer();
            tm.Interval = TimeSpan.FromSeconds(1);
            tm.Tick += timeTick;
            tm.Start();
        }

        void timeTick(object sender, object e)
        {
            timeText.Text = DateTime.Now.ToString("HH:mm:ss");
        }
    }
}

29～38行目を追記。

これで1秒間隔で現在日時を更新表示するアプリが完成。
実行してみると、一応、その通り動いた。