Windows8 Grid

Grid App(XAML) をテンプレートに使います。

前田稔(Maeda Minoru)の超初心者のプログラム入門

Grid App(XAML)

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

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

  3. Grid App の制御の流れです。
    最初の画面から「Group Title:1 >」をクリックをクリックすると GroupDetailPage に遷移します。
    App⇒GroupedItemsPage⇒GroupDetailPage⇒ItemDetailPage(詳細画面)
    最初の画面からアイテムをクリックすると GroupDetailPage を飛ばして詳細画面に遷移します。
    今回は GroupDetailPage を捕まえて BlankPage に遷移するので、飛ばさないように注意して下さい。
  4. 終了する(Windows マークのキーを押す)と Metro スタイルのスタート画面に戻ります。
    スタート画面に新しいタイル(アイコン画像)が追加されています。
    確認が終われば、アンインストールして下さい。
    タイル(アイコン画像)を右クリックして、表示されるアンインストールアイコンをクリックします。
    従来はアンインストールしても、レジストリなどにゴミが残っていましたが、Windows8 ではその心配は無いようです。

BlankPage に遷移

  1. Grid App(XAML) のプロジェクトは結構複雑で、何から手を付けたら良いか戸惑いますが、 Item Title のクリックで BlankPage に遷移する方法から説明しましょう。
    ベースとなるのは、上記で構築したプロジェクトです。
  2. プロジェクトを起動して遷移する Blank Page を追加します。
    Blank Page の作成は List Navigate を参照して下さい。
    遷移するウインドウの TextBox は文字のサイズと色を変えます。
    ・ [Arrange by:Category][Text] 「適当な TEXT 文章」
    ・ [Brush Background][Editor] 背景色
    ・ [Arrange by:Name][FontSize] 文字のサイズ(50)
  3. Blank Page に GroupDetailPage に戻る Button を貼り付けます。
    ボタンにクリックイベント(Button_Click_1)を設定して下さい。
    Button_Click_1 に GroupDetailPage に戻るコードを書きます。
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(GroupDetailPage), "Group-1");
        }
        
  4. GroupDetailPage.xaml.cs に BlankPage1 に遷移するコードを書きます。
    ItemView_ItemClick() 関数を次のように修正して下さい。
    修正前
        void ItemView_ItemClick(object sender, ItemClickEventArgs e)
        {   var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
            this.Frame.Navigate(typeof(ItemDetailPage), itemId);
        }
        
    修正後 MessageDialog で、この関数が呼ばれたときの ClickedItem を確認しています。
        void ItemView_ItemClick(object sender, ItemClickEventArgs e)
        {   string str = e.ClickedItem.ToString();
            Windows.UI.Popups.MessageDialog dlg =
                new Windows.UI.Popups.MessageDialog(str);
            dlg.ShowAsync();
            this.Frame.Navigate(typeof(BlankPage1), "AllGroups");
        }
        
  5. GroupDetailPage からアイテムをクリックすると BlankPage1 に遷移します。
    Group や Item を識別していないので、どの項目をクリックしても同じように Navigate します。
    BlankPage1 に張り付けたボタンをクリックすると GroupDetailPage に戻ります(遷移する)。
    App⇒GroupedItemsPage⇒GroupDetailPage⇒BlankPage1⇒GroupDetailPage
    Grid ⇒ Blank Split App(XAML) でも同様のプログラムを作成しています。

超初心者のプログラム入門(C# Frame Work)