Default Picker Item With Data Binding

Question

I am trying to make a drop-down list in Xamarin.Forms that allows a user to select a currency symbol of their choosing. I would like the first element of CurrencyList to be the default selected symbol.

Currently, no element is selected by default - even though I am using CurrencyPicker.SelectedIndex = 1; in the Page1.cs file.

Page1.xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:appproject.ViewModels"
             x:Class="appproject.Views.Page1">

    <ContentPage.BindingContext>
        <local:CurrencyViewModel></local:CurrencyViewModel>
    </ContentPage.BindingContext>


    <Grid Margin="0,0,0,0">
        Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.1*" />
            <ColumnDefinition Width="0.0*" />
            <ColumnDefinition Width="0.4*" />
            <ColumnDefinition Width="0.5*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

       <Picker ItemDisplayBinding="{Binding CurrencySymbol}" x:Name="CurrencyPicker" ItemsSource="{Binding CurrencyList}" Grid.Column="0" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
       <Entry Grid.Column="2" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
    </Grid>

Page1.cs:

using System;
using System.Collections.Generic;
using System.Text;

namespace appproject.Views
{
    class Page1{
        CurrencyPicker.SelectedIndex = 1;
    }
}

Currency.cs:

using System;
using System.Collections.Generic;
using System.Text;

namespace appproject.Models
{
public class Currency
{
    public int CurrencyID { get; set; }
    public string CurrencySymbol { get; set; }
}
}

CurrencyViewModels.cs:

using appproject.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;

namespace appproject.ViewModels
{
class CurrencyViewModel
{
    public IList<Currency> CurrencyList { get; set; }

    public CurrencyViewModel() 
    {
        try
        {
            CurrencyList = new ObservableCollection<Currency>
            {
                new Currency { CurrencyID = 1, CurrencySymbol = "£" },
                new Currency { CurrencyID = 2, CurrencySymbol = "$" },
                new Currency { CurrencyID = 3, CurrencySymbol = "$" }
            };

        }
        catch (Exception)
        {

        }       
    }

 }
}

How can I make it so the first element (currency symbol £) is the default element? Thank you.

Answer 1

First of all make your picker xaml code like this

  <Label Grid.Row="2" Grid.Column="0" Text="Currency Symbol" Margin="5,0,0,0" Style=" 
      {StaticResource baseLabelBold}" />
      <Picker Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3"
      ItemDisplayBinding="{Binding CurrencySymbol}" x:Name="CurrencyPicker" ItemsSource=" 
      {Binding CurrencyList}"
      SelectedItem="{Binding SelectedCurrency,Mode=TwoWay}">
      </Picker>

Take two property Currency list and SelectedCurrency like this on View Model

private ObservableCollection<CurrencyList> _currencylist;
        public ObservableCollection<CurrencyList> CurrencyList
        {
            get { return _currencylist; }
            set
            {
                _currencylist = value;
                base.RaisePropertyChanged(nameof(CurrencyList));
            }
        }


 private CurrencyList _SelectedCurrency;
        public CurrencyList SelectedCurrency
        {
            get { return _SelectedCurrency; }
            set
            {
                _SelectedCurrency = value;
            
                base.RaisePropertyChanged(nameof(SelectedCurrency));
            }
        }

now make a method like CurrencyList_Completed() below to insert data on your collection and selectedcurrency as defalut

protected async Task CurrencyList_Completed()
        {
            _currencylist = new ObservableCollection<CurrencyList>();
            _currencylist.Add(new CurrencyList() { CurrencyID = 1, CurrencySymbol = "£" });
            _currencylist.Add(new CurrencyList() { CurrencyID = 2, CurrencySymbol = "$" });
            _currencylist.Add(new CurrencyList() { CurrencyID = 3, CurrencySymbol = "$" });
            CurrencyList = _currencylist.ToObservableCollection();
            SelectedCurrency = CurrencyList.Where(x => x.CurrencyID == 1).FirstOrDefault();

        }

call this method on initialize your ViewModel

protected override async Task Initialize(NavigationParameters parameters)
        {
            if (parameters.GetNavigationMode() == NavigationMode.New)
            {
               
                CurrencyList_Completed();
            }

        }

Now you can get your expected output.see the attached video Video