Let's start.

Step 1

Open Visual Studio.
Go to File >> New>> Project.
Select Templates >> Visual C#>> Cross Platform.
Select Cross Platform App (Xamarin.Forms or Native) and give your application a suitable name, such as - Instagram.
Now, choose project location and click OK.



Step 2

Create Models folder; For that, go to Solution Explorer >> right click on Instagram (PCL) app >> Add >> New Folder. Give the folder name such as Models.
Create a class named InstagramItems inside the Models folder. For that, go to Solution Explorer >> Instagram(PCL) >> right click and select new item. In the popup window, select Cross platform >> class. Give the class name Instagramitem. Double click to get into its design view and insert the code given below.

  1. namespace XamarinForms.Models
  2. {
  3. public class InstagramItem
  4. {
  6. public string UserName { get; set; }
  8. public string FullName { get; set; }
  10. public string ProfilePicture { get; set; }
  12. public string LowResolutionUrl { get; set; }
  14. public string ThumbnailUrl { get; set; }
  16. public string StandardResolutionUrl { get; set; }
  18. public string Text { get; set; }
  20. public string CreatedTime { get; set; }
  22. public int LikesCount { get; set; }object
  24. public int CommentsCount { get; set; }
  25. }
  26. }

Step 3

Similarly, create a Views folder and Instagramviewpage class inside it. Here is the code for this class. This page is your application UI.

  1. using Xamarin.Forms;
  2. using XamarinForms.ViewModels;
  4. namespace XamarinForms.Views
  5. {
  6. public class InstagramViewPage : ContentPage
  7. {
  9. public InstagramViewPage()
  10. {
  12. BackgroundColor = Color.White;
  14. var twitterViewModel = new InstagramViewModel();
  16. BindingContext = twitterViewModel;
  18. var label = new Label
  19. {
  20. Text = "Instagram",
  21. TextColor = Color.Gray,
  22. FontSize = 24
  23. };
  25. var dataTemplate = new DataTemplate(() =>
  26. {
  27. var screenNameLabel = new Label
  28. {
  29. TextColor = Color.FromHex("#1c5380"),
  30. FontSize = 22
  31. };
  32. var textLabel = new Label
  33. {
  34. TextColor = Color.Black,
  35. FontSize = 14
  36. };
  37. var likesLabel = new Label
  38. {
  39. TextColor = Color.FromHex("#517fa4"),
  40. FontSize = 14
  41. };
  42. var commentsLabel = new Label
  43. {
  44. TextColor = Color.FromHex("#517fa4"),
  45. FontSize = 14
  46. };
  47. var profileImage = new Image
  48. {
  49. WidthRequest = 60,
  50. HeightRequest = 60,
  51. VerticalOptions = LayoutOptions.Start
  52. };
  53. var mediaImage = new Image
  54. {
  55. HeightRequest = 200
  56. };
  58. screenNameLabel.SetBinding(Label.TextProperty, new Binding("UserName"));
  59. textLabel.SetBinding(Label.TextProperty, new Binding("Text"));
  60. profileImage.SetBinding(Image.SourceProperty, new Binding("ProfilePicture"));
  61. mediaImage.SetBinding(Image.SourceProperty, new Binding("StandardResolutionUrl"));
  62. likesLabel.SetBinding(Label.TextProperty, new Binding("LikesCount", BindingMode.Default, null, null, "{0:n0} likes |"));
  63. commentsLabel.SetBinding(Label.TextProperty, new Binding("CommentsCount", BindingMode.Default, null, null, "{0:n0} likes"));
  65. return new ViewCell
  66. {
  67. View = new StackLayout
  68. {
  69. Orientation = StackOrientation.Horizontal,
  70. Padding = new Thickness(0, 5),
  71. Children =
  72. {
  73. profileImage,
  74. new StackLayout
  75. {
  76. Orientation = StackOrientation.Vertical,
  77. Children =
  78. {
  79. screenNameLabel,
  80. new StackLayout
  81. {
  82. Orientation = StackOrientation.Horizontal,
  83. Children =
  84. {
  85. likesLabel,
  86. commentsLabel,
  87. }
  88. },
  89. textLabel,
  90. mediaImage,
  91. }
  92. }
  93. }
  94. }
  95. };
  96. });
  98. var listView = new ListView
  99. {
  100. HasUnevenRows = true
  101. };
  103. listView.SetBinding(ListView.ItemsSourceProperty, "InstagramItems");
  105. listView.ItemTemplate = dataTemplate;
  107. Content = new StackLayout
  108. {
  109. Padding = new Thickness(5, 10),
  110. Children =
  111. {
  112. label,
  113. listView
  114. }
  115. };
  116. }
  117. }
  118. }
Step 4.1

