C#Xamarin.Formsでスマホ開発#28 Pickerの使い方を解説

Pickerとは？
準備
PickerPageの追加
- Picker.Items
- SelectedIndexChanged

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());
            }
        }
    }
}

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>

<?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>

<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");
        }
    }
}

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の文字列を抜き出しています。

Xamarin.Formsでスマホアプリ開発

C#を正しい3層構造で造れてますか？

非売品コースを受け取る