Cascading Picker inXamarin Forms MVVM

Question

I have a question, how can I make a cascading selector to link all states in the selected city?

This code retrieves all cities and states, but one thing I can't figure out is how to take the selected city value and synchronize it with the state.

This is the ViewModel

public class MyViewModel : BaseViewModel
    {  
public async void GetCities()
        {
            using (var client = new HttpClient())
            {
                var uri = Constants.BaseApiAddress + "api/GetCities";
                var result = await client.GetStringAsync(uri);
                var CitiesList= JsonConvert.DeserializeObject<List<CityModel>>(result);
                Cities = new ObservableCollection<CityModel>(CitiesList);
            }
        }

        public async void GetStates()
        {
            using (var client = new HttpClient())
            {
                var uri = Constants.BaseApiAddress + "api/GetStates";
                var result = await client.GetStringAsync(uri);
                var StatesList= JsonConvert.DeserializeObject<List<StateModel>>(result);
                States = new ObservableCollection<StateModel>(StatesList);
            }
        }

StateModel _selectedState;
        public StateModel SelectedState
        {
            get
            {
                return _selectedState;
            }
            set
            {
                if (SelectedState!= value)
                {
                    _selectedState = value;
                    OnPropertyChanged();
                }
            }
        }
CityModel _selectedCity;
        public CityModel SelectedCity
        {
            get
            {
                return _selectedCity;
            }
            set
            {
                if (SelectedCity != value)
                {
                    _selectedCity = value;

                    OnPropertyChanged();
                }
            }
        }
 }

This is the XAML

<Picker x:Name="CityPicker" Title="Select City"
                    ItemsSource="{Binding Cities}" 
                    ItemDisplayBinding="{Binding City}" 
                    SelectedItem="{Binding SelectedCity}" />

            <Picker x:Name="StatePicker" Title="Select State"
                    ItemsSource="{Binding States}" 
                    ItemDisplayBinding="{Binding State}" 
                    SelectedItem="{Binding SelectedState}" />

Answer 1

Simply update the Cities property inside of SelectedState setter:

        public StateModel SelectedState
        {
            get
            {
                return _selectedState;
            }
            set
            {
                if (SelectedState!= value)
                {
                    _selectedState = value;
                    OnPropertyChanged();
                   if (value != null)
                        //Cities =  RetrieveCitiesByState((CityModel) value); //update Cities according to the new selected State (value)
                }
            }
        }