Xamarin.Forms 向けのピッカーコントロールを作った

iOS の UIPickerView、 Android の NumberPicker は Xamarin.Forms では、標準コントロールで用意されていないみたいだったので Custom Renderer で作りました。

特に nuget パッケージとかにはしてなくて、サンプルアプリと一緒になってます（><）

こんな感じのコントロールです。

こんな感じで使えます。

ItemsSource と SelectedIndex の２つのバインダブルなプロパティしかなくて、SelectedIndex の方は TwoWay です。

<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PickerViewSample"
             x:Class="PickerViewSample.PickerViewSamplePage"
			 Title="PickerView Sample">

    <ContentPage.BindingContext>
        <local:Model />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:ItemsSourceConverter x:Key="itemsConv"/>
        </ResourceDictionary>
    </ContentPage.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <local:PickerView
            Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
            ItemsSource="{Binding ItemsSource, Converter={StaticResource itemsConv}}"
            SelectedIndex="{Binding SelectedIndex}" />

        <Label Grid.Row="1" Grid.Column="0" Text="ItemsSource" />
        <Entry Grid.Row="1" Grid.Column="1" Text="{Binding ItemsSource, Mode=TwoWay}" />

        <Label Grid.Row="2" Grid.Column="0" Text="SelectedIndex" />
        <Entry Grid.Row="2" Grid.Column="1" Text="{Binding SelectedIndex, Mode=TwoWay}" />
    </Grid>
</ContentPage>

ソースコードは、

• amay077/Xamarin_Forms_PickerViewSample

にありますので、 Fork などして使ってください。

iOS の UIPickerView は、それ自体が複数の列を持てるようですが、Android のはそうではないので、１列しか使ってません。

Custom Renderer のサンプルにもなると思います。

追記: PickerView を並べて数値を選択する UI も作った

ソースコードは上と同じギッハブにあります。