Xamarin.Forms Hands On Lab (Advanced)

1. 1.1
1.2
1.3
1.4
1.5
1.6
1.7
1.8
1.9
1.10
1.11
1.12
1.13
1.14
1.15
1.16
Table of Contents
Overview
Introduction
Requirements
Create Resource Group
Azure Mobile Services (Part 1)
Azure Mobile Services (Part 2)
Azure Mobile Services (Part 3)
Create Class & Install Nuget (Part 1)
Create Class & Install Nuget (Part 2)
Create Class & Install Nuget (Part 3)
Create Member (Part 1)
Create Member (Part 2)
Update Member
List & Search Member
Create MemberCell
Authentication (Login)
References
1

2. Xamarin.Forms Advanced Tutorial
Introduction
About this tutorial
Learn Xamarin by Creating Real World Cross-Platform Apps
Learn to build both Android and iOS Apps in C#. Also understand how code
sharing works on the Xamarin platform.
Target Audience
Those who want to apply their existing C# knowledge to create multi-platform
mobile apps.
Prepared by
Eng Soon Cheah , Microsoft MVP
@CheahEngSoon
Introduction
2

3. Requirements
Visual Studio 2015 and above
https://www.visualstudio.com/
Visual Studio Emulator for Android
https://www.visualstudio.com/vs/msft-android-emulator/
Microsoft Azure Account
https://azure.microsoft.com/en-us/
Requirements
3

4. Create Resource Group
1. Go to Your Microsoft Azure Portal, login with your Microsoft account (outlook,
hotmail & live).
2. On your left hand side pane, go to select "Resources groups" .
1. Select "Add" on your top of the Pane.
Create Resource Group
4

5. 4.
Enter your Resources Group information and Click "Create".
Create Resource Group
5

6. Azure Mobile Services (Part 1)
1. Go to your Left Pane, Select " + New".
1. Select "Web + Mobile " , and "Mobile App"
3
Azure Mobile Services (Part 1)
6

7. 3.Enter Your Mobile App information and Resources Group select the Resource
Group that you had create. After fill in information , please click "Create".
Azure Mobile Services (Part 1)
7

8. 4.Your Mobile App Dashboard Success create.
5.In the Search Pane, Search for "Easy tables" and Select "Easy tables".
6.
6.After select "Easy Tables", Select "Need to configure Easy Tables/Easy APIs
- Click here to continue ->"
Azure Mobile Services (Part 1)
8

9. 6.
7.Follow the Instruction , Select "Connect a database" & Select "Add".
8.Configure the Data Connection Information.
Azure Mobile Services (Part 1)
9

10. Azure Mobile Services (Part 2)
1. Select "Connection String" & Click "OK"
1. Check/ Tick [ / ] I acknowledge that this will overwrite all site contents. &
Click "Initialize App".
3.
Now you create your database table. Select "Add" and Enter Your Table Name
and Click "OK".
Azure Mobile Services (Part 2)
10

11. 4.Select your "Table (Member)" , and Select "Manage Schema".
Azure Mobile Services (Part 2)
11

12. Azure Mobile Services ( Part 4)
1. Select "Add Column", add 3 column "username","password" &
"membername".
Azure Mobile Services (Part 3)
12

13. Create Class and Install Nuget ( Part 1)
1. Open your Visual Studio 2015 and above.
2. Select "Cross Platform", "BlankApp(Xamarin.FormsPortable)" and name
your Xamarin Project.
3. Your Xamarin project success created and on your right side.
4. Go to your Solution Solution 'GitBookDemo', Right Click and select
"Manage Nuget Packages for Solution".
5.
Create Class & Install Nuget (Part 1)
13

14. 1. Select the First Nuget "Newtonsoft.Json" and Chcek[/] all the Project and
Click "Install".
6.
Search for another Nuget "Microsoft.Azure.Mobile.Client" & check all the
project like previous step. Do the same step for
"Microsoft.Azure.Mobile.Client.SQLiteStore".
Create Class & Install Nuget (Part 1)
14

