This Xamarin Workshop Guide was created for the The Portuguese National Meeting of IT Students (ENEI) by Sara Silva and the original content is available here. With the goal to extend it to the global community, it was published in a new project called Xam Community Workshop with the main goal for any developer or user group to be able to customize it for their events.

Before reading this article you must read:
Create the model and data source

The model

Before creating the UI, you need to define the model, for it you will define:

Each session should have a speaker (in real scenarios you can have more than one!). Figure 1 defines the class diagram from the model:


Figure 1: The model

In the ENEI.SessionsApp project create the Session and the Speaker class in a “Model” folder, as described in Figures 2 and 3:


Figure 2: Creating new Folder


Figure 3: Adding new file

The Session class can be defined by:

  1. public class Session : INotifyPropertyChanged
  2. {
  3. private int _numLikes;
  4. private Speaker _speaker;
  5. private string _date;
  6. private string _description;
  7. private string _name;
  8. private bool _isFavorite;
  9. private string _schedule;
  10. private string _room;
  12. public string Name
  13. {
  14. get { return _name; }
  15. set { _name = value; OnPropertyChanged(); }
  16. }
  18. public string Description
  19. {
  20. get { return _description; }
  21. set { _description = value; OnPropertyChanged(); }
  22. }
  24. public string Date
  25. {
  26. get { return _date; }
  27. set { _date = value; OnPropertyChanged(); }
  28. }
  30. public int NumLikes
  31. {
  32. get { return _numLikes; }
  33. set { _numLikes = value; OnPropertyChanged();}
  34. }
  36. public Speaker Speaker
  37. {
  38. get { return _speaker; }
  39. set { _speaker = value; OnPropertyChanged(); }
  40. }
  42. public bool IsFavorite
  43. {
  44. get { return _isFavorite; }
  45. set { _isFavorite = value; OnPropertyChanged();}
  46. }
  48. public string Schedule
  49. {
  50. get { return _schedule; }
  51. set { _schedule = value; OnPropertyChanged(); }
  52. }
  54. public string Room
  55. {
  56. get { return _room; }
  57. set { _room = value; OnPropertyChanged(); }
  58. }
  60. public string Details
  61. {
  62. get { return string.Format("{0} | {1} | Sala {2} ", Date, Schedule, Room); }
  63. }
  65. public event PropertyChangedEventHandler PropertyChanged;
  67. protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  68. {
  69. var handler = PropertyChanged;
  70. if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
  71. }
  72. }
And the Speaker class can be defined by:

  1. public class Speaker : INotifyPropertyChanged
  2. {
  3. private string _name;
  4. private string _imageUrl;
  6. public string Name
  7. {
  8. get { return _name; }
  9. set { _name = value; OnPropertyChanged();}
  10. }
  12. public string ImageUrl
  13. {
  14. get { return _imageUrl; }
  15. set { _imageUrl = value; OnPropertyChanged(); }
  16. }
  18. public event PropertyChangedEventHandler PropertyChanged;
  20. protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  21. {
  22. var handler = PropertyChanged;
  23. if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
  24. }
  25. }
Both classes implement the interface INotifyPropertyChanged that allows notification of the UI about changes in the model and this way the data will be updated in the UI (when it is used in the bindings).

The data source

The data source will define the data that will be loaded by the application, at this moment you will have hard-coded data, but in real scenarios you should have a file, database or services to provide it.

Get the SessionsDataSource class here, or create your own data.