[Xuni:Input] コンボボックスやオートコンプリートの選択肢にデータをバインドして表示する方法（Xamarin.Forms）

文書番号 : 82137 文書種別 : 使用方法登録日 : 2017/04/19 最終更新日 : 2017/04/19

対象製品

Xuni

詳細

Xuni Inputにはコンボボックス（ComboBox）やオートコンプリート（AutoComplete）機能があります。
選択肢をドロップダウン形式で提示し、データの入力を支援します。
この選択肢はListをItemsSourceプロパティに設定することで表示できます。

以下のサンプルコードは都道府県名のリストを作成して、コンボボックスの選択肢としてリスト表示しています。

まずは都道府県リストを作成するクラスです。
サンプルコード
C#（Xamarin.Forms）

namespace Input101
{
    // 県名のデータモデル
    public class PrefModel
    {
        public string Name
        { get; set; }
    }
    // 県名リストを提供するクラス
    public class PrefName
    {
        static string[] _prefnames = ("北海道|" +
            "青森|岩手|宮城|秋田|山形|福島|" +
            "茨城|栃木|群馬|埼玉|千葉|東京|神奈川|" +
            "新潟|富山|石川|福井|山梨|長野|岐阜|静岡|愛知|" +
            "三重|滋賀|京都|大阪|兵庫|奈良|和歌山|" +
            "鳥取|島根|岡山|広島|山口|" +
            "徳島|香川|愛媛|高知|" +
            "福岡|佐賀|長崎|熊本|大分|宮崎|鹿児島|沖縄").Split('|');

        // コンストラクタで県名リストを作成
        public PrefName()
        {
            _PrefNameList = new List();
            foreach (var item in _prefnames)
            {
                _PrefNameList.Add(new PrefModel() { Name = item });
            }
        }
        // 県名リストのプロパティ
        private List _PrefNameList;
        public List PrefNameList
        {
            get { return _PrefNameList; }
        }
    }
}

次に、コンボボックスを設置した画面を定義するXAMLです。
コンボボックスの部分のみを抜粋しています。
サンプルコード
XAML（Xamarin.Forms）

    <xuni:XuniComboBox 
        x:Name="cbxpref" 
        DisplayMemberPath="Name" 
        HorizontalOptions="FillAndExpand" 
        DropDownHeight="300"
    />

最後はコードビハインドで都道府県名リストをItemsSourceプロパティに設定するコードです。

サンプルコード
C#（Xamarin.Forms）

// コンボボックスに都道府県名リストを設定
this.cbxpref.ItemsSource = new PrefName().PrefNameList;

こちらを表示したコンボボックス例が次の図です。

　

また、XuniのコンボボックスはDropDownModeの指定を変更できます。
以下のように"FullScreen"を指定することで、選択肢が画面全体に表示されます。

サンプルコード
XAML（Xamarin.Forms）

    <xuni:XuniComboBox 
        x:Name="cbxpref" 
        DisplayMemberPath="Name" 
        HorizontalOptions="FillAndExpand" 
        DropDownMode="FullScreen"
    />

参考情報
こちらの技術記事では、オートコンプリート機能を利用して都道府県名リストを表示しています。

Xuni　＞ < a href="http://www.goxuni.com/jp/technical-information/">技術情報＞ ComponentOne Information ＞「 Xamarin.FormsのPickerにデータバインドする」

[Xuni:Input] コンボボックスやオートコンプリートの選択肢にデータをバインドして表示する方法 （Xamarin.Forms）

対象製品

詳細

関連情報

[Xuni:Input] コンボボックスやオートコンプリートの選択肢にデータをバインドして表示する方法（Xamarin.Forms）