15. Create Class & Install Nuget (Part 1)
15

16. Create Class & Install Nuget (Part 2)
1. Go to "GitBookDemo (Portable)" , Right Click > "Add" > "Class" & name
your class as "Constants.cs".
2.
Write the Class and replace the Link with your Azure Mobile Services URL that
you had create previously.
Create Class & Install Nuget (Part 2)
16

17. using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace GitBookDemo
{
public static class Constants
{
public static string ApplicationURL = @"https://gitbook.
azurewebsites.net";
}
}
Create Class & Install Nuget (Part 2)
17

18. Create Class & Install Nuget (Part 3)
1. Create another Class, name as "Member.cs" and write the code in the Class.
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace GitBookDemo
{
public class Member
{
[JsonProperty(PropertyName="id")]
public string ID { get; set; }
[JsonProperty(PropertyName ="username")]
public string username { get; set; }
[JsonProperty(PropertyName ="password")]
public string password { get; set; }
[JsonProperty(PropertyName ="membername")]
public string membername { get; set; }
}
}
1. Create another Class, name as "MemberManager.cs"
using Microsoft.WindowsAzure.MobileServices;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Linq.Expressions;
using System.Text;
Create Class & Install Nuget (Part 3)
18

19. using System.Threading.Tasks;
namespace GitBookDemo
{
public class MemberManager
{
IMobileServiceTable<Member> usersTable;
MobileServiceClient client;
public MemberManager()
{
client = new MobileServiceClient(Constants.Applicati
onURL);
usersTable = client.GetTable<Member>();
}
public async Task<Member> GetUserWhere(Expression<Func<M
ember, bool>> linq)
{
try
{
List<Member> newUser = await usersTable.Where(li
nq).Take(1).ToListAsync();
return newUser.First();
}
catch (MobileServiceInvalidOperationException msioe)
{
Debug.WriteLine(@"INVALID {0}", msioe.Message);
}
catch (Exception e)
{
Debug.WriteLine(@"ERROR {0}", e.Message);
}
return null;
}
public async Task<Member> SaveGetUserAsync(Member user)
{
if (user.ID == null)
Create Class & Install Nuget (Part 3)
19

20. {
await usersTable.InsertAsync(user);
}
else
{
await usersTable.UpdateAsync(user);
}
try
{
List<Member> newUser = await usersTable.Where(us
erSelect => userSelect.username == user.username).ToListAsync();
return newUser.First();
}
catch (MobileServiceInvalidOperationException msioe)
{
Debug.WriteLine(@"INVALID {0}", msioe.Message);
}
catch (Exception e)
{
Debug.WriteLine(@"ERROR {0}", e.Message);
}
return null;
}
public async Task<List<Member>> ListUserWhere(Expression
<Func<Member, bool>> linq)
{
try
{
return new List<Member>
(
await usersTable.Where(linq).ToListAsync()
);
}
catch (MobileServiceInvalidOperationException msioe)
{
Debug.WriteLine(@"INVALID {0}", msioe.Message);
}
Create Class & Install Nuget (Part 3)
20

21. catch (Exception e)
{
Debug.WriteLine(@"ERROR {0}", e.Message);
}
return null;
}
}
}
Create Class & Install Nuget (Part 3)
21

22. Create Member (Part 1)
1. Right Click "GitBookDemo(Portable)" , Select "Add" > Select "New Item" .
2.2.
Create Member (Part 1)
22

23. 2.Select "Forms Xaml Page" and name the page "AddMember.xaml".
Create Member (Part 1)
23

