Group, Item を識別

Grid で Group, Item を識別して Navigate します。

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

プロジェクトの作製

  1. Grid ⇒ Blank をベースに Group, Item を識別して Navigate します。
    Grid App1 のプロジェクトをコピーして、フォルダー名を App2 に変更して下さい。
    変更はフォルダー名だけにして下さい。
    元のプロジェクト名("App1")は多くの箇所で使われているので、下手にさわると動かなくなります。
  2. 修正は Group, Item を識別 を参考にします。
    Navigate する BlankPage2, BlankPage3 を追加して下さい。
    BlankPage2 に TextBox を貼り付けて、緑色に設定します。
    ツールから Button を貼り付けて Button_Click_1 のイベントハンドラを設定します。
    BlankPage3 に TextBox を貼り付けて、青色に設定します。
    ツールから Button を貼り付けて Button_Click_1 のイベントハンドラを設定します。
    BlankPage1(赤)は既に作成されています。
  3. 赤と緑の Button Click メソッドです。
    BlankPage からは GroupDetailPage に戻ります。
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(GroupDetailPage), "Group-1");
        }
    
    青の BlankPage からは GroupedItemsPage に遷移してみましょう。
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(GroupedItemsPage), "AllGroups");
        }
    
  4. GroupDetailPage.xaml.cs の navigationHelper_LoadState() メソッドで Group を取得します。
        string g_str;
        private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {
            var group = await SampleDataSource.GetGroupAsync((String)e.NavigationParameter);
            this.DefaultViewModel["Group"] = group;
            this.DefaultViewModel["Items"] = group.Items;
            g_str = group.Title.ToString();
        }
    
  5. GroupDetailPage.xaml.cs から Group, Item を識別して BlankPage に Navigate します。
        void ItemView_ItemClick(object sender, ItemClickEventArgs e)
        {
            string str = e.ClickedItem.ToString();
            var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
            if (g_str == "Group Title: 1")
            {
                if (str == "Item Title: 1")
                    this.Frame.Navigate(typeof(BlankPage1), "AllGroups");
                else if (str == "Item Title: 2")
                    this.Frame.Navigate(typeof(BlankPage2), "AllGroups");
                else if (str == "Item Title: 3")
                    this.Frame.Navigate(typeof(BlankPage3), "AllGroups");
                else
                    this.Frame.Navigate(typeof(ItemDetailPage), itemId);
            }
            else    //以外のときは、元のコードで Navigate 
                this.Frame.Navigate(typeof(ItemDetailPage), itemId);
        }
    
  6. Title を設定します。
    プロジェクトフォルダの SampleData.json で定義されています。
          {
            "UniqueId": "Group-1-Item-1",
            "Title": "Item Title: 1",
            "Subtitle": "Item Subtitle: 1",
            "ImagePath": "Assets/LightGray.png",
            "Description" : "Item Description: Blank Page1 Red Page.",
            "Content" : "Blank Page1\n\nRed Page"
          },
          {
            "UniqueId": "Group-1-Item-2",
            "Title": "Item Title: 2",
            "Subtitle": "Item Subtitle: 2",
            "ImagePath": "Assets/DarkGray.png",
            "Description" : "Item Description: Blank Page2 Green Page.",
            "Content" : "Blank Page2\n\nGreen Page"
          },
          {
            "UniqueId": "Group-1-Item-3",
            "Title": "Item Title: 3",
            "Subtitle": "Item Subtitle: 3",
            "ImagePath": "Assets/MediumGray.png",
            "Description" : "Item Description: Blank Page3 Blue Page.",
            "Content" : "Blank Page3\n\nBlue Page"
          },
          {
            "UniqueId": "Group-1-Item-4",
            "Title": "Item Title: 4",
            "Subtitle": "Item Subtitle: 4",
            "ImagePath": "Assets/DarkGray.png",
            "Description" : "Item Description: Pellentesque porta, mauris quis interdum vehicula, 
                            urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere,
                            enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.",
            "Content" : ・・・ これ以降はそのままにします
    
  7. 最初の画面から Group Title:1 をクリックすると GroupDetailPage に遷移します。
    GroupDetailPage からアイテムをクリックすると Blank Page に Navigate(遷移)します。
    Group, Item を識別して BlankPage1, BlankPage2, BlankPage3 に Navigate することを確かめて下さい。
    App⇒GroupedItemsPage⇒GroupDetailPage⇒BlankPage⇒・・・
    
    BlankPage1, BlankPage2 からは GroupDetailPage に戻ります。
    BlankPage3 からは GroupedItemsPage に戻ります。
  8. 「スタート」ボタンから[すべてのアプリ]を選ぶと今作製したアプリが登録されています。
    残しておく必要がなければ右クリックからアンインストールして下さい。

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