Create another folder named ViewModels and create InstagramViewModels class inside it. Here is the code.


  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Diagnostics;
  5. using System.Net.Http;
  6. using System.Runtime.CompilerServices;
  7. using System.Threading.Tasks;
  8. using Newtonsoft.Json;
  9. using Newtonsoft.Json.Linq;
  10. using XamarinForms.Models;
  12. namespace XamarinForms.ViewModels
  13. {
  14. public class InstagramViewModel : INotifyPropertyChanged
  15. {
  16. private List<InstagramItem> _instagramItems;
  18. public List<InstagramItem> InstagramItems
  19. {
  20. get { return _instagramItems; }
  21. set
  22. {
  23. _instagramItems = value;
  24. OnPropertyChanged();
  25. }
  26. }
  28. public InstagramViewModel()
  29. {
  30. InitDataAsync();
  31. }
  33. private async Task InitDataAsync()
  34. {
  35. var httpClient = new HttpClient();
  37. var json = await httpClient.GetStringAsync(
  38. "https://www.instagram.com/xamarinhq/media/"
  39. //"https://api.instagram.com/v1/users/469744406/media/recent?client_id=88a92ed981d74235a5a2be3cf549cb59"
  40. );
  42. JObject response = JsonConvert.DeserializeObject<dynamic>(json);
  44. var items = response.Value<JArray>("items");
  46. try
  47. {
  49. var instagramItems = new List<InstagramItem>();
  51. foreach (var item in items)
  52. {
  53. var instagramItem = new InstagramItem
  54. {
  55. UserName = item.Value<JObject>("user").Value<string>("username"),
  56. FullName = item.Value<JObject>("user").Value<string>("full_name"),
  57. ProfilePicture = item.Value<JObject>("user").Value<string>("profile_picture"),
  58. LowResolutionUrl = item.Value<JObject>("images").Value<JObject>("low_resolution").Value<string>("url"),
  59. StandardResolutionUrl = item.Value<JObject>("images").Value<JObject>("standard_resolution").Value<string>("url"),
  60. ThumbnailUrl = item.Value<JObject>("images").Value<JObject>("thumbnail").Value<string>("url"),
  61. Text = item.Value<JObject>("caption").Value<string>("text"),
  62. CreatedTime = item.Value<JObject>("caption").Value<string>("created_time"),
  63. LikesCount = item.Value<JObject>("likes").Value<int>("count"),
  64. CommentsCount = item.Value<JObject>("comments").Value<int>("count"),
  65. };
  67. instagramItems.Add(instagramItem);
  68. }
  70. InstagramItems = instagramItems;
  71. }
  72. catch (Exception exception)
  73. {
  75. }
  76. }
  78. public event PropertyChangedEventHandler PropertyChanged;
  80. protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  81. {
  82. if (PropertyChanged != null)
  83. {
  84. PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
  85. }
  86. }
  87. }
  88. }
Step 4.2

Now, we need to add namespaces. For that, go to Solution Explorer >> Instagram(PCL) >> click open InstagramViewModels page design view and add the following namespaces.

  1. using System.Collections.Generic;
  2. using System.ComponentModel;
  4. using System.Net.Http;
  5. using System.Runtime.CompilerServices;
  6. using System.Threading.Tasks;
  7. using Newtonsoft.Json;
  8. using Newtonsoft.Json.Linq;
  9. using Instagram.Models;
  10. using XamarinForms.Models;
Step 5

Add References now. For that, go to Solution Explorer >> Instagram(PCL)app >> right click on References >> Add References. Add the given references.

  1. Newtonsoft.Json
  2. System.Net.Http
  3. System.Net.Http.Extensions
  4. System.Net.Http.Primitivies
Step 6

After design view creation, go to Solution Explorer >> Instagram(PCL) >> click open App.xaml.cs file and declare that the Main page is InstagramViewPage. The code is given below.

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  6. using Xamarin.Forms;
  7. using XamarinForms.Views;
  9. using XamarinForms.Models;
  10. using XamarinForms.ViewModels;
  12. namespace Instagram
  13. {
  14. public partial class App : Application
  15. {
  16. public App()
  17. {
  18. InitializeComponent();
  20. MainPage = new InstagramViewPage();
  21. }
  23. protected override void OnStart()
  24. {
  25. // Handle when your app starts
  26. }
  28. protected override void OnSleep()
  29. {
  30. // Handle when your app sleeps
  31. }
  33. protected override void OnResume()
  34. {
  35. // Handle when your app resumes
  36. }
  37. }
  38. }
Step 7

Now, go to Build menu and click "Configure Manager". Here, you can configure your startup projects. Click F5 or start Build and Run your application.

Finally, we have successfully created a Xamarin.Forms Instagram application.
Conclusion

I hope you have learned how to create an Instagram application using MVVM pattern.