24. Create Member (Part 2)
1.Go to "AddMember.xaml", Place the Entry (Textbox) and Button and Clicked
Event
<StackLayout>
<Entry Placeholder="Username" x:Name="txtusername"/>
<Entry Placeholder="Password" x:Name="txtpassword"/>
<Button Text="Add Member" x:Name="addButton" Clicked="OnAdd"
/>
</StackLayout>
2.Then go to "AddMember.xaml.cs" and place the code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace GitBookDemo
{
public partial class AddMember : ContentPage
{
private MemberManager manager;
public AddMember()
{
InitializeComponent();
manager = new MemberManager();
}
Create Member (Part 2)
24

25. async Task AddNewMember(Member member)
{
Member userResponse = await manager.SaveGetUserAsync
(member);
Application.Current.Properties["user"] = userRespons
e;
}
public async void OnAdd(object sender, EventArgs e)
{
string username = txtusername.Text;
string password = txtpassword.Text;
if(!string.IsNullOrEmpty(username)&&!!string.IsNullOrEm
pty(password))
{
var member = new Member
{
username = username,
password = password
};
await AddNewMember(member);
await Navigation.PushModalAsync(new MemberProfil
e());
await Navigation.PopAsync();
}
}
}
}
Create Member (Part 2)
25

26. Update Member
1. Add another page "MemberProfile.xaml" and place the code.
<StackLayout>
<Entry x:Name="txtMemberName"/>
<Button x:Name="Save" Clicked="Save_Clicked"/>
</StackLayout>
2.Go to MemberProfile.xaml.cs and place the code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace GitBookDemo
{
public partial class MemberProfile : ContentPage
{
private Member currentUser;
MemberManager manager;
public MemberProfile()
{
InitializeComponent();
manager = new MemberManager();
currentUser = (Member)Application.Current.Properties
["user"];
loadData();
}
Update Member
26

27. void loadData()
{
if(currentUser!=null)
{
if(!string.IsNullOrEmpty(currentUser.membername)
)
{
txtMemberName.Text = currentUser.membername;
}
}
}
async Task UpdateUser(Member member)
{
Member userResponse = await manager.SaveGetUserAsync
(member);
Application.Current.Properties["user"] = userRespons
e;
}
async void Save_Clicked(object sender, EventArgs e)
{
string membername = this.txtMemberName.Text;
if(string.IsNullOrEmpty(membername))
{
await DisplayAlert("Error", "Fill blank fields",
"Accept");
}
else
{
var member = new Member
{
ID=currentUser.ID,
username=currentUser.username,
password=currentUser.password,
membername=membername
};
await UpdateUser(member);
await DisplayAlert("Error", "Success Update", "A
Update Member
27

28. ccept");
}
}
}
}
Update Member
28

29. List & Search Member
1. Create ListMember.xaml and place the code in Content
<StackLayout>
<SearchBar x:Name="searchBar" Placeholder="Search Route" Tex
tChanged="OnSearch"></SearchBar>
<ListView x:Name="memberListView" VerticalOptions="FillAndEx
pand"
HorizontalOptions="FillAndExpand" HeightRequest="500" RowHe
ight="100" BackgroundColor="White"
SeparatorColor="#009688" IsPullToRefreshEnabled="True" ></L
istView>
</StackLayout>
2.Place the code in ListMember.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace GitBookDemo
{
public partial class ListMember : ContentPage
{
private Member currentUser;
private List<Member> memberList;
private MemberManager memberManager;
public ListMember()
{
InitializeComponent();
List & Search Member
29

30. currentUser = (Member)Application.Current.Properties
["user"];
memberList = new List<Member>();
memberManager = new MemberManager();
memberListView.ItemTemplate = new DataTemplate(typeo
f(MemberCell));
LoadMember();
}
private async void LoadMember()
{
memberList = await memberManager.ListUserWhere(userS
elect => userSelect.membername != currentUser.membername);
if(memberList.Count!=0)
{
memberListView.ItemsSource = memberList;
}
}
private void OnSearch(object sender, TextChangedEventArg
s e)
{
if(!string.IsNullOrWhiteSpace(e.NewTextValue))
{
memberListView.ItemsSource=
memberList.Where(
userSelect=>userSelect.membername.ToLower(
).Contains(e.NewTextValue.ToLower()));
}
else
{
memberListView.ItemsSource = memberList;
}
}
}
List & Search Member
30

31. }
List & Search Member
31

32. Create MemberCell
1. Now go to "GitBookDemo (Portable)" > Select "Add" > Select "New Item" >
Select "Forms Xaml View" and Name MemberCell.xaml
2.Place the code in MemberCell.xaml
Create MemberCell
32

33. <?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml
"
x:Class="GitBookDemo.MemberCell">
<StackLayout Orientation="Horizontal" Spacing="10" Background
Color="White" Padding="10">
<Image x:Name="imageRoute" Source="profile.jpg" Aspect="Aspe
ctFill" WidthRequest="75" ></Image>
<StackLayout Orientation="Vertical" VerticalOptions="Center"
>
<Label x:Name="membername" TextColor="Blue" VerticalOption
s="Center" FontSize="20"></Label>
</StackLayout>
</StackLayout>
</ViewCell >
3.Place the backend Code in MemberCell.xaml.cs
Create MemberCell
33

34. using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace GitBookDemo
{
public partial class MemberCell : ViewCell
{
public MemberCell()
{
InitializeComponent();
membername.SetBinding(Label.TextProperty, new Bindin
g("membername"));
}
}
}
Create MemberCell
34

35. Authentication (Login)
1. Create a LoginPage.xaml (Forms Xaml Page) and place the code in Content
<StackLayout>
<Entry x:Name="txtusername" Placeholder="Username"/>
<Entry x:Name="txtpassword" Placeholder="Password"/>
<Button x:Name="signInButton" Text="SignIn" Clicked="SignIn_
Clicked"/>
</StackLayout>
2.Place the backend code LoginPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace GitBookDemo
{
public partial class Login : ContentPage
{
private Member currentUser;
private MemberManager memberManager;
public Login()
{
InitializeComponent();
memberManager = new MemberManager();
}
Authentication (Login)
35

36. async void SignIn_Clicked(object sender, EventArgs e)
{
string username = this.txtusername.Text;
string password = this.txtpassword.Text;
var user = new Member { username = username, passwor
d = password };
if(!string.IsNullOrEmpty(username)&&!string.IsNullOr
Empty(password))
{
Member userResponse = await memberManager.GetUse
rWhere(userSelect => userSelect.username == user.username && use
rSelect.password == user.password);
if (userResponse != null && userResponse.usernam
e.Equals(username, StringComparison.Ordinal) && userResponse.pas
sword.Equals(password, StringComparison.Ordinal))
{
Application.Current.Properties["user"] = use
rResponse;
Application.Current.MainPage = new Navigatio
nPage(new ListMember());
}
else
{
await DisplayAlert("Incorrect", "Your userna
me or password is incorrect, please try again.", "Close");
}
}
else
{
await DisplayAlert("Incorrect", "The fields user
name or Password can't be empty, please insert valid values.", "
Close");
}
Authentication (Login)
36

37. }
}
}
1. Go to App.cs , place this code to set Main Page to Login Page.
MainPage = new NavigationPage(new Login());
Authentication (Login)
37

38. References
Problems & Solutions after installation Xamarin in Visual Studio 2015 and
above
Part 1:
http://cheahengsoon.weebly.com/blog/unable-to-install-latest-xamarin-android-
nuget-visual-studio-solutionsc
Part 2:
http://cheahengsoon.weebly.com/blog/solve-javalangobjectclass-in-xamarin
Xamarin.Forms - Page,Layouts and Views
https://channel9.msdn.com/Blogs/MVP-Windows-Dev/XamarinFormsBeginner
Xamarin.Forms - Plugin
https://channel9.msdn.com/Blogs/MVP-Windows-Dev/XamarinForms--Plugin
Xamarin + Azure
Create a no code backend with Easy Tables
http://bit.ly/AzureXHOL1
Create a Scalable .NET Backend & Authenticate Users
http://bit.ly/AzureXHOL2
Microsoft Virtual Academy
https://mva.microsoft.com/en-US/training-courses/xamarin-for-absolute-beginners-
16182?l=fPHWqptJC_5705846048
Xamarin E-Book
https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-
xamarin-forms/
Source Code
References
38

39. https://github.com/cheahengsoon/GitBookDemo1
References
39