Today in this article I’m going to show you how to populate the picker view using MVVM.

Model View View-Model (MVVM) is a UI Based Design Pattern. The main object of MVVM is to provide a rich UI, testability features, code more reusability and complex data binding.

It helps to improve the separation of the business and presentation layers without any direct communication with each other.

Prerequisites

Creating the Project in VS 2017

Now, a new window will open. Select the Blank App and choose the platforms you want to work with. After that select .NET Standard on Code Sharing Strategy and then click OK.

Blank App

Creating the Model, the Service and ViewModels used in the project

In .NET Standard project add 3 new folders - Models, Services, and ViewModels.

In Models folder, create a new class called City and write the following C# code for creating the properties Key and Value,

Models

Similarly, under Services, create a new class called PickerService and write the following C# code to return a list of cities,

PickerService

Now, in ViewModels create a class called BaseViewModel and write the following C# code that implements the INotifyPropertyChanged interface and defines the SetProperty() that updates the backing field value,

BaseViewModel

In ViewModels folder create the class MainPageViewModel that inherits from BaseViewModel class and will act as the ViewModel for the view MainPage. Write the following C# code in this class:

  1. using System.Collections.Generic;
  2. using System.Linq;
  3. using XF_PickerMVVM.Models;
  4. using XF_PickerMVVM.Services;
  5. namespace XF_PickerMVVM.ViewModels {
  6. public class MainPageViewModel: BaseViewModel {
  7. public List < City > ListCities {
  8. get;
  9. set;
  10. }
  11. public MainPageViewModel() {
  12. ListCities = PickerService.GetCities().OrderBy(c => c.Value).ToList();
  13. }
  14. private City _selectedCity;
  15. public City SelectedCity {
  16. get {
  17. return _selectedCity;
  18. }
  19. set {
  20. SetProperty(ref _selectedCity, value);
  21. //put here your code
  22. CityText = "City : " + _selectedCity.Value;
  23. }
  24. }
  25. private string _cityText;
  26. public string CityText {
  27. get {
  28. return _cityText;
  29. }
  30. set {
  31. SetProperty(ref _cityText, value);
  32. }
  33. }
  34. }
  35. }

In this code we created 3 properties: ListCites, that returns a list of cities, SelectedCity that return the selected citiy and CityText that represents the value of the city.

Setting the MainPage.xaml view

Now, we can setting our view MainPage.xaml using the Picker view and the following properties:

  1. ItemsSource – get the source of data;
  2. ItemDisplayBinding – Get or Set a binding that selects a property that will be displayed for each object in the list of items;
  3. SelectedItem – get the selected item;
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XF_PickerMVVM" x:Class="XF_PickerMVVM.MainPage" Title="Picker with MVVM">
  3. <StackLayout>
  4. <Label Text="Select a city" FontSize="Medium" TextColor="BlueViolet" />
  5. <Picker Title="--Select--" ItemsSource="{Binding ListCities}" ItemDisplayBinding="{Binding Value}" SelectedItem="{Binding SelectedCity}" />
  6. <Label Text="{Binding CityText}" TextColor="OrangeRed" />
  7. </StackLayout>
  8. </ContentPage>

Finally in the code-behind file MainPage.xaml.cs include the code to create an instance of our ViewModel,

MainPageViewModel

Running the app we get the following result,

Result

So, in this way, we can populate the view Picker with data using MVVM in Xamarin.Forms.

Get Source Code XFPickerMVVM.zip.