Windows8 Split

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

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

Split App(XAML)

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

  2. 後は規定値で [OK] をクリックすると、プロジェクトが構築されてソースコードが表示されます。
  3. そのまま右三角アイコンでコンパイル&実行します。
    規定値ではプロジェクトの文字と6個の Group Title が表示されます。
    それぞれの Group Title をクリックすると、グループ毎の Item Title が表示されます。

  4. Split App の制御の流れです。
    最初の画面から「Group Title:1 >」をクリックをクリックすると SplitPage に遷移します。
    テンプレートでは、どの Item Title も同じような内容ですが、Group/Item で構成されるアプリケーションの開発に利用します。
    今回は SplitPage を修正して、ここから目的のページに遷移します。
    App⇒ItemsPage(Group Title:)⇒SplitPage(Item Title:)⇒Item詳細
  5. 終了する(Windows マークのキーを押す)と Metro スタイルのスタート画面に戻ります。
    スタート画面に新しいタイル(アイコン画像)が追加されています。
    確認が終われば、アンインストールして下さい。
    タイル(アイコン画像)を選択して、右クリックで表示されるアンインストールアイコンをクリックします。
    従来はアンインストールしても、レジストリなどにゴミが残っていましたが、Windows8 ではその心配は無いようです。
    Windows10 でも同様のプログラム Split ⇒ Blank を作成しています。
    C++/CLI でも同様のプログラム Windows8 Split を作成しています。

BlankPage に遷移

  1. Split 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)
    ・ Click= "Button_Click_1" 戻るボタン
  3. BlankPage1.xaml.cs のボタンにクリックイベントを設定して下さい。
    クリックイベントに元のページに戻るコードを書きます。
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(SplitPage), "Group-1");
        }
        
  4. SplitPage.xaml.cs に BlankPage1 に遷移するコードをコーディングします。
    ItemListView_SelectionChanged() がマウスのクリックを検出するメソッドです。
    Grid App(XAML) では ItemView_ItemClick() でしたが、Split App(XAML) では ItemListView_SelectionChanged() が使われています。
    ItemView_ItemClick() に変更することも出来るのですが、そのまま使うことにします。
        void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (this.UsingLogicalPageNavigation()) this.InvalidateVisualState();
            this.Frame.Navigate(typeof(BlankPage1), "AllGroups");
        }
        
  5. アイテムをクリックすると BlankPage1 に遷移します。
    ItemListView_SelectionChanged() を使うと、SplitPage に遷移したとき先頭アイテムが選択状態になっていることがあります。
    Navigate するときは、右クリックで解除してから左クリックして下さい。
    BlankPage に張り付けたボタンをクリックすると SplitPage に遷移します(戻る)。
    App⇒ItemsPage⇒SplitPage⇒BlankPage⇒SplitPage
    Grid App(XAML) でも同様のプログラムを作成しています。

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