Windows8 Grid

Windows8 C++(Store) の Grid App(XAML) です。

前田稔の超初心者のプログラム入門

Windows8

  1. ストア アプリのプロジェクトには、何種類かのテンプレートが用意されているので、これを利用する方法から学びましょう。
    次は Grid App(XAML) をテンプレートとして使います。
    Windows8 のスタート画面から [Microsoft Visual Express 2012 for Windows8] を起動します。
    [FILE] [New Project] から [Visual C++] を選択して、Grid App(XAML) を選びます。

  2. 後は規定値(App1)で [OK] をクリックすると、プロジェクトが構築されてソースコードが表示されます。
    App1 が既に存在するときは、規定値が App2 になります。
    そのまま右三角アイコンでコンパイル&実行します。
    規定値ではプロジェクトの文字と幾つかのタイル(アイコン画像)が整然と並んで表示されます。

  3. Grid App の制御の流れです。
    最初の画面から「Group Title:1」をクリックをクリックすると GroupDetailPage に遷移します。
    App⇒GroupedItemsPage⇒GroupDetailPage⇒ItemDetailPage(詳細画面)
    アイテムを直接クリックすると GroupDetailPage を飛ばして詳細画面に遷移します。
    今回は GroupDetailPage を修正するので、飛ばさないように注意して下さい。
  4. 確認が終われば、アンインストールして下さい。
    追加されたタイルを右クリックして、表示されたアンインストールアイコンを選択します。
    C#でも同様のプログラム Windows8 Grid を作成しています。

Hello を表示

  1. 自動生成されるプロジェクト「Grid App(XAML)」で MessageDialog を使って Hello を表示します。
    上記で作成したプロジェクトを修正することにします。
  2. App1.sln(App2.sln) をダブルクリックして起動します。
    GroupDetailPage.xaml.cs の ItemView_ItemClick() メソッドを修正します。
    修正前
    void GroupDetailPage::ItemView_ItemClick(Object^ sender, ItemClickEventArgs^ e)
    {
        (void) sender;  // 未使用のパラメーター
        auto itemId = safe_cast(e->ClickedItem)->UniqueId;
        Frame->Navigate(TypeName(ItemDetailPage::typeid), itemId);
    }
    
    修正後
    void GroupDetailPage::ItemView_ItemClick(Object^ sender, ItemClickEventArgs^ e)
    {
        auto dlg = ref new Windows::UI::Popups::MessageDialog("Hello World");
        dlg->ShowAsync();
    }
    
  3. Grid App 画面の「Group Title:1」の文字をクリックして「Item Title:1~Item Title:n」を表示します。
    Item をクリックすると "Hello World" が表示されます。
    Group や Item を識別していないので、どの項目をクリックしても同じです。
    Group, Item を識別する方法は C# のプログラムを参照して下さい。
  4. 確認が終われば、アンインストールして下さい。
    追加されたタイルを右クリックして、表示されたアンインストールアイコンを選択します。

超初心者のプログラム入門(C/C++)