Windows8のWindowsストアアプリを作る事になって、Windows8マシンを買ったまではいいんですが、XAML+VBのコーディングになかなか馴染めずにもやもやしながらも泥臭く先に進む様子を公開します。私のレベルは、VS2010でVBアプリを幾つか制作して、まぁVBってこんなもんだろと理解した（気になっている）辺りです。
恐らくここからWindowsストアアプリを制作しようという方が見ても、何かの助けになるんじゃないでしょうか、という希望を込めて書き連ねます。
JavaScriptでプログラムを書く場合は、HTML+CSSで画面を作ることができるようです。落ち着いたらこちらも試してみたい。
無料で利用できますが、VSの起動にアカウントが必要ですので、登録します。
誰でもダウンロードできて誰でもコードが書けるようにした方がストアアプリの本数が増えるような気がするんですけどねぇ。
無事起動できたら、「ファイル」から「新しいプロジェクト」を選びます。
左のカラムのリストから「インストール済み」→「Visual Basic」→「Windowsストア」と掘っていくと、真ん中のカラムに幾つかひな形が表示されます。
今回は一番上にある「新しいアプリケーション(XAML)」というテンプレートを使って進めていきます。
適当な名前を決めてプロジェクトを作成しましょう。
最初の画面は、MainPage.xamlに設定していきます。ソリューションエクスプローラーでMainPage.xamlをダブルクリックでデザイナーを開きます。
左側にあるツールボックスからグリッドビューをデザイナーへドラッグ&ドロップするとグリッドビューの配置は完了です。位置の調整はmarginを調整して行いますが、計画的にUIを構築するなら、親グリッドのRowDefinitionを設定した方がスッキリします。
xamlファイルはXMLですので、ツールの配置をXMLに書くことで設定することもできます。
続いて、ファイルピッカーを開くためのボタンを配置します。
従来のWindowsのUIで行くと、ウィンドウの上部にボタンを並べる感じでしたが、Windowsストアアプリでは、このようなUI構造は推奨していないようです。なるべく画面をシンプルにして、ボタン類はAppBarに配置して、必要な時だけ表示させるようにします。
AppBarにはBottomAppBarとTopAppBarがありますが、今回はBottomAppBarにボタンを追加してみます。
BottomAppBarが作成できたら、BottomAppBarにボタンを追加します。
四角いボタンが追加できましたが、他のWindowsストアアプリのAppBarのボタンを見てみると、ボタンが丸くなっています。これは、Styleを適用するだけで簡単に設定できます。
このスタイルを適用すると、ボタンに表示できる文字は1文字だけになります。表示する文字の変更は、プロパティの「共通」→「content」を変更します。
あと、ボタンが1つだけなら問題はあまりありませんが、1文字だけボタンに文字が書いていても何のことかさっぱり分からないので、下に説明文を追加することもできます。
この設定はプロパティからはできないので、XAMLに「AutomationProperties.Name」というプロパティを直接書き込みます。
以上でこの画面のUIは完了しました。
少し長くなりましたので、この辺りでエントリを区切りたいと思います。
次のエントリでは、ファイルピッカーの設定とUIへの適用を追っていきます。
次：[VB]Windows8のAppStoreアプリを作る（その1.5）
恐らくここからWindowsストアアプリを制作しようという方が見ても、何かの助けになるんじゃないでしょうか、という希望を込めて書き連ねます。
XAMLとはなんぞや
VS2010までのVBは、フォームのデザインもVBのコードでした。Windowsストアアプリは、画面の構成はXAMLで書き、プログラミングはVB（とかC++とかC#とかJavaScriptとか）で書くという風になりました。XAMLはXMLから派生したマークアップ言語のようなので、雰囲気としては、androidのプログラミングとやり方は変わらない気もしますね。JavaScriptでプログラムを書く場合は、HTML+CSSで画面を作ることができるようです。落ち着いたらこちらも試してみたい。
簡単なプログラムを作ってみる事にする
いくら説明を読んでも、手を動かさないといいコードは書けませんので、Hallo World的なプログラムを作ってみます。- 起動したら画像ファイルをオープンするダイアログを表示する
- ファイルは複数同時に選択できるようにし、選んだ画像はグリッドビューでサムネイル表示する
- グリッドビューに並べられたサムネイルをクリックすると、新しいページに遷移して、大きく表示する
VS2012を準備する
Windowsストアアプリを公開する手前までは、VS2012Expressエディションを利用して無料でプログラムを作ることができます。 → Visual Studio Express 2012 ダウンロード無料で利用できますが、VSの起動にアカウントが必要ですので、登録します。
誰でもダウンロードできて誰でもコードが書けるようにした方がストアアプリの本数が増えるような気がするんですけどねぇ。
無事起動できたら、「ファイル」から「新しいプロジェクト」を選びます。
左のカラムのリストから「インストール済み」→「Visual Basic」→「Windowsストア」と掘っていくと、真ん中のカラムに幾つかひな形が表示されます。
今回は一番上にある「新しいアプリケーション(XAML)」というテンプレートを使って進めていきます。
適当な名前を決めてプロジェクトを作成しましょう。
1枚目の画面を作る
最初の画面でする事をまとめると、- 起動したら画像ファイルをオープンするダイアログを表示する
- ファイルは複数同時に選択できるようにし、選んだ画像はグリッドビューでサムネイル表示する
最初の画面は、MainPage.xamlに設定していきます。ソリューションエクスプローラーでMainPage.xamlをダブルクリックでデザイナーを開きます。
左側にあるツールボックスからグリッドビューをデザイナーへドラッグ&ドロップするとグリッドビューの配置は完了です。位置の調整はmarginを調整して行いますが、計画的にUIを構築するなら、親グリッドのRowDefinitionを設定した方がスッキリします。
xamlファイルはXMLですので、ツールの配置をXMLに書くことで設定することもできます。
続いて、ファイルピッカーを開くためのボタンを配置します。
従来のWindowsのUIで行くと、ウィンドウの上部にボタンを並べる感じでしたが、Windowsストアアプリでは、このようなUI構造は推奨していないようです。なるべく画面をシンプルにして、ボタン類はAppBarに配置して、必要な時だけ表示させるようにします。
AppBarにはBottomAppBarとTopAppBarがありますが、今回はBottomAppBarにボタンを追加してみます。
BottomAppBarが作成できたら、BottomAppBarにボタンを追加します。
四角いボタンが追加できましたが、他のWindowsストアアプリのAppBarのボタンを見てみると、ボタンが丸くなっています。これは、Styleを適用するだけで簡単に設定できます。
このスタイルを適用すると、ボタンに表示できる文字は1文字だけになります。表示する文字の変更は、プロパティの「共通」→「content」を変更します。
あと、ボタンが1つだけなら問題はあまりありませんが、1文字だけボタンに文字が書いていても何のことかさっぱり分からないので、下に説明文を追加することもできます。
この設定はプロパティからはできないので、XAMLに「AutomationProperties.Name」というプロパティを直接書き込みます。
<Button Content="O" HorizontalAlignment="Left" AutomationProperties.Name="ファイルを開く"/>
以上でこの画面のUIは完了しました。
少し長くなりましたので、この辺りでエントリを区切りたいと思います。
次のエントリでは、ファイルピッカーの設定とUIへの適用を追っていきます。
次：[VB]Windows8のAppStoreアプリを作る（その1.5）
コメント
コメントを投稿