Group, Item を識別

Split で Group, Item を識別します。

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

プロジェクトの作製

  1. Split ⇒ Blank をベースに Group, Item を識別して Navigate します。
    Split App1 のプロジェクトをコピーして、フォルダー名を App2 に変更して下さい。
    変更はフォルダー名だけにして下さい。
    元のプロジェクト名("App1")は多くの箇所で使われているので、下手にさわると動かなくなります。
  2. 修正は Windows8 Split Navi を参考にします。
    Navigate する BlankPage2, BlankPage3 を追加して下さい。
    BlankPage2 に TextBox を貼り付けて、緑色に設定します。
    ツールから Button を貼り付けて Button_Click のイベントハンドラを設定します。
    BlankPage3 に TextBox を貼り付けて、青色に設定します。
    ツールから Button を貼り付けて Button_Click のイベントハンドラを設定します。
    BlankPage1(赤)は既に作成されています。
  3. 赤と緑の Button Click メソッドです。
    BlankPage からは SplitPage に戻ります。
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(SplitPage), "Group-1");
        }
    
    青の BlankPage からは ItemsPage に遷移してみましょう。
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(ItemsPage), "AllGroups");
        }
    
  4. SplitPage.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();
            if (e.PageState == null)
            {
                this.itemListView.SelectedItem = null;
                if (!this.UsingLogicalPageNavigation() && this.itemsViewSource.View != null)
                {
                    this.itemsViewSource.View.MoveCurrentToFirst();
                }
            }
            else
            {
                if (e.PageState.ContainsKey("SelectedItem") && this.itemsViewSource.View != null)
                {
                    var selectedItem = await SampleDataSource.GetItemAsync((String)e.PageState["SelectedItem"]);
                    this.itemsViewSource.View.MoveCurrentTo(selectedItem);
                }
            }
        }
    
  5. SplitPage.xaml.cs の ItemListView_SelectionChanged() 関数に Group, Item を識別して BlankPage に遷移するコード書きます。
        void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (g_str == "Group Title: 1")
            {
                int n = itemListView.SelectedIndex;
                switch (n)
                {
                    case 0:
                        this.Frame.Navigate(typeof(BlankPage1), "AllGroups");   //赤
                        break;
                    case 1:
                        this.Frame.Navigate(typeof(BlankPage2), "AllGroups");   //緑
                        break;
                    case 2:
                        this.Frame.Navigate(typeof(BlankPage3), "AllGroups");   //青
                        break;
                }
            }
            else
            {
                if (this.UsingLogicalPageNavigation()) this.InvalidateVisualState();
                this.Frame.Navigate(typeof(BlankPage1), "AllGroups");
            }
        }
    
  6. Title を設定します。
    プロジェクトフォルダの DataModel\SampleData.json で定義されています。
    {"Groups":[
      {
        "UniqueId": "Group-1",
        "Title": "Group Title: 1",
        "Subtitle": "Group subtitle: 1",
        "ImagePath": "Assets/DarkGray.png",
        "Description" : "Group Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante",
        "Items":
        [
          {
            "UniqueId": "Group-1-Item-1",
            "Title": "Item Title: 1",
            "Subtitle": "Item Subtitle: 1",
            "ImagePath": "Assets/LightGray.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" : "Blank Page1\n\n Red Page"
          },
          {
            "UniqueId": "Group-1-Item-2",
            "Title": "Item Title: 2",
            "Subtitle": "Item Subtitle: 2",
            "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" : "Blank Page2\n\n Green Page"
          },
          {
            "UniqueId": "Group-1-Item-3",
            "Title": "Item Title: 3",
            "Subtitle": "Item Subtitle: 3",
            "ImagePath": "Assets/MediumGray.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" : "Blank Page3\n\n Blue Page"
          },
          {
            "UniqueId": "Group-1-Item-4",
            ・・・ これ以降はそのままにします
    
  7. 最初の画面から「Group Title:1 >」をクリックをクリックすると SplitPage に遷移します。
    SplitPage からアイテムをクリックすると Blank Page に Navigate(遷移)します。
    ItemListView_SelectionChanged() では、SplitPage を開くと「先頭アイテムが選択状態」になっていることがあります。
    Navigate するときは、右クリックで解除してから左クリックして下さい。
  8. 「スタート」ボタンから[すべてのアプリ]を選ぶと今作製したアプリが登録されています。
    残しておく必要がなければ右クリックからアンインストールして下さい。
    Windows8 でも同様のプログラム Windows8 Split Navi を作成しています。

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