ListViewの表示ができるようになったところで、次は各項目をタッチした時の処理の追加だ。
ListViewにイベントハンドラを追加
"MainPage.xaml"の
<ListView x:Name="listview1" ItemsSource="{Binding}" Width="500" VerticalAlignment="Stretch" HorizontalAlignment="Left" CanReorderItems="True" CanDragItems="True" SelectionChanged="lisview1_SelectionChanged">
これで各項目をタッチすると、MainPage.xaml.csの"lisview1_SelectionChanged"が呼び出されるようになる。
イベントハンドラを実装
"MainPage.xaml.cs"に以下の様にイベントハンドラを実装する。
これで"selecteditem"に、タッチした項目の参照が引き渡される。
private void lisview1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
testitem selecteditem = (testitem) listview1.SelectedItem;
}
さてこういったUIの場合、よくあるのはこの項目を利用して新しい画面に遷移することだ。
Modern UIでは、各画面のことを"Page"、遷移を"Navigate"と呼んでいる。
新しいPageへ遷移する
遷移先の新しいページを作成する。
- "Solution Expolorer"で現在のプロジェクトを右クリックし、"Add"->"New Item"を選択する
- 例えば、"Basic Page"を選択する、名前は適当(Defaultは"BasicPage1.xaml")
上で実装したイベントハンドラを、以下の様に変更する。
これで、ListViewで選択された項目を新しいPageに引き渡して、遷移(Navigate)することができる。
private void lisview1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
this.Frame.Navigate(typeof(BasicPage1), (testitem) listview1.SelectedItem);
}
新しいPageで、引き渡した項目を利用するのには、"BasicPage1.xaml.cs"の navigationHelper_LoadStateを以下のように実装する。
ここもWindows8.1から作法が変わっている。
private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
testitem testitem = (testitem) e.NavigationParameter;
(以下、必要な処理)
}
各種書籍やウェッブの紹介資料では、下記の様に"LoadState"をOverrideするように紹介されている。
しかし、Windows8.1でこれをやると「そんなメソッドありまへんで、旦那」エラーになる。
protected override void LoadState(Object navigationParameter, DictionarypageState)
{
}
Basic Pageを追加すると、そのC#実装ファイルにいろいろとコメントが書かれている。
Windows8.1では、NavigationHelperを使用して画面遷移を処理するようになっているのだ。
///
/// NavigationHelper is used on each page to aid in navigation and
/// process lifetime management
///
コンストラクタを見ると以下の様になっており、上記のnavigationHelper_LoadStateを実装することで、画面遷移時の処理をすることができるようになっている。
public BasicPage1()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
this.navigationHelper.SaveState += navigationHelper_SaveState;
}