How to add custom text to Picker's ItemDisplayBinding in Xamarin Forms

Question

I want to add A custom text to my Picker. I have a picker the ItemsSource and ItemDisplayBinding binds from my database How can I add a custom text to my ItemDisplayBinding I want to mix Retailer Code with PresStreet and format to "Retailer Code - Street" My table is below for reference

Picker Title="Select Retailer Code" x:Name="codePicker" SelectedIndexChanged="codePicker_SelectedIndexChanged" ItemsSource="{Binding RetailerCode}" ItemDisplayBinding="{Binding RetailerCode}" StyleClass="fieldForm" IsEnabled="False"

My code below is how I get the data from my database and add the data to my picker

var db = DependencyService.Get<ISQLiteDB>();
var conn = db.GetConnection();

var getCode = conn.QueryAsync<RetailerGroupTable>("SELECT * FROM tblRetailerGroup WHERE ContactID=?", item.ContactID);
var resultCount = getCode.Result.Count;
if (resultCount > 0)
{
   var result = getCode.Result;
   codePicker.ItemsSource = result;
   codePicker.IsEnabled = true;
}
else
{
   lstName.IsVisible = false;
   codePicker.IsEnabled = false;
}

My retailer group table:

 [Table("tblRetailerGroup")]
public class RetailerGroupTable
{
    [PrimaryKey, MaxLength(100)]
    public string RetailerCode { get; set; }
    public int ContactID { get; set; }
    [MaxLength(300)]
    public string PresStreet { get; set; }
    [MaxLength(90)]
    public string PresBarangay { get; set; }
    [MaxLength(90)]
    public string PresDistrict { get; set; }
    [MaxLength(90)]
    public string PresTown { get; set; }
    [MaxLength(90)]
    public string PresProvince { get; set; }
    [MaxLength(90)]
    public string PresCountry { get; set; }
    [MaxLength(30)]
    public string Telephone1 { get; set; }
    [MaxLength(30)]
    public string Telephone2 { get; set; }
    [MaxLength(20)]
    public string Mobile { get; set; }
    [MaxLength(50)]
    public string Email { get; set; }
    [MaxLength(200)]
    public string GPSCoordinates { get; set; }
    [MaxLength(100)]
    public string Coordinator { get; set; }
    public DateTime LastSync { get; set; }
    public DateTime ServerUpdate { get; set; }
    public DateTime MobileUpdate { get; set; }
}

Jason Jason · Accepted Answer · 2018-09-20T03:49:18

add a read only property to your class RetailerGroupTable

public string DisplayText {
  get {
    return $"{RetailerCode} - {PresStreet}";
  }
}

and then bind to it

<Picker ItemDisplayBinding="{Binding DisplayText}" ... />

How to add custom text to Picker's ItemDisplayBinding in Xamarin Forms

1 Answers