シンプルな Metro スタイルアプリケーションを作成する - Windows開発

シンプルなMetro アプリケーションを作成します。

Visual Studio 2012 RC

Visual Studio 2012 RC版を起動します。


[ファイル]メニューの[新規作成]の[プロジェクト]メニューを選択します。


[新しいプロジェクト]ダイアログボックスが表示されます。


テンプレートからMetroアプリケーションのテンプレートを選択します。今回は[Visual C#]の[Windows Metro Style]の[Blank App]テンプレートを選択します。選択ができたらダイアログ下部の[OK]ボタンを押します。


プロジェクトの作成が始まります。


Windows 8 開発者用ライセンスの取得ダイアログが表示されます。ダイアログボックス下部の[同意します]ボタンを押してライセンスを取得します。


ライセンス取得中。


ライセンスの取得にはMicrosoft アカウントでのサイインインが必要になります。MicrosoftアカウントのIDとパスワードを入力し、[サインイン]ボタンを押します。


Windows 8 開発者ライセンスの取得が完了すると下図のダイアログが表示されます。[閉じる]ボタンを押してダイアログボックスを閉じます。


プロジェクトが作成されました。プロジェクトを実行します。


プロジェクトが実行されます。下図のスプラッシュスクリーンが表示されます。


ブランクアプリケーションのため何も表示されない画面が表示されました。

Visual Studio 11 Beta

Visual Studio 11 Betaを起動します。


[ファイル]メニューの[新規作成]サブメニューの[プロジェクト]を選択します。


[新しいプロジェクト]ダイアログボックスが表示されます。


左側のテンプレートの一覧から[Windows Metro syle]を選択します。ダイアログが下図に変わります。


ちなみにWindows 7にVisual Studio 11 Betaをインストールした場合にはテンプレート一覧に[Windows Metro style]カテゴリは表示されません。


Windows Metro styleのテンプレートを確認します。マルチページのアプリケーションを作成する"グリッド アプリケーション"


レイアウト未定義、またはコントロールのないレイアウトアプリケーションを作成する"新しいアプリケーション"


2ページのアプリケーションを作成する"分割アプリケーション"


クラスライブラリ


単体テストライブラリ

が選択できます。

今回は"新しいアプリケーション"を選択してからのアプリケーションを作成します。プロジェクトの作成ができると下図の画面が表示されます。画面上部の右三角アイコンをクリック、または[デバッグ]メニューの[デバッグ開始]メニューを選択してアプリケーションを実行します。


下図のスプラッシュ画面が表示されます。


アプリケーションが起動できました。何も実装していないため黒一色の画面が表示されます。


Windowsキーを押してスタート画面に戻ります。右下に作成したアプリケーション"Application1"のタイルが表示されていることがわかります。


Visual Studio 11 BetaのタイルをクリックしてVisual Studioに戻ります。ツールバーのデバッグ終了ボタンを押すか、[デバッグ]メニューの[デバッグの中止]メニューを選択しデバッグを終了します。
画面右の[ソリューションエクスプローラ]から"BlankPage.xaml"ファイルを開きます。ファイルを開くと下図の画面が表示されます。


画面左側のツールボックスから、"TextBlock"コントロールを中央のデザイナ画面にドラッグ＆ドロップします。デザイナ画面にTextBlockが配置された状態が下図です。


右下の[プロパティ]ウィンドウから[テキスト]カテゴリを選択し、フォントサイズを"48px"に変更します。フォントサイズ変更等同時にデザイナ画面の文字も大きくなります。


続いて[プロパティ]ウィンドウの[共通]カテゴリを選択します。"Text"プロパティのテキストボックスの内容をtextBlockから変更します。


今回は"Hello Metro App World"に変更しました。テキストボックスの値を変更するとデザイナ画面のTextBlockの文字列も変更されます。


アプリケーションを実行します。デザイナ画面で作成したTextBlockの内容が画面に表示されることが確認できました。


シンプルなMetroスタイルのアプリケーションの作成ができました。