[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の使用例

入力情報の取得

[Xamarin][CrossPlatform][Control] TimePicker

TimePickerを使用すると時刻を選択することができます。

使用方法は簡単で、画面レイアウトに配置するだけです。時刻の取得や設定はTimeプロパティを使用します。

以下に例を示します。

<StackLayout>
  <Label x:Name="lblSelectedTime" />
  <TimePicker x:Name="timePicker" Format="HH:mm" />
</StackLayout>

時刻が選択されたことを知るにはPropertyChangedイベントを使用します(TimeSelecedもしくはTimeChangedというイベントがあれば良いのですが、なぜか備わっていません)。

PropertyChangedイベントは、プロパティの変更があった場合に発生するイベントですので、使用する際には注意が必要です。

以下は画面上部に配置したLabelに選択した時刻を表示する例です。

public MainPage()
{
    InitializeComponent();

    // 現在時刻を表示
    timePicker.Time = DateTime.Now.TimeOfDay;
    
    timePicker.PropertyChanged += (sender, e) => {
        lblSelectedTime.Text = timePicker.Time.ToString();
    };
}

TimePickerの使用例

[Xamarin][CrossPlatform][Control] DatePicker

DatePickerを使用すると日付を選択することができます。

使用方法は簡単で、画面レイアウトに配置するだけです。もし選択後に表示される日付の書式を変更したい場合はFormatプロパティで設定します。

以下に例を示します。

<StackLayout>
  <DatePicker x:Name="dtpDate" 
              Format="yyyy年MM月dd日" />
</StackLayout>

日付が選択されるとDateSelectedイベントが発生します。選択された日付はNewDateプロパティで取得します。OldDateというプロパティもあるのですが、こちらは選択前の日付が入っています。

以下に選択された日付をアラートダイアログに表示する例を示します。

public MainPage()
{
    InitializeComponent();

    dtpDate.DateSelected += (sender, e) =>
    {
        DisplayAlert("選択日", e.NewDate.ToString(), "OK");
    };
}

以下に実行例を示します。

DatePickerの使用例

選択された日の取得例

[Xamarin][CrossPlatform][Control] Button

今回はButtonコントロールの使用方法について見ていきます。

Buttonコントロールの表面に表示するテキストはTextプロパティで、テキストの色はTextColorプロパティで設定をします。

また、枠線の色はBorderColorで、四隅の角はBorderRadiusに値を指定して丸くすることができます。枠線の幅はBorderWidthプロパティで指定します。

<StackLayout Padding="10,30,10,10">
   <Button x:Name="button"
           Text="Clicke Me!" 
           TextColor="Purple" 
           BorderColor="Green" 
           BorderRadius="5" 
           BorderWidth="3" 
           Grid.Row="0"/>
</StackLayout>

続いてClickイベントを見ていきましょう。

以下はMainPage.xamlのコンストラクタ内でClickイベントを作成する例です。

この例ではClickedイベントが発生したときにDisplayAlertアラートダイアログを表示します。DisplayAlertメソッドの第1引数にはタイトルを、第2引数にはメッセージを、第3引数にはキャンセルボタン(ダイアログを閉じるためのボタン)のテキストを指定します。

public MainPage()
{
    InitializeComponent();

    button.Clicked += (sender, e) => { 
        DisplayAlert("タイトル", "メッセージ", "キャンセル");
    };
}

以下に実行例を示します。

Buttonの使用例

DisplayAlertの使用例