Pickerとは?
PickerとはWindowsFormsで言うところのコンボボックスのような感じです。複数の文字列のリストから一つを選択するコントロールです。
準備
今回はPickerPageというコンテンツページを作成して検証していきたいと思います。ここまで順番に解説をよんでいただいている方は,PickerPageという新規のコンテンツページを作って,ControlsPageから呼び出せるようにしてください。ここから初めて読んでいる方は,Xamarin.Formsのデフォルトで作成されるMainPageにPickerPageの実装をして問題ありません。
using System.Collections.Generic; using Xamarin.Forms; using Xamarin.Forms.Xaml; using XSample.Objects; namespace XSample.Pages { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class ControlsPage : ContentPage { public ControlsPage() { InitializeComponent(); var items = new List<MenuDto>(); items.Add(new MenuDto("SwitchPage", "Switchの使い方", "mail.png")); items.Add(new MenuDto("PickerPage", "Pickerはコンボボックスのような感じ。", "mail.png")); MyListView.ItemsSource = items; } private void MyListView_ItemTapped(object sender, ItemTappedEventArgs e) { var item = e.Item as MenuDto; if (item.Title == "SwitchPage") { Navigation.PushAsync(new SwitchPage()); } else if (item.Title == "PickerPage") { Navigation.PushAsync(new PickerPage()); } } } }
PickerPageの追加
Pagesフォルダーに新規追加でPickerPageという名前のコンテンツページを作成してください。作成されたらデフォルトのラベルを削除して,次のように記述します。
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XSample.Pages.PickerPage"> <ContentPage.Content> <StackLayout> <Picker x:Name="MyPicker" SelectedIndexChanged="MyPicker_SelectedIndexChanged"> <Picker.Items> <x:String>TEL</x:String> <x:String>FAX</x:String> <x:String>Mail</x:String> </Picker.Items> </Picker> </StackLayout> </ContentPage.Content> </ContentPage>
Pickerを作成し名前をMyPickerにします。
Picker.Items
Picker.Itemsというエリアを作成し,その中にリストに表示したい文字列を好きなだけ入れます。今回はTEL,FAX,Mailとしています。
SelectedIndexChanged
リストの選択状態が変更されたときに何か処理をしたいのであれば,SelectedIndexChangedをコードビハインド側に実装することで処理することができます。今回は,リストの選択状態が変わったタイミングで,変更後の値をメッセージ表示するようにしています。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; using Xamarin.Forms.Xaml; namespace XSample.Pages { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class PickerPage : ContentPage { public PickerPage () { InitializeComponent (); } private void MyPicker_SelectedIndexChanged(object sender, EventArgs e) { var val = MyPicker.Items[MyPicker.SelectedIndex]; DisplayAlert("選択アイテム", val, "OK"); } } }
SelectedIndexChangedのイベント引数はEventArgs型なので,特にコントロールの変化に対する情報はもっていません。そのため,イベントの中でPickerのSelectedIndexから現在の選択インデックスを取得し,そのからItemsの文字列を抜き出しています。
- C#Xamarin.Formsでスマホ開発#01プロジェクト作成の方法
- C#Xamarin.Formsでスマホ開発#02プロジェクトの実行【Android実機編】
- C#Xamarin.Formsでスマホ開発#03エミュレーターでのAndroid接続
- C#Xamarin.Formsでスマホ開発#04 UWPの実行
- C#Xamarin.Formsでスマホ開発#05マルチスタートアッププロジェクトの設定
- C#Xamarin.Formsでスマホ開発#06 StackLayoutの使い方を解説
- C#Xamarin.Formsでスマホ開発#07 VerticalOptionsとHorizontalOptionsの使い方
- C#Xamarin.Formsでスマホ開発#08文字色&背景色とFontsizeの使い方
- C#Xamarin.Formsでスマホ開発#09 Gridの使い方
- C#Xamarin.Formsでスマホ開発#10画面遷移のやり方
- C#Xamarin.Formsでスマホ開発#11 TabbedPageの作り方
- C#Xamarin.Formsでスマホ開発#12 TabbedPageの中身の作り方
- C#Xamarin.Formsでスマホ開発#13 MasterDetailPageの作り方
- C#Xamarin.Formsでスマホ開発#14 ListViewの作り方
- C#Xamarin.Formsでスマホ開発#15 CarouselPageの作り方
- C#Xamarin.Formsでスマホ開発#16 DisplayAlertの使い方
- C#Xamarin.Formsでスマホ開発#17 DisplayActionSheetの使い方
- C#Xamarin.Formsでスマホ開発#18 Deviceごとの処理切り替え方法
- C#Xamarin.Formsでスマホ開発#19 LoadとCloseに代わるもの
- C#Xamarin.Formsでスマホ開発#20 戻るボタンを非表示にする
- C#Xamarin.Formsでスマホ開発#21 ViewCellの共通化のやり方
- C#Xamarin.Formsでスマホ開発##22 Switchの使い方を解説
- C#Xamarin.Formsでスマホ開発#23 コントロールをデータバインドする方法
- C#Xamarin.Formsでスマホ開発#24 Sliderの使い方を解説
- C#Xamarin.Formsでスマホ開発#25 Stepperの使い方を解説
- C#Xamarin.Formsでスマホ開発#26 Entryの使い方を解説
- C#Xamarin.Formsでスマホ開発#27 Editorの使い方を解説
- C#Xamarin.Formsでスマホ開発#28 Pickerの使い方を解説
- C#Xamarin.Formsでスマホ開発#29 Pickerでデータバインディングする方法
- C#Xamarin.Formsでスマホ開発#30 DatePickerとTimePickerの使い方
- C#Xamarin.Formsでスマホ開発#31 SearchBarの使い方を解説
- C#Xamarin.Formsでスマホ開発#32 ToolbarItemの使い方を解説
- C#Xamarin.Formsでスマホ開発#33 TableViewの使い方を解説
- C#Xamarin.Formsでスマホ開発#34 ActivityIndicatorの使い方を解説
- C#Xamarin.Formsでスマホ開発#35 ListViewを下に引っ張て更新する方法