Xamarin.FormsでカスタムPicker
Xamarin.FormsでPickerを使いたかったのですが、
・表示をカスタマイズしたい。
・ピックする直前に選択する候補を選びたい。
などをしたかったのでデフォルトのPickerをそのまま使うのではちと都合悪く。
いろいろググっていたらこちらの
How to Create a Custom Color Picker for Xamarin.Forms | ComponentOne
が見つかったのですが、そこの中でやってるようなタップイベントを拾って非表示にしてたPickerにFocusをあてるやり方だと何回か表示された後、AndroidでもiOSでもFocusあてなおしても表示されなくなる現象がが。
カスタムレンダラーでどうにかしようかとかも思ったのですが、大げさになるしめんどくさく。
どうしたものかと思ってたのですが、タップされるたびにPickerを生成して表示したらどうかと思ったら今のところ良い感じ表示されなくなることもなく動いてます。
コードは以下のような感じに。
<Grid x:Name="_pickerGrid"> <BoxView BackgroundColor="Red"/> <Label Text="Hoge" TextColor="White" x:Name="_label"></Label> </Grid>
_label.GestureRecognizers.Add( new TapGestureRecognizer() { Command=new Command(() => { var _picker=new Picker() { Opacity=0.1, }; _picker.SelectedIndexChanged += _picker_OnSelectedIndexChanged; foreach(var i in Enumerable.Range(1,5)) _picker.Items.Add(i.ToString()); _pickerGrid.Children.Add(_picker); _picker.Focus(); }) });
画面はこんな感じに。
ラベルをタップしたらこんな感じに。
非表示された後Gridから削除するなど必要ですが、ひとまず何とかなりそうということで後ほど…(´・ω・`)
追記:
下記のように変えました。
_curPickerと取っといて、あったら削除するように。OPacity=0.1だとまだ見えてたので表示してから0に。
こんな感じのもとに使いやすいようなコントロールにカプセル化するところでよしなにすればよいかと。
あとは表示時にSelectedIndexを既選択のものにする処理が必要と思われ…
_label.GestureRecognizers.Add( new TapGestureRecognizer() { Command=new Command(() => { if (_curPicker != null) _pickerGrid.Children.Remove(_curPicker); var picker = new Picker(); picker.SelectedIndexChanged += _picker_OnSelectedIndexChanged; foreach(var i in Enumerable.Range(1,5)) picker.Items.Add(i.ToString()); _pickerGrid.Children.Add(picker); picker.Unfocused += (sender, e) => picker.IsVisible=false; picker.Focus(); picker.Opacity = 0; _curPicker = picker; }) });