List View Navi

ListView のクリックで Navigate します。

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

ListView で Navigate

  1. ListView のクリックで Navigate(遷移)します。
    Visual Studio を起動して [FILE][New Project] から [空白アプリ(ユニバーサル Windows)] を選びプロジェクトを構築します。
    MainPage.xaml をダブルクリックしてレイアウトウインドウを表示します。
  2. 画像を参考に TextBox, ListView, Button を貼り付けます。

    ツールName説明
    TextBox textBox 入力用 TextBox
    ListView listView List View Item
    Button button Button
    TextBox TextBoxOut 表示用 TextBox
  3. MainPage.xaml.cs の Constructor から ListView にアイテムを登録する ListItemAdd() 関数を呼び出します。
        public MainPage()
        {
            this.InitializeComponent();
            ListItemAdd();
        }
    
  4. SampleConfiguration.cs に ListItemAdd() 関数をプログラムしてプロジェクトに加えます。
    partial class MainPage として宣言され、MainPage で宣言した他の Class と一つにまとめられます。
    using System;
    using System.Collections.Generic;
    using Windows.UI.Xaml.Controls;
    
    namespace App1
    {   public partial class MainPage : Page
        {   private void ListItemAdd()
            {
                listView.Items.Add("1) Scenario1");
                listView.Items.Add("2) Scenario2");
                listView.Items.Add("3) Scenario3");
            }
        }
    }
    
  5. ListView のアイテムクリックを検出するイベントハンドラを設定します。
    MainPage.xaml のレイアウトウインドウを表示します。
    ListView を選択して、稲妻アイコンから ItemClick に List_Click とタイプします。
    また ListView の [その他の指定] から IsItemClickEnabled をチェックして下さい。
    (英語版では [Arrange by: Source] の [Other] から IsItemClickEnabled をチェック)
  6. MainPage.xaml.cs に ListView の Click を検出するイベントハンドラをコーディングします。
    ListView に登録した string を調べて Navigate() 関数で呼び出します。
        private void List_Click(object sender, ItemClickEventArgs e)
        {
            string str = e.ClickedItem.ToString();
            if (str == "1) Scenario1")
                this.Frame.Navigate(typeof(Scenario1), "AllGroups");
            else if (str == "2) Scenario2")
                this.Frame.Navigate(typeof(Scenario2), "AllGroups");
            else
                this.Frame.Navigate(typeof(Scenario3), "AllGroups");
        }
    
  7. [Add][New Item] から [Blank Page] で シナリオ(Scenario1~Scenario3)を追加します。
    Scenario ページには TextBlock(シナリオを識別する適当なメッセージ)と Button を張り付けて下さい。
    Scenario1.xaml の例です。
        <Grid>
            <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="125,81,0,0" Text="Scenario1"
                TextWrapping="Wrap" VerticalAlignment="Top" Width="479" Height="124" FontSize="48"/>
            <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="164,275,0,0"
                VerticalAlignment="Top" Click="button_Click"/>
        </Grid>
    
  8. Scenario の button_Click() 関数をコーディングします。
        public sealed partial class Scenario1 : Page
        {   public Scenario1()
            {   this.InitializeComponent();  }
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {   }
            private void button_Click(object sender, RoutedEventArgs e)
            {   this.Frame.Navigate(typeof(MainPage), "AllGroups");  }
        }
    
  9. ListView の Scenario1~Scenario3 をクリックするとナビゲートします。
    Scenario ページのボタンのクリックで MainPage に戻ります。

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