[Xamarin][CrossPlatform][Control] Picker

Pickerコントロールを使用すると複数の項目を表示してユーザーに選択させることができるようになります。外観はDatePickerやTimePickerに似ています。

以下にXAMLの例を示します。この例ではPickerに元号を表示する例です。選択項目は<Picker.Items>の中に<s:String>で配置しています。

<Picker x:Name="picker">
  <Picker.Items>
    <x:String>明治</x:String>
    <x:String>大正</x:String>
    <x:String>昭和</x:String>
    <x:String>平成</x:String>
  </Picker.Items>
</Picker>

項目が選択された場合はSelectedIndexChangedイベントが発生します。

以下は、上記XAMLで選択された元号を表示する例です。

選択した項目はItemsプロパティで取得することができます。選択された項目のインデックスはSelectedIndexプロパティで取得します。

public MainPage()
{
    InitializeComponent();

    picker.SelectedIndexChanged += (sender, e) =>
    {
        DisplayAlert("選択された項目", picker.Items[picker.SelectedIndex].ToString(), "OK");
    };
}

 

[Xamarin][CrossPlatform][Control] Editor

Editorコントロールは複数行のテキスト入力をするためのコントロールです。

テキストはTextプロパティを使用して取得と設定をすることができます。また高さはHeightRequestプロパティで、背景色は黄色で設定することができます。

以下に例を示します。

<StackLayout>
  <Editor x:Name="editor" 
          HeightRequest="150" 
          BackgroundColor="Yellow" />
</StackLayout>

Editorの使用例

 

Xamarin][CrossPlatform][Control] Entry

Entryコントロールを使用すると、単一行のテキストを入力することができます。

テキストの表示や取得はTextプロパティを使用します。プレースホルダ(薄い文字)を設定することも可能で、子の場合はPlaceholderプロパティに設定します。

またパスワード入力用としても使用することができます。子の場合はIsPasswordプロパティにTrueを設定します。

以下は2つのEntryコントロールを配置する例です。

上のEntryコントロールはユーザーID入力用、下のEntryコントロールはパスワード入力用として配置しています。

<StackLayout Padding="10,30,10,0">
  <Entry x:Name="entryId" Placeholder="ユーザーID" />
  <Entry x:Name="entryPassword" IsPassword="True" />

  <Button x:Name="btnGetInfo" Text="情報の取得"/>
</StackLayout>

[情報の取得]ボタンをクリックしたときに、入力された内容を取得する例を以下に示します。

public MainPage()
{
    InitializeComponent();

    btnGetInfo.Clicked += (sender, e) =>
    {
        string info = $"{entryId.Text}:{entryPassword.Text}";
        DisplayAlert("入力情報", info, "OK");
    };
}

Entryの使用例

入力情報